*{
    scrollbar-width: thin;
}

body {
    background: url("./assets/bgs/tile.png"), linear-gradient(rgb(150, 255, 255), rgb(24, 166, 166));
    background-attachment: fixed;
    animation: bg-move 15s linear infinite;


    display:flex;
    flex-direction: column;

    align-items: center;
    justify-content: space-around;

    
    
    overflow: overlay;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
    
    
}

h1, h2, h3, h4 { 
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
    color:aliceblue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

/************************** PAGE TITLE ****************************/

.title-area {
    text-align: center;

    padding:5px;
    margin:65px;
    margin-left: 5px;
    margin-right: 5px;

    font-size: 95px;
    font-weight:bolder;
    text-transform: capitalize;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;

}


#title-animation-area span{
    display:inline-block;
    animation: wave 0.4s  ;
}



.main-area {
    width:95%;
    max-width: 1050px;


    margin-top: 10px;
    margin-bottom: 10px;
    padding:5px;


}

/************************** NAV AREA ****************************/

.nav-area {
    display:inline-block;

    width:100%;

    margin-bottom:15px;

}

.nav-area button {
    width:155px;
    height:65px;

    margin-right:10px;


    font-size: 16px;
    font-weight:bolder;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color:azure;
    
    text-transform: uppercase;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

    text-align: center;

    
    border:#3842ce 10px ridge;
    border-radius: 4px;
    background-color:cornflowerblue ;
}


.nav-button:hover {
  background-color: rgb(56, 115, 224);
  color: rgb(167, 196, 213);

  rotate: var(--angle);
  animation: spin 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
}

.nav-button:disabled{
    background-color: rgb(56, 115, 224);
    color: rgb(167, 196, 213);
    opacity:90%;
}

@property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}



/************************** MAIN FRAME ****************************/

.main-frame {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap:10px;

    padding:5px;

    overflow-x: hidden;


    border:#3842ce 10px ridge;
    border-radius: 4px;


    background-color:rgb(75, 117, 194) ;
    
}

/************************** WELCOME AREA ****************************/


.welcome-area {
    z-index:1;
    display: flex;

    justify-content: space-around;
    align-items: center;

    margin-top: 30px;
    margin-bottom: 30px;

    max-height: 310px;

}

.welcome-pic {
    display: flex;
    flex-direction: column;



    max-height: 280px;
    overflow-y: auto;

    

    flex:1;
}

.welcome-pic img {
    aspect-ratio: 1 / 1;
    width: 300px;
    height:290px;
    align-self: center;
    margin: auto;
    
}

.welcome-pic p {
    margin: auto;
    margin-top: 30px;
    color: aliceblue;
}

.welcome-text{
    display: flex;
    flex-direction: column;
    align-items: center;

    gap:8px;

    flex:1;
    padding-right:50px;

    overflow: visible;

    max-height: 310px;

    color:aliceblue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

.welcome-paragraph{
    display: flex;
    flex-direction: column;
    align-items: center;


    height:220px;
    overflow: scroll;
}

.welcome-paragraph img {
    height:20px;
    margin:8px;
}




.marquee {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;

    width:90%;
    height:50px;

    z-index: 2;

    animation: moveLeft;
    animation-timing-function: linear;
    animation-duration:14s;
    animation-iteration-count: infinite;
}



.marquee img {
    height: 35px;
    min-width: 70px;
    background-color: fuchsia;
    margin-left: 8px;
}

.marquee img:hover {
    animation: grow  1.1s ease-in-out infinite;
}






/************************** BORDEL AREA ****************************/

.status-area {
    
    display: flex;
    align-items: center;

    width:90%;
    height:160px;

    
}

.status-frame {
    z-index:1;
    display: flex;
    flex-direction: column;


    overflow-y: auto;

    max-height: 160px;
    min-width:300px;
    min-height:160px;


    color: aliceblue;

    background-color: rgb(69, 91, 161);

    border:#3842ce 2px ridge;
    border-radius: 4px;
}

.status-frame h2 {
    margin: auto;
    
    margin-bottom:20px;
    margin-top: 20px;
    font-weight: bold;
    text-transform:uppercase;
}

.status-frame p {
    margin:auto;
    margin-bottom:25px;
    margin-top: 25px;
}

/************************** ABSOLUTE TREE ****************************/

.tree {
    position:relative;
    z-index: 0;
    transform: translate(-40px, 60px) rotate(170deg);

    
    width:1400px;
    scale: 1.2;

    overflow: visible;

    aspect-ratio: 2 /1;

}



/************************** TOP BORDEL ****************************/

.top-bordel-area {
    z-index:1;
    display: flex;
    justify-content: start;
    gap: 10px;

    width:95%;
    height:340px;
    

}

.meowth-area {
    height:99%;
    max-width: 280px;
    flex:1;

    border:#3842ce 2px ridge;
    border-radius: 4px;
}

.meowth-area img {
    width:100%;
    height: 100%;
}



.other-shit-area{
    display: flex;
    flex-direction: column;
    gap:10px;
    width:45%;


    height: 100%;
}

.mybutton-frame {
    display: flex;
    align-items: center;
    justify-content: center;

    width:50%;
    height:35%;
    min-width: 200px;

    background-color: rgb(69, 91, 161);

    border:#3842ce 2px ridge;
    border-radius: 4px;
}

.log-frame {
    display: flex;
    flex-direction: column;


    width:99%;
    max-width: 99%;
    max-height: 65%;
    height: 65%;

    overflow-y: auto;

    background-color: rgb(69, 91, 161);

    border:#3842ce 2px ridge;
    border-radius: 4px;
    color: aliceblue;
}

.log-frame p, .log-frame h2, .log-frame ul{
    margin: auto;
}

.log-frame h2 {
    margin-bottom: 20px;
    margin-top: 20px;
}

.log-frame p {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 

    margin-top: 10px;
    margin-bottom: 10px;
}

.log-frame ul{
    margin-bottom: 10px;
    max-width: 280px;
}

.displaced-area {
    height:85%;

    transform: translateY(145px);

    border:#3842ce 2px ridge;
    border-radius: 4px;
}

.displaced-area img {
    width: 100%;
    height: 100%;
}


/************************** BOTTOM BORDEL ****************************/

.bottom-bordel-area {
    display: flex;
    justify-content: start;
    gap: 10px;

    width:95%;
    height:200px;

}

.ground-area {
    display: flex;
    align-items: center;
    flex:1;
    height:95%;
    max-height: 200px;
    
    overflow: hidden;

    border:#3842ce 2px ridge;
    border-radius: 4px;
}

.ground-area img {
    object-fit:fill;
    width: 100%;
    height: 100%;
}

.cool-area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap:10px;
    flex:1;
    height:95%;
    min-height: 120px;

}

.language-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:12px;

    height:45%;
    width:40%;
    max-width: 150px;
    min-width: 150px;
    min-height: 80px;

    background-color: rgb(69, 91, 161);

    border:#3842ce 2px ridge;
    border-radius: 4px;
    
}

.language-button{
    height:60%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.language-button:hover{
    opacity: 60%;
}

#fr { background: linear-gradient(to right,  blue 0% 30%, white 30% 70%, red 70% 100%); }

#en{
    background: url("./assets/en.png");
    background-size: cover;
    background-position: 50%;    
}


.cool-peeple {
    display: flex;
    align-items: center;
    justify-content: space-around;

    height:45%;
    width:100%;
    min-width: 366px;
    min-height: 90px;

    background-color: rgb(69, 91, 161);

    border:#3842ce 2px ridge;
    border-radius: 4px;
}


/***********************************************************************/
/************************** ADAPTIVE LAYOUT ****************************/
/***********************************************************************/


@media (max-width:940px){

    body {
        background-color: mediumvioletred;
    }

    .title-area { font-size: 70px; }

    

    .top-bordel-area{justify-content: center;}



    .displaced-area{display: none;}

    .language-button{
        height:50px;
    }

    


    @keyframes bg-move {
        0% {
            background-position-y: 2%;
        } 100% {
            background-position-y: 100%;
        }
    }  
    
}

@media (max-width:775px) {
    .tree{transform: translate(-550px, 120px) rotate(185deg); scale:1;}
    .title-area { font-size: 38px; margin-bottom: 25px}
    .welcome-area{flex-direction: column-reverse;min-height: 600px;padding:5px;}
    .welcome-text{padding:5px;}
    .welcome-paragraph{ width:85%; }
    .status-frame{min-width:99%;}
    .meowth-area{display: none;}
    .other-shit-area{align-items: center;}
    .bottom-bordel-area{flex-direction: column; height: fit-content;}
    .cool-area{align-items: center; height: fit-content;}
    .cool-peeple{ min-width: 99%;}
    .cool-peeple img{height:25px;}
}

/***********************************************************************/
/**************************** ANIMATIONS *******************************/
/***********************************************************************/


@keyframes bg-move {
    0% {
        background-position-y: 100%;
    } 100% {
        background-position-y: 2%;
    }
}


@keyframes wave{
    0%{
        transform:translateY(0px);
    } 33% {
        transform: translateY(-10px);
    } 66% {
        transform: translateY(0px);
    } 100% {
        transform: translateY(10px);
    }
}


@keyframes spin{
    from {
        --angle:0deg;
    } to {
        --angle:360deg;
    }
}

 @keyframes moveLeft {
    0% {
        transform: translateX(70vw);
    }
    100% {
        transform: translateX(-90vw);
    }
}

@keyframes grow{
    50% {
        transform: scale(2);
    } 
}