/* Landing Page Specific IDs */
#landing-background {position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1;}
#landing-text-container {display: inline-block; box-sizing: border-box; width: 100%; height: 95vh; text-align: right; color: white;}#landing-subtext {font-family: "Lobster Two", sans-serif; font-size: 60px; font-weight: 400; margin: 0;}
#landing-highlight-part1 {font-family: "Elsie", serif; font-size: 200px; font-weight: 900; color: gold; text-shadow: 2px 2px 10px white; margin: 0 0;}
#landing-highlight-part2 {font-family: "Elsie", serif; font-size: 40px; font-weight: 900; color: gold; text-shadow: 2px 2px 10px white; margin: 0 0;}
#landing-name-part1 {font-family: "Gwendolyn", cursive; font-size: 100px; font-weight: 700; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); margin: 0 0;}
#landing-name-part2 {font-family: "Gwendolyn", cursive; font-size: 100px; font-weight: 700; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); margin: 0 0;}
#landing-name-part3 {font-family: "Gwendolyn", cursive; font-size: 100px; font-weight: 700; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); margin: 0 0;}
#landing-register-button {display: inline-block; width: auto; height: auto; background-color: #03346E; color: #ECF0F1; border: none; padding: 1.5vh 2vw; cursor: pointer; border-radius: 0.5vw; text-align: center; transition: background-color 0.3s ease; font-size: 1.5rem; text-transform: uppercase; margin: 0;}
#landing-register-button:hover {background-color: #364549; }
.smlandingdiv {display: inline-block; box-sizing: border-box; width: 100%;}
#smlandingdiv1{height: 8vh; padding: 0 10%;}
#smlandingdiv2{height: 35vh; padding: 0 10%;}
#smlandingdiv3{height: 42vh; padding: 0 10%;}
#smlandingdiv4{height: 10vh; text-align: center; padding-top: 1vh;}

/* Register-Login CSS Rules */
#register-login-h1{display: inline-block; box-sizing: border-box; float: left; font-size: 3vw; width: 60vw; padding: 0 0 0 5vw; z-index: 1;}
#register-login-box{display: inline-block; box-sizing: border-box; float: left; width: 60vw; height: auto; padding: 0 10vw; text-align: center;}

#register-login-btn3, #register-login-btn4 {display: inline-block; box-sizing: border-box; width: 50%; height: 20vh; padding: 1vh 5vw; font-weight: 500; font-size: 2rem; border-radius: 5px; color: #ffffff; background-color: #194ab3; border: none; cursor: pointer; margin: 5vh 0;}
#register-login-btn3:hover, #register-login-btn4:hover{box-shadow: 0 0 5px white;}

/* Login CSS Rules */
#login-h1{display: inline-block; box-sizing: border-box; float: left; font-size: 3vw; width: 50vw; z-index: 1; text-align: center;}
#login-box{display: inline-block; box-sizing: border-box; float: left; width: 60vw; height: 50vh; padding: 0 10vw; text-align: center;}
#login-form table{width: 30vw;}
#login-form tr {height: 10vh; }
#login-email, #login-pass{display: inline-block; box-sizing: border-box; width: 30vw; height: 5vh; border: none; background-color: transparent; color: #ffffff; border-bottom: 2px solid #194ab3; font-size: 1.1rem; padding: 0 1vw;}
#login-btn{display: inline-block; box-sizing: border-box; width: 100%; height: 5vh; padding: 1vh 10vw; font-weight: 600; font-size: 1rem; border-radius: 5px; color: #ffffff; background-color: #194ab3; border: none; cursor: pointer;}
#login-btn:hover{box-shadow: 0 0 5px white;}
.login-blue{width: 2vh; filter: invert(30%) sepia(28%) saturate(3405%) hue-rotate(193deg) brightness(91%) contrast(94%);}

/* Register CSS Rules */
#register-h1{display: inline-block; box-sizing: border-box; float: left; font-size: 3vw; width: 50vw; z-index: 1; text-align: center;}
#register-box{display: inline-block; box-sizing: border-box; float: left; width: 60vw; height: 50vh; padding: 0 10vw; text-align: center;}
#register-form table{width: 30vw;}
#register-form tr {height: 10vh; }
#register-username, #register-email, #register-pass1, #register-pass2{display: inline-block; box-sizing: border-box; width: 30vw; height: 5vh; border: none; background-color: transparent; color: #ffffff; border-bottom: 2px solid #194ab3; font-size: 1.1rem; padding: 0 1vw;}
.register-blue{width: 2vh; filter: invert(30%) sepia(28%) saturate(3405%) hue-rotate(193deg) brightness(91%) contrast(94%);}
#regsiter-eye1, #regsiter-eye2 {cursor: pointer;}
#register-btn{display: inline-block; box-sizing: border-box; width: 100%; height: 5vh; padding: 1vh 0; font-weight: 600; font-size: 1rem; border-radius: 5px; color: #ffffff; background-color: #194ab3; border: none; cursor: pointer;}
#register-btn:hover{box-shadow: 0 0 5px white;}

/* Additional CSS Rules */
body {margin: 0; padding: 0; overflow: hidden; background-color:#0a1d46; font-family: "Poppins"; }
#lady{position: absolute; top: 3vh; right: 0;  width: auto; height: 100%; z-index:-1;}
.content {display: inline-block; box-sizing: border-box; float: left; width: 100%; height: 95vh; color: white; padding-top: 5vh;}
.gw_reg {font-family: "Gwendolyn", cursive; font-weight: 400; font-style: normal;}
.gw_bold {font-family: "Gwendolyn", cursive; font-weight: 700;}
.lob_reg {font-family: "Lobster Two", sans-serif; font-weight: 400; font-style: normal;}
.lob_bold {font-family: "Lobster Two", sans-serif; font-weight: 700; font-style: normal;}
.lob_reg_italic {font-family: "Lobster Two", sans-serif; font-weight: 400; font-style: italic;}
.lob_bold_italic {font-family: "Lobster Two", sans-serif; font-weight: 700; font-style: italic;}
.elsie_regular {font-family: "Elsie", serif; font-weight: 400; font-style: normal;}
.elsie_black {font-family: "Elsie", serif; font-weight: 900; font-style: normal;}

/* Footer CSS Rules */
.footer {display: inline-block; box-sizing: border-box; float: left; width: 100%; height: 5vh; padding: 1vh 0; background-color: rgba(10, 29, 70, 0.8); }
.footer_lang{display: inline-block; box-sizing: border-box; float: left; width: 50vw; text-align: center;}
.footer_img {display: inline-block; box-sizing: border-box; width: auto; height: 3vh; object-fit: contain; margin: 0.25vh 0.25vw;}
.footer_rights{display: inline-block; box-sizing: border-box; float: left; width: 49vw; height: 100%; color: #ffffff; text-align: center; font-size: 1.1rem;}
.footer_rights span{display: inline-block; box-sizing: border-box; width: 20vw; margin: 0 1vw; padding: 0.25vh 0;}
.flag_lk{cursor: pointer;}
.flag_lk:hover{box-shadow: 0 0 5px white;}


/* Responsive Adjustments */
@media only screen and (min-width: 300px) and (max-width: 389px) {
    /*LANDING PAGE*/
    #landing-text-container {text-align: center; padding: 0 2vw; height: 90vh;}
    #landing-background {width: 100vw;}
    #landing-highlight-part1 {font-size: 80px; }
    #landing-highlight-part2 {font-size: 40px;}
    #landing-name-part1, #landing-name-part2, #landing-name-part3 {font-size: 3rem; text-shadow: 0px 0px 60px rgba(255, 255, 255, 1); padding-top: auto;}
    #landing-subtext {text-align: center; font-size: 1.5rem;}
    #landing-register-button {width: 60vw; border-radius: 2vw;}
    #smlandingdiv1{height: 10vh; width: 100%; font-size: 1rem; padding: 2vh 0 0 0;}
    #smlandingdiv2{height: 30vh; padding: 0 0;}
    #smlandingdiv3{height: 40vh; padding: 0 0;}
    #smlandingdiv4{height: 10vh; padding: 0 0;}
    #register-login-h1{width: 100%; font-size: 5vh; text-align: center; padding: 0 5vw;}   
    #lady{top: 53vh; right: 0; width: auto; height: 48vh; }
    #register-login-btnBox {width: 100%; padding: 0 15vw; text-align: center;  }
    #register-login-btn3, #register-login-btn4 {width: 40vw; height: 10vh; font-size: 1rem; margin: 2.5vh 0; font-weight: 400;}
    #login-h1{width: 100%; font-size: 5vh; text-align: center; padding: 0 5vw;}
    #login-box{width: 100%; padding: 0 15vw; text-align: center;}
    #login-email, #login-pass{width: 100%;}  
    #login-form table{width: 100%;}
    #register-h1{width: 100%; font-size: 5vh; text-align: center; padding: 0 5vw;}
    #register-box{width: 100%; padding: 0 15vw; text-align: center;}
    #register-email, #register-pass1, #register-pass2{width: 100%;}
    #register-form table{width: 100%;}
    .content{height: 85vh;}
    .footer{height: 10vh;}
    .footer_lang, .footer_rights{width: 49%; padding: 1vh 0;}
    .footer_rights span{width: 100%; font-size: 0.95rem;} 
}

@media only screen and (min-width: 390px) and (max-width: 599px) {
    #landing-text-container {text-align: center; padding: 0 2vw; height: 90vh;}
    #landing-highlight-part1 {font-size: 100px; }
    #landing-highlight-part2 {font-size: 40px;}
    #landing-name-part1, #landing-name-part2, #landing-name-part3 {font-size: 65px; text-shadow: 0px 0px 60px rgba(255, 255, 102, 1); padding-top: auto;}
    #landing-subtext {font-size: 2rem;}
    #landing-register-button {width: 60vw; border-radius: 2vw;}
    .content {padding-top: 5vh;}
    #smlandingdiv1{height: 10vh; padding: 2vh 0;}
    #smlandingdiv2{height: 30vh; padding: 0 0;}
    #smlandingdiv3{height: 40vh; padding: 0 0;}
    #smlandingdiv4{height: 10vh; padding: 0 0;}    
    #register-login-h1{width: 100%; font-size: 4vh; text-align: center; padding: 0 4vw;}   
    #lady{top: 50vh; right: 0; width: auto; height: 52vh; }
    #register-login-btnBox {width: 100%; padding: 0 15vw; text-align: center;  }
    #register-login-btn3, #register-login-btn4 {width: 40vw; height: 10vh; font-size: 1rem; margin: 2.5vh 0; font-weight: 400;}
    #login-h1{width: 100%; font-size: 5vh; text-align: center; padding: 0 5vw;}
    #login-box{width: 100%; padding: 0 15vw; text-align: center;}
    #login-email, #login-pass{width: 100%;}
    #login-form table{width: 100%;}
    #register-h1{width: 100%; font-size: 5vh; text-align: center; padding: 0 5vw;}
    #register-box{width: 100%; padding: 0 15vw; text-align: center;}
    #register-email, #register-pass1, #register-pass2{width: 100%;}
    #register-form table{width: 100%;}
    .content{height: 85vh;}
    .footer{height: 10vh;}
    .footer_lang, .footer_rights{width: 49%; padding: 1vh 0;}
    .footer_rights span{width: 100%; font-size: 0.95rem;} 
}
@media only screen and (min-width: 600px) and (max-width: 940px) {
    #landing-text-container {padding: 0 2vw; height: 90vh;}
    #landing-highlight-part1 {font-size: 4rem; }
    #landing-highlight-part2 {font-size: 1.2rem;}
    #landing-name-part1, #landing-name-part2, #landing-name-part3 {font-size: 2rem; text-shadow: 0px 0px 60px rgba(255, 255, 102, 1); padding-top: auto;}
    #landing-subtext {font-size: 2rem;}
    #landing-register-button {width: 25%; border-radius: 2vw; font-size: 1.2rem}
    .content {padding-top: 5vh;}
    #smlandingdiv1{height: 10vh; padding: 0 10%;}
    #smlandingdiv2{height: 30vh; padding: 0 10%;}
    #smlandingdiv3{height: 30vh; padding: 0 10%;}
    #smlandingdiv4{height: 10vh; padding: 5vh 0 0 0;}
    #register-login-h1{width:100%; font-size: 5vh; text-align: left; padding: 0 5vw 0 5vw;}
    #register-login-btnBox {width: 50vw; padding:0 5vw; text-align: center;  }
    #register-login-btn3, #register-login-btn4 {width: 30vw; height: 15vh; font-size: 1rem; margin: 2.5vh 0;}
    #login-email, #login-pass{width: 100%; height: 10vh;}
    #login-form tr{height: 15vh;}
    #login-btn {height: 10vh;}
    #register-email, #register-pass1, #register-pass2{width: 100%; height: 10vh;}
    #register-form tr{height: 15vh;}
    #register-btn {height: 10vh;}
    .content{height: 85vh;}
    .footer{height: 10vh;}
    .footer_lang, .footer_rights{width: 49%; height: 100%; padding: 1vh 0;}
    .footer_rights span{ font-size: 0.95rem;} 
}