@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&family=Space+Grotesk:wght@300..700&display=swap');



html {
margin: 0px;
width: 100%;
height: 100%;
background: rgb(3,7,82);
background: linear-gradient(112deg, rgba(3,7,82,1) 0%, rgba(13,19,145,1) 80%);
background-repeat: no-repeat;
}


body {
margin: 0px;
min-height: 100%;
background: url('ad.webp');
background-repeat: no-repeat;
background-position: bottom +140px right -20px;
color: white;
font-family: 'Open Sans', sans-serif;
padding-bottom: 0px;
padding-left: 100px;
padding-right: 120px;
}

.head {
margin-top: 0;
height: 50%;
padding-top: 120px;
margin-bottom: 10%;
text-align: left;
}

.main {
width: 60%;
}

.label {
font-weight: bold;
display: inline-block;
}

h1 {
font-size: 6vh;
margin-bottom: 20px;
}

h2 {
font-size: 3vh;
margin-top: 0px;
font-weight: normal;
}

h3 {
 font-size: 3vh;
 font-optical-sizing: auto;
 font-weight: lighter;
 margin-top: -25px;
 
}

.unique-heading {
    font-size: 5vh;
}


a {
    color: #22b4de; 
    text-decoration: none; 
    font-weight: bold; 
    position: relative;
}

a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #22b4de;
    transition: width .3s;
    position: absolute;
    left: 0;
    bottom: -2px; 
}

a:hover::after {
    width: 100%; 
}

a:hover {
    color: #1a9ac6;
}

a:focus {
    outline: none;
    color: #1a9ac6;
}

a:active {
    color: #117094; 
}

.captcha-container {
    text-align: left;
    margin-top: 0px;
}

.captcha-container img {
    margin-bottom: 9px;
    border-radius: 3px;
    width: 100%;
}

.captcha-container input[type="text"] {
    padding: 15px;
    text-transform: lowercase;
    font-size: 1.5vh;
    margin-top: px;
    width: 88%;
    border: 1px solid #0b79b7; 
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    outline: none;
}

.captcha-container input[type="submit"] {
    padding: 10px 20px;
    font-size: 1.5vh;
    color: white;
    width: 100%;
    background-color: #0b79b7;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.captcha-container input[type="submit"]:hover {
    background-color: #0aa3ce;
    color: black;
}



p {
 font-size: 2vh;
 font-family: "Space Grotesk", sans-serif;
 font-optical-sizing: auto;
 font-weight: <weight>;
 font-style: normal;
}


#info-container span {
    display: inline-block;
    margin-right: 20px;
}

#info-container {
     margin-top: 100px;
}

footer {
    margin-top:5%;
    padding: 10px;
    flex: 1;
    text-align: left;
    color: #22B4DE;
    width: 100%;
    font-family: "Space Grotesk", sans-serif;

}

footer p {
    font-size: 10px;
    font-weight: bold;
}



@media (max-width: 1400px) and (orientation: portrait) {
    body {
        background-size: 60%;
        background-position: bottom 10px right 5px; 
        padding-left: 40px;
        padding-right: 20px;
    }

    h1 {
        font-size: 5vh; 
    }

    h2 {
        font-size: 3vh;
    }
    h3 {
        font-size: 3vh;
    }

    .main {
        width: 100%;
    }

    .captcha-container img {
        width: 100%;
        margin-bottom: 0px;
    }

    .captcha-container input[type="submit"] {
        font-size: 2.5vh; 
        width: 100%;
        padding: 10px 10px;
        margin-top: 10px;
    }

    .captcha-container input[type="text"]{
        padding: 7px;
        font-size: 2vh;
        margin-top: 10px;
        width: 95%;
        height: 30px;
    }

}





@media (max-width: 600px) and (orientation: portrait) {
    .head {
        padding-top: 40px;
    }
    body {
        background-size: 40%; 
        background-position: top 50% right 5px;
        padding-left: 20px;
        padding-right: 10px;
    }

    h1 {
        font-size: 5h; 
    }

    h2 {
        font-size: 3.5vh;
    }
    h3 {
     font-size: 2vh;
     font-optical-sizing: auto;
     font-style: normal;
     margin-top: -10px;
     margin-left: 5px;        
    }
    
    #info-container span {
        display: inline-block;
        margin-right: 20px;
        white-space: nowrap;
        font-size:13px
    }
    
    #info-container{
        margin-top: 50px;
    }

    .captcha-container img {
        width: 90%;
        margin-bottom: 10px;
        margin-left: -40px;
    }

    .captcha-container input[type="submit"] {
        font-size: 2.5vh; 
        width: 90%;
        padding: 8px 8px;
        margin-top: 10px;
        margin-left: -40px;
    }

    .captcha-container input[type="text"]{
        padding: 10px;
        font-size: 1.8vh;
        margin-top: 3px;
        width: 82%;
        margin-left: -40px;
    }
    footer {
    margin-top:0%;
    padding: 0px;
    text-align:right;  
    width: 100%;
}
    
}


@media (max-height: 840px) {
    .head {
        padding-top: 20px;
        margin-bottom: 10px;
    }
    body {
        background-size: 40%; 
        background-position: top 20% right 5px;
        padding-left: 40px;
        padding-right: 10px;
    }

    .captcha-container img {
        width: 100%;
        margin-bottom: 10px;
    }

    .captcha-container input[type="submit"] {
        font-size: 3.5vh; 
        width: 100%;
        padding: 10px 10px;
        margin-top: 10px;
    }

    .captcha-container input[type="text"]{
        padding: 10px;
        font-size: 2.8vh;
        margin-top: 0px;
        width: 92%;
    }
    h1 {
     font-size: 7vh;
     margin-bottom: -5px;
     font-optical-sizing: auto;
     font-style: normal;
    }
    
    #info-container span {
    display: flex;
    }
    
    h3 {
     font-size: 3vh;
     font-optical-sizing: auto;
     font-style: normal;
     margin-top: -10px;
        
    }
    p {
     font-size: 4vh;   
        
    }
    #info-container span {
        display: inline-block;
        margin-right: 20px;
        white-space: nowrap;
        font-size:13px
    }
    
    #info-container{
        margin-top: 50px;
    }

    footer {
    margin-top:0%;
    padding: 0px;
    text-align:right;  
    width: 100%;
}
}