/*Button Settings*/

.cursor-pointer {
    cursor: pointer;
}

.menu-button-settings {

    scale: 1;
    transition: 0.3s ease-in-out;

    cursor: pointer;

}

.menu-button-settings:hover {

    scale: 1.1;

}

.backgroundImage {
    opacity: 1;
    transition: 0.3s ease-in-out;

}

.container-fluid:has(.menu-button-settings:hover) .backgroundImage {
    opacity: 0.3;
}

.charImage {
    opacity: 1;
    transition: 0.3s ease-in-out;

}

.container-fluid:has(.menu-button-settings:hover) .charImage {
    opacity: 0;
}

.container-fluid:has(.button1:hover) .button2,
.container-fluid:has(.button1:hover) .button3,
.container-fluid:has(.button1:hover) .button4 {
    opacity: 0.2;
    scale: 0.9;

}

.container-fluid:has(.button2:hover) .button1,
.container-fluid:has(.button2:hover) .button3,
.container-fluid:has(.button2:hover) .button4 {
    opacity: 0.2;
    scale: 0.9;

}

.container-fluid:has(.button3:hover) .button1,
.container-fluid:has(.button3:hover) .button2,
.container-fluid:has(.button3:hover) .button4 {
    opacity: 0.2;
    scale: 0.9;

}

.container-fluid:has(.button4:hover) .button1,
.container-fluid:has(.button4:hover) .button2,
.container-fluid:has(.button4:hover) .button3 {
    opacity: 0.2;
    scale: 0.9;

}

.container-fluid:has(.button5:hover) .button1,
.container-fluid:has(.button5:hover) .button2,
.container-fluid:has(.button5:hover) .button3,
.container-fluid:has(.button5:hover) .button4 {
    opacity: 0.2;
    scale: 0.9;

}

.container-fluid:has(.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover, .button7:hover, .button8:hover, .button9:hover, .button10:hover) :is(.button1, .button2, .button3, .button4, .button5, .button6, .button7, .button8, .button9, .button10):not(:hover) {
    opacity: 0.2;
    scale: 0.9;
}

@media (orientation: landscape) {
    .rounded-md-edges {
        border-radius: 2vh 2vh 2vh 2vh;
    }

    .rounded-md-edges-left {
        border-radius: 2vh 0vh 0vh 2vh;
    }

    .rounded-md-edges-right {
        border-radius: 0vh 2vh 2vh 0vh;
    }
}



@media (orientation: portrait) {
    .rounded-sm-edges {
        border-radius: 2vh 2vh 2vh 2vh;
    }

    .rounded-sm-edges-none {
        border-radius: 0vh 0vh 0vh 0vh;
    }

    .rounded-sm-edges-bottom {
        border-radius: 0vh 0vh 2vh 2vh;
    }

    .rounded-sm-edges-top {
        border-radius: 2vh 2vh 0vh 0vh;
    }
}


.rounded-edges-left {
    border-radius: 2vh 0vh 0vh 2vh;
}

.rounded-edges-right {
    border-radius: 0vh 2vh 2vh 0vh;
}

.background-fade {
    background-color: rgba(0, 0, 0, 0.8);
    transition: ease-in-out 0.3s;
}

.about_button_one {
    background-color: rgba(0, 0, 0, 0.7);
    border: solid 0.3vh rgb(2, 2, 2);
    border-radius: 2vh 2vh 2vh 2vh;
    padding: 1.5vh;
    box-shadow: 0px 15px 10px 0px rgba(0, 0, 0, 0.8);
    /*color: white;*/
}

.about_button_two {
    background-color: rgba(0, 0, 0, 0.7);
    border: solid 0.3vh rgb(2, 2, 2);
    border-radius: 2vh 2vh 2vh 2vh;
    padding: 1.5vh;
    box-shadow: 0px 15px 10px 0px rgba(0, 0, 0, 0.8);
    /*color: white;*/
}

.about_button_three {
    background-color: rgba(0, 0, 0, 0.7);
    border: solid 0.3vh rgb(2, 2, 2);
    border-radius: 2vh 2vh 2vh 2vh;
    padding: 1.5vh;
    box-shadow: 0px 15px 10px 0px rgba(0, 0, 0, 0.8);
    /*color: white;*/
}

.about_button_four {
    background-color: rgba(0, 0, 0, 0.7);
    border: solid 0.3vh rgb(2, 2, 2);
    border-radius: 2vh 2vh 2vh 2vh;
    padding: 1.5vh;
    box-shadow: 0px 15px 10px 0px rgba(0, 0, 0, 0.8);
    /*color: white;*/
}

.object-fit {
    object-fit: cover;
    width: 100%;
    height: 100%;
}