﻿

.HomeResponsive {
    width: 450px;
} 
.HeaderGeneralFormat {
    font-family: 'Yeon Sung';
    font-size: 1.2em;
}


.LandscapeHomeResponsive {
    width: 210px;
}

.LandscapeGeneralFormat {
    font-family: 'Yeon Sung';
    font-size: 1.0em;
}
.PortraitHomeResponsive {
    width: 210px;
}

.ExplorerParent {
        margin-top: 0;
    }
.PortraitSmallHeaderGeneralFormat {
    color: darkgreen;
    font-weight: 900;
    margin-bottom: 7px;
    max-width: 250px;
    text-align: center;
    margin: auto;
}

.PortraitSmallHeaderImmerseFormat {
    color: darkgreen;
    font-weight: 900;
    margin-bottom: 7px;
    max-width: 250px;
    text-align: center;
    margin: auto;
}

@media screen and (max-height: 375px) {
    .WidthControl {
        width: 55px !important;
        /*width: 90px !important;*/
    }
}
@media screen and (min-height: 376px) {
    .WidthControl {
        width: 90px !important;
   
    }
    .TitleDiv {
        text-align: center;
        left: 0;
        right: 0;
        margin: auto;
        width: fit-content;
        font-size: 2.4vh;
        font-weight: bolder;
    }
    .SubTitleDiv {
        font-size: 1.8vh;
    }
}
.center {
    position: absolute;
    top: 49%;
    transform: translateY(-49%);
    width: 350px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center
}

@media screen and (max-height: 375px) and (orientation:landscape) {
    .WidthControl {
        width: 45px !important;
/*        width: 90px !important;*/
    }

    .TitleDiv {
        text-align: center;
        left: 0;
        right: 0;
        margin: auto;
        width: fit-content;
        /*font-size: 1.7vh;*/
        font-weight: bolder;
    }

    .center {
        position: absolute;
        top: 39%;
        transform: translateY(-39%);
        width: 350px;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center
    }
}

/*@media screen and (min-height: 376px) {
  

    .TitleDiv {
        text-align: center;
        left: 0;
        right: 0;
        margin: auto;
        width: fit-content;
        font-size: 2.4vh;
        font-weight: bolder;
    }
}*/
/*@media screen and (min-height: 651px)  {
 
}*/
/*.TitleDiv {
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    font-size: 2.4vh;
    font-weight: bolder; 
}
*/
/*@media screen and (max-height: 650px), (orientation:landscape) {
    .absoluteCenterHome {
        width: auto;
        max-width: 300px;
        max-height: 450px;
        margin: auto;
        position: absolute;
        top: 50px;
        bottom: 0px;
        left: 0;
        right: 0;
        overflow: auto;
        scrollbar-width: none;*/
/*overflow: auto;*/
/*}
}*/
/*@media screen and (min-height: 651px) {
    .absoluteCenterHome {
        width: auto;
        max-width: 300px;
        max-height: 450px;
        margin: auto;
        position: absolute;
        top: 100px;
        bottom: 0px;
        left: 0;
        right: 0;
        overflow: auto;
        scrollbar-width: none;*/
/*overflow: auto;*/
/*}
}*/
/*.container2 {
    display: flex;
    align-items: center;*/ /* Vertical centering */
/*justify-content: center;*/ /* Horizontal centering (optional) */
/*min-height: 100vh;*/ /* Ensure it takes up full viewport height */
/*}*/
.absoluteCenterHome {
    width: auto;
    max-width: 300px;
    max-height: 450px;
    margin: auto;
    position: absolute;
    top: 50%;
    top: 100px;
    bottom: 0px;
    left: 0;
    right: 0;
    overflow: auto;
    scrollbar-width: none;
    overflow: auto;
}



.container {
    /*position: relative;*/
    height: 100vh; /* Full viewport height */
}



.PortraitSmallHeaderWeatherFormat {
    font-weight: 800;
    margin-top: 7px;
    margin: auto;
    text-align: center;
    max-width: 162px;
}


/*.LandscapeSmallContainer {
    position: absolute;
    top: 42%;
    transform: translateY(-42%);
}*/

.NormalContainer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}