*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}

html{
    height: 100%;
}

body{
    background-image: url(images/Screen-Shot-2016-08-30-at-11.44.04-AM-1wd5v0p.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
    min-height: 100%;
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
    position: relative;
}

.container{
    background-color: #fff;
    width: 430px;
    padding: 40px 40px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    margin-top: 70px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.form{
    display: flex;
    flex-direction: column;
}

.form img{
    margin-top: 10px;
}

.top h1{
    margin-top: 10px;
    font-size: 24px;
    font-weight: 550;
    color: rgb(27, 27, 27);
    font-family: "Segoe UI", "Helvetica Neue", "Lucida Grande", "Roboto", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
}

.input-box{
    margin: 10px 0;
    border-bottom: 1.2px solid rgb(102, 102, 102);
}

.input-box input:focus{
    border-bottom: 1.2px solid rgb(0, 103, 184);
}

.input-box input{
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 0;
    padding-right: 10px;
    font-size: 1em;
}

.create{
    margin-top: 20px;
    line-height: 35px;
}

.create h2{
    font-size: 13px;
    font-weight: 400;
}

.create span{
    color: #0067b8;
    font-size: 13px;
}

.create span:hover{
    text-decoration: underline;
    cursor: pointer;
    color: rgb(102, 102, 102);
}

.btn{
    float: right;
    width: 108px;
    height: 32px;
    background-color: rgb(0, 103, 184);
    border: none;
    color: #fff;
    margin-top: 30px;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: 0.3 ease;
}

.btn:hover{
    background-color: #0a64a9;
}


.toop{
    padding-top: 20px;
}

.toop h1{
    font-size: 23px;
    font-weight: 600;
    color: rgb(27, 27, 27);
}

.createe{
    display: flex;
    flex-direction: column;
    line-height: 30px;
}

.createe span{
    color: rgb(0, 103, 184);
    font-size: 13px;
    width: 180px;
}

.createe span:hover{
    text-decoration: underline;
    cursor: pointer;
    color: rgb(102, 102, 102);
}

.key{
    background-color: #fff;
    width: 430px;
    padding: 5px 50px;
    margin-top: 0.8%;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.key:hover{
    background-color: rgb(232, 220, 220);
    cursor: pointer;
}

.key img{
    width: 35px;
}

.key h3{
    font-size: 15px;
    font-weight: 400;
}

footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #716c6c;
    color: #fff;
}

ul{
    display: flex;
    justify-content: end;
    list-style: none;
    gap: 10px;
    font-size: 12px;
    padding: 5px 7px;
}

ul li:hover{
    text-decoration: underline;
    cursor: pointer;
}

.foot p{
    display: flex;
    justify-content: end;
    list-style: none;
    gap: 10px;
    font-size: 12px;
    padding: 5px 7px;
}

.foot span{
    text-decoration: underline;
    cursor: pointer;
}



@media (max-width: 400px) {
    html{
        height: 100%;
    }
    body{
        background-image: url(images/Screen-Shot-2016-08-30-at-11.44.04-AM-1wd5v0p.png);
        background-size: 100%;
    }
    .container{
        width: 320px;
        margin-top: 10px;
        margin-bottom: 15px;
        padding-inline: 30px;
    }
    .key{
        width: 320px;
    }
    .key img{
        width: 25px;
    }
    .key h3{
        font-size: 13px;
    }
    ul{
        font-size: 10px;
    }
    .foot p{
        font-size: 10px;
    }
    
}

@media (min-width: 401px) {
    html{
        height: 100%;
    }
    body{
        background-image: url(images/Screen-Shot-2016-08-30-at-11.44.04-AM-1wd5v0p.png);
        background-size: 100%;
    }
    .container{
        width: 400px;
        margin-top: 10px;
        margin-bottom: 15px;
        padding-inline: 30px;
    }
    .key{
        width: 400px;
    }
    .key img{
        width: 25px;
    }
    .key h3{
        font-size: 13px;
    }
    
}

@media (min-width: 701px){
    body{
        background-image: url(images/Screen-Shot-2016-08-30-at-11.44.04-AM-1wd5v0p.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 70%;
    }  
    .container{
        background-color: #fff;
        width: 430px;
        padding: 40px 40px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        margin-top: 70px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    } 
    .key{
        width: 430px;
    }
}