html {
    box-sizing:             border-box;
}
*, *:before, *:after {
    box-sizing:             inherit;
}

::-webkit-scrollbar {
    width:                  10px;
}

::-webkit-scrollbar-track {
    background:             #FFD695;
    border:                 3px solid #000;
    border-radius:          9px;
}

::-webkit-scrollbar-thumb {
    background-color:       #AA680C;
    border:                 3px solid #000;
    border-radius:          9px;
    background-clip:        content-box;
}

:root {
    --backgroundSize:                   200px 180px;
    --contentWidth:                     80vw;
    --contentHeight:                    70vh;
    --contentMinWidth:                  400px;
    --contentMaxWidth:                  900px;
    --cubeTravelHigh:                   200px;
    --pageContainerCardPaddingTop:      20px;
    --pageContainerCardPaddingLeft:     40px;
    --carouselControlsHeight:           50px;
}

.loadingScreen {
    width:                  100vw;
    height:                 100vh;
    display:                flex;
    flex-direction:         column;
    justify-content:        center;
    align-items:            center;
    position:               absolute;
    background-color:       #FFD695;
    z-index:                1000;
}
.loadingTextWrapper {
    font-weight:            bold;
    font-size:              2rem;    
    color:                  #e2a302;
}
.loadingTextWrapper > p {
    margin:                 0;
}

.loadingProgressBorder {
    width:                  300px;
    height:                 30px;
    border:                 #e2a302 5px solid;
    border-radius:          15px;
    overflow:               hidden;
    position:               relative;
    padding:                3px;
}
.progressBar {
    width:                  0%;
    height:                 100%;
    background-color:       #e2a302;
    border-radius:          15px;
}

body {  
    font-family:            "Pixelify Sans", sans-serif;
    background-image:       url("../assets/background_tile.png");
    background-size:        var(--backgroundSize);
    animation:              backgroundAnimation 5s linear infinite;
    overflow:               hidden;
}

@keyframes backgroundAnimation {
    0% {
        background-position:    0 0;
    }
    100% {
        background-position:    var(--backgroundSize);
    }
}
/* <============================================================================> */



/* <===Main Card===> */
.pageWrapper {
    width:                  auto;
    height:                 var(--contentHeight);
    display:                flex;
    justify-content:        center;
    padding-top:             5vh; 
}

.pageContainerCard {
    width:                  var(--contentWidth);
    max-width:              var(--contentMaxWidth);
    min-width:              var(--contentMinWidth);
    height:                 var(--contentHeight);
    position:               absolute;
    background-size:        100% 100%;
    padding:                var(--pageContainerCardPaddingTop) var(--pageContainerCardPaddingLeft);

}
/* <============================================================================> */




/* <===Navigation Buttons===> */
.buttonWrapper {
    width:                  100vw;
    display:                flex;
    justify-content:        center;
    align-items:            center;
    position:               absolute;
    top:                    80vh;
}

.buttonContainer {
    width:                  var(--contentWidth);
    max-width:              var(--contentMaxWidth);
    min-width:              var(--contentMinWidth);
    height:                 80px;
    display:                flex;
    justify-content:        space-around;
    align-items:            center;
}

.bigButton {
    width:                  150px;
    height:                 80px;
    /* background-image:       url("../assets/button_big.png");
    background-size:        100% 100%; */
    filter:                 hue-rotate(-25deg);
    align-items:            center;
    display:                flex;
    justify-content:        center;
    color:                  white;
    background-size:        100% 100%;
}

.bigButton:hover {
    color:                  #000000;
}

.bigButton.active {
    color:                  #FFFA70;
}

.bigButtonText {
    font-size:              1rem;
    font-weight:            bold;
    text-transform:         uppercase;
    letter-spacing:         1px;
    text-shadow:            0px 3px 0px rgba(0, 0, 0, 1);
    margin-bottom:          40px;
}

.bigButton:hover .bigButtonText {
    text-shadow:            0px 3px 0px #FFFA70;
}

.bigButton.active:hover .bigButtonText {
    text-shadow:            0px 3px 0px #000000;
}

.bigButton.active .bigButtonText {
    margin-top:             30px;
}
/* <============================================================================> */




/* <===Introduction===> */
.aboutMeContentWrapper {
    width:                  calc(100% - (var(--pageContainerCardPaddingLeft) * 2));
    height:                 calc(100% - (var(--pageContainerCardPaddingTop) * 2));
    display:                flex;
    justify-content:        center;
    align-items:            center;
    position:               absolute;
    align-items:            stretch;
}

.aboutMeCarousel {
    display:                flex;
    flex:                   2;
    flex-direction:         column;
    justify-content:        space-between;
}

.contentContainerCard {
    display:                flex;
    border:                 #000000 solid 5px;
    background-color:       #AA680C;
    border-radius:          20px;
    padding:                5px;
    margin-top:             15px;
    height:                 calc(100% - (var(--carouselControlsHeight) + 15px));
}
.contentContainerCard > .contentConatiner {
    display:                flex;
    border:                 #000000 solid 5px;
    background-color:       #F4C272;
    border-radius:          15px;
    padding:                10px 20px;
    flex-direction:         column;
}

.introductionHeader {
    font-size:              2rem;
    font-weight:            bold;
    margin:                 0;
}
.introductionDescriptionWrapper {
    overflow-y:             scroll;
}
.introductionDescriptionText {
    margin:                 5px 10px 0 0;
    text-align:             justify;
}

.introductionImageWrapper {
    height:                 100%;
    display:                flex;
    align-items:            center;
    justify-content:        center;
    flex:                   1;
}

.pixelMeImage {
    width:                  250px;
    height:                 300px;
    margin-right:           -20px;
    background-size:        100% 100%;
}

.horizontalCarouselControls {    
    height:                 50px;
    display:                flex;
    flex-direction:         row;
    justify-content:        center;
    align-items:            center;
}

.carouselArrow {
    width:                  40px;
    height:                 40px;
    background-size:        100% 100%;
}

.carouselIndicator {
    width: 10px;
    height: 10px;
    border: 3px solid #000;
    border-radius: 100%;
    background-color: #213D5E;
    margin: 5px;
}

.carouselIndicator.active {
    width: 15px;
    height: 15px;
    background-color: #8A276A;
}