@charset "utf-8";
/* CSS Document */

/* Start of Desktop styling */
@media screen and (min-width: 1024px){
 
    body{
        background-color: rgba(3,123,132,0.4);
        overflow:hidden;
        margin:0vw;
        padding:0vw;
        max-width:100vw;
    }
    
    .login {
      border-color:  rgba(255,255,255,1.0);
      border-style: solid;
      border-width: medium;
      background-color: rgba(3,123,132,1.0);
      border-radius: 3vw;
      width:30vw;
      height:auto;
      margin:20vh 35vw;
      z-index:100;
    }
    
    .login img{
        width:20vw;
        height:auto;
        display:block;
        margin:5vw; 
    }
    
    .login input[type=text], .login input[type=email], .login input[type=password], .login select{
    width:20vw;
    font-family: "lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:1vw;
    color:rgba(51,51,51,1.00);
    display:block;
    text-align:center;
    padding:0.5vw 0vw;
    margin: 1vw 5vw;
    outline:none;
    border-radius: 10vw;
    border-style: solid;
    border-width:medium;
    transition:0.4s;
}

.login input[type=text]:valid, .login input[type=email]:valid, .login input[type=password]:valid, .login select:valid{
    border-color:rgba(3,123,132,1.00);
}

.login input[type=text]:invalid, .login input[type=email]:invalid, .login input[type=password]:invalid, .login select:invalid{
    border-color:rgba(255,107,108,1.0);
}

.login input[type=text]:focus, .login input[type=email]:focus, .login input[type=password]:focus, .login select:focus{
    box-shadow: 0vw 0vw 0.7vw rgba(127,127,127, 1.0);   
}
    
    .login input[type=submit]{
    width:20vw;
    font-family: "lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:1vw;
    background-color:rgba(255,255,255,1.00);
    display:block;
    text-align:center;
    padding:0.5vw 0vw;
    margin:1vw 5vw;
    outline:none;
    border-radius: 5vw;
    border-style: none;
    transition: all 0.4s;
    cursor: pointer;
    color:rgba(3,123,132,1.0);
}
    
    a.register{
    width:20vw;
    font-family: "lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:1vw;
    color:rgba(255,255,255,1.00);
    display:block;
    text-align:center;
    padding:0.5vw 0vw;
    margin:1vw 5vw;
    outline:none;
    border-radius: 5vw;
    border-style: none;
    transition: all 0.4s;
    cursor: pointer;
    background-color:rgba(255,107,108,1.0);
        text-decoration:none;   
}
    
    a.small{
        font-family: "lato", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size:1vw; 
        display:block;
        text-align:center;
        text-decoration:none;
        color:rgba(3,123,132,1.0);
    }
    
    .prompt{
        display:none;
    }
    
    img.bg_img1{
        width:auto;
        height:12vw;
        opacity:0.6;
        border-radius:2vw;
        position:fixed;
        top:5vw;
        left:5vw;
        border-style: solid;
        border-color: #FFFFFF;
    }
    
    img.bg_img2{
        width:auto;
        height:12vw;
        opacity:0.6;
        border-radius:2vw;
        position:fixed;
        top:20vw;
        left:10vw;
        border-style: solid;
        border-color: #FFFFFF;
    }
    
    img.bg_img3{
        width:auto;
        height:12vw;
        opacity:0.6;
        border-radius:2vw;
        position:fixed;
        top:35vw;
        left:5vw;
        border-style: solid;
        border-color: #FFFFFF;
    }
    
    img.bg_img4{
        width:auto;
        height:12vw;
        opacity:0.6;
        border-radius:2vw;
        position:fixed;
        top:5vw;
        left:78vw;
        border-style: solid;
        border-color: #FFFFFF;
    }
    
    img.bg_img5{
        width:auto;
        height:12vw;
        opacity:0.6;
        border-radius:2vw;
        position:fixed;
        top:20vw;
        left:73vw;
        border-style: solid;
        border-color: #FFFFFF;
    }
    
    img.bg_img6{
        width:auto;
        height:12vw;
        opacity:0.6;
        border-radius:2vw;
        position:fixed;
        top:35vw;
        left:78vw;
        border-style: solid;
        border-color: #FFFFFF;
    }
    
}
/* Start of Mobile styling */
@media screen and (max-width: 1023px){
 
    body{
        background-color: rgba(3,123,132,0.4);
        overflow:hidden;
        margin:0vw;
        padding:0vw;
        max-width:100vw;
    }
    
    .login {
      border-color:  rgba(255,255,255,1.0);
      border-style: solid;
      border-width: thick;
      overflow-y:auto;
      background-color: rgba(3,123,132,1.0);
      border-radius: 10vw;
      width:90vw;
      height:auto;
      margin:10vw 5vw;
      margin-bottom:30vw;
    }
    
    .login img{
        width:70vw;
        height:auto;
        display:block;
        margin:10vw; 
        z-index:1;
    }
    
    .login input[type=text], .login input[type=email], .login input[type=password], .login select{
    width:80vw;
    font-family: "lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:5vw;
    color:rgba(51,51,51,1.00);
    display:block;
    text-align:center;
    padding:2vw 0vw;
    margin:5vw;
    outline:none;
    border-radius: 10vw;
    border-style: solid;
    border-width:medium;
    transition:0.4s;
}

.login input[type=text]:valid, .login input[type=email]:valid, .login input[type=password]:valid, .login select:valid{
    border-color:rgba(3,123,132,1.00);
}

.login input[type=text]:invalid, .login input[type=email]:invalid, .login input[type=password]:invalid, .login select:invalid{
    border-color:rgba(255,107,108,1.0);
}

.login input[type=text]:focus, .login input[type=email]:focus, .login input[type=password]:focus, .login select:focus{
    box-shadow: 0vw 0vw 0.7vw rgba(127,127,127, 1.0);   
}
    
    .login input[type=submit]{
    width:80vw;
    font-family: "lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:5vw;
    background-color:rgba(255,255,255,1.00);
    display:block;
    text-align:center;
    padding:2vw 0vw;
    margin:5vw;
    outline:none;
    border-radius: 5vw;
    border-style: none;
    transition: all 0.4s;
    cursor: pointer;
    color:rgba(3,123,132,1.0);
}
    
    a.register{
    width:80vw;
    font-family: "lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:5vw;
    color:rgba(255,255,255,1.00);
    display:block;
    text-align:center;
    padding:2vw 0vw;
    margin:5vw;
    outline:none;
    border-radius: 5vw;
    border-style: none;
    transition: all 0.4s;
    cursor: pointer;
    background-color:rgba(255,107,108,1.0);
        text-decoration:none;   
}
    
    a.small{
        font-family: "lato", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size:5vw; 
        display:block;
        text-align:center;
        text-decoration:none;
        color:rgba(3,123,132,1.0);
    }
    
    img.bg_img1, img.bg_img2, img.bg_img3, img.bg_img4, img.bg_img5, img.bg_img6{
        display:none;
    }
    
    .prompt{
        display:block;
        position:fixed;
        bottom:3vh; 
        left:5vw;
        width:86vw;
        padding:2vw;
        border-radius:5vw;
        background-color:rgba(255,255,255,1.0);
        border-style:solid;
        border-color:rgba(255,255,255,1.0);
        font-family: "lato", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size:4vw;
        text-align: center;
    }
    
    .prompt::after {
    content: '';
    position: absolute;
    bottom: -5vw; /* Position the triangle directly below the bubble */
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0;
    border-left:5vw solid transparent; /* Triangle base */
    border-right: 5vw solid transparent; /* Triangle base */
    border-top: 5vw solid #FFFFFF; /* Same as bubble background */
}
    
}