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

body {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    background-color: #C7E6F5;
}




input[type=text],input[type=password]{
    width: 100%;
    padding-top: 12px;
    padding-right: 20px;
    padding-left: 5px;
    padding-bottom: 12px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    }
    
    button{
    background-color: #FFF;
    color: #000000;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    curcor: pointer;
    width: 100%;
    font-size: 16px;
    }
    
    button:hover{
    opacity: 0.8;
    }
    
    .imgcontainer {
        display: flex;
        width:100%;
    margin: 24px 0 12px 0;
    }
    
    img.avatar{
    width: 100px;
    /*right: 5%;*/
    height: 100px;
    padding-left: 33%;
    }
body h2 {
    text-shadow: 0px x;

}
.container label {
    margin-left: 5px;
}


    
    .container {
    width: 100%;
    padding-left:0px;
    /*padding: 16px;*/
    background-color: #50D0FF;
    }
    

    

   

@media screen and (max-width:575px){
    form {
    flex-wrap: nowrap;
    justify-content: space-around;
    border: 3px solid #470137;
    width: 60%;
    margin-right: 50%;
    position: relative;
    left: 20%;
    background-color: #50D0FF;
}
}

@media screen and (min-width:576px) and (max-width:767px){
    form {
    flex-wrap: nowrap;
    justify-content: space-around;
    border: 3px solid #470137;
    width: 40%;
    margin-right: 50%;
    position: relative;
    left: 20%;
    background-color: #50D0FF;
}


}


@media (min-width:768px) and (max-width:991px){
    form {
    flex-wrap: nowrap;
    justify-content: space-around;
    border: 3px solid #470137;
    width: 40%;
    margin-right: 50%;
    position: relative;
    left: 20%;
    background-color: #50D0FF;
}

}

@media (min-width:992px) and (max-width:1199px){
    form {
    flex-wrap: nowrap;
    justify-content: space-around;
    border: 3px solid #470137;
    width: 40%;
    margin-right: 50%;
    position: relative;
    left: 20%;
    background-color: #50D0FF;
}
 img.avatar{
    width: 100px;
    /*right: 5%;*/
    height: 100px;
    padding-left: 38%;
    }
}

@media (min-width:1200px){
     form {
    flex-wrap: nowrap;
    justify-content: space-around;
    border: 3px solid #470137;
    width: 35%;
   /* margin-right: 50%;*/
    position: relative;
    left: 20%;
    background-color: #50D0FF;
}
     img.avatar{
    width: 100px;
    /*right: 5%;*/
    height: 100px;
    padding-left: 39%;
    }
}