main {
    margin-top: 20px;
    justify-self: center;
}

#compare_container {
    display: grid;
    width: 1000px;
    grid-template-rows: 400px 400px;
    grid-template-areas:
        "compare1 compare2"
        "compare_data compare_data";
    column-gap: 100px;
}

#compare1 {
    grid-area: compare1
}

#compare2 {
    grid-area: compare2
}

#compare_data {
    grid-area: compare_data
}

#compare1,
#compare2 {
    width: 450px;
    background-color: rgb(2, 34, 48);
    flex-direction: column;
    align-items: center;
    display: flex;
    height: fit-content;
    padding: 20px 0 20px 0;
    gap: 10px;
}

.buy_button_container {
    background-color: black;
    width: 270px;
    height: 40px;
    display: grid;
    grid-template-columns: 100px 170px;
    user-select: none;

    * {
        margin: 5px;
    }

    .price {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px;
        user-select: text;
    }

    .buy_button {
        font-size: 16px;
        background-color: rgb(117, 176, 34);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1px;
        height: 30px;
        width: 160px;
        color: rgb(230, 230, 230);
        cursor: pointer;
        text-decoration: none;
    }

    .buy_button:hover {
        background-color: rgb(120, 200, 25);
        color: rgb(255, 255, 255);
    }
}

#compare_menu_info1,
#compare_menu_info2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}




#current_option1,
#current_option2 {
    padding: 5px;
    background-color: rgb(42, 50, 60);
    width: 220px;
    height: 30px;
    display: flex;
    align-items: center;
    user-select: none;
    cursor: pointer;


}

.arrow {
    margin-left: auto;
}

#current_option1:hover,
#current_option2:hover {
    background-color: rgb(70, 77, 88);
}

#select_menu1,
#select_menu2 {
    display: none;
    position: absolute;
    border-top: 1px solid gray;
    max-height: 200px;
    flex-wrap: wrap;
    overflow-y: scroll;
    cursor: pointer;
    user-select: none;
}

.show {
    display: block;
}

.option {
    width: 220px;
    height: 20px;
    padding: 5px;
    background-color: rgb(42, 50, 60);

}

.option:hover {
    background-color: rgb(70, 77, 88);
}

.select_menu_price {
    float: right;
}

.product_image {
    height: 225px;
    width: 270px;
}

.product_price {
    font-size: 25px;
    margin: 0;
}

.comp_type {
    font-size: 30;
}

#compare_data {
    justify-self: center;
    width: 1000px;
    background-color: rgb(2, 34, 48);
    height: fit-content;
}

.compare_type_container {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.compare_type_header {
    font-size: 30px;
    padding: 10px;
    background-color: rgb(42, 50, 60);
    width: 95%;
    align-self: center;
    border-radius: 5px;
    cursor: pointer;
}

.comp_type_arrow {
    font-size: 30px;
    color: rgb(34, 134, 255);
    margin-left: 5px;
    user-select: none;
}

.compare_spec_container {
    display: grid;
    width: 900px;
    margin: auto;
    height: 50px;
    align-items: center;
    grid-template-columns: 200px 100px 300px 100px 200px;

}

.compare_spec_name {
    font-size: 20px;
}

.compare_spec_data {
    font-size: 20px;
}

.compare_spec_data_unit {
    font-size: 10px;
}

.data_slider_con {
    color: lime;
    display: grid;
    align-items: center;
    gap: 5px;
    max-width: 200px;
    grid-template-columns: 50px 145px;
}

.data_slider_procent {
    max-width: 50px;
}

.data_slider {
    background-color: lime;
    min-width: 5px;
    max-width: 145px;
    height: 10px;
}