*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

/* basic style */
html{
    background-image: url('/IMG/call\ of\ duty\ pic\ 3.jpg');
}

body{
    font-family: serif;
    height: 100vh;
    
}

a{
    color: aquamarine;
    display: inline-block;
    text-decoration: none;
    font-weight: 400;
}

h2{
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    margin: 40px 8px 10px 8px;
    color: floralwhite;
}

h1{
    text-align: center;
    margin: 40px 8px 10px 8px;
}

/* structuring */

.wrapper{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 20px;
}

#formContent{
    background-color: darkslategrey;
    -webkit-border-radius:10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    padding: 30px;
    width: 90%;
    max-width: 450px;
    position: relative;
    padding: 0px;
    -webkit-box-shadow:0 30px 60px 0 rgba(0,0,0.3);
    box-shadow:0 30px 60px 0 rgba(0,0,0,0.3);
    text-align: center;
}

#formfooter{
    background: color #f6f6f6;
    border-top: #dce8f1;
    padding: 25px;
    text-align: center;
    -webkit-border-radius:0 0 10px 10px;
    border-radius:0 0 10px 10px;
}

/* tabs */
h2.inactive{
    color: #0d0d00;
    border-bottom: #5fbae9;
}

h2.active{
    color: #0d0d00;
    border-bottom: 2px solid #5fbae9;
}

/* form typology */

input[type=button],
input[type=submit],
input[type=reset]{
    background-color:   lightsteelblue;
    border: none;
    color: white;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 30px;
    -webkit-box-shadow:0 10px 30px 0 rgba(95,186,233,0.4);
    box-shadow:0 10px 30px 0 rgba(95,186,233,0.4);
    -webkit-border-radius:5px 5px 5px 5px;
    border-radius:5px 5px 5px 5px;
    margin: 50px 50px 50px 50px ;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out ;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out ;
    transition:all 0.3s ease-in-out;
}

input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover{
    background-color:#5fbae9;
}

input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active{
    -moz-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}

input[type=text]{
    background-color: #f6f6f6;
    border: none;
    color:#0d0d00;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    margin: 60px;
    width: 60%;
    border: 2px solid #f6f6f6;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out ;
    -ms-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out ;
    transition:all 0.5s ease-in-out;
    -webkit-border-radius:5px 5px 5px 5px;
    border-radius:5px 5px 5px 5px;
}


input[type=password]{
    background-color: #f6f6f6;
    border: none;
    color:#0d0d00;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    margin: 60px;
    width: 60%;
    border: 2px solid #f6f6f6;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out ;
    -ms-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out ;
    transition:all 0.5s ease-in-out;
    -webkit-border-radius:5px 5px 5px 5px;
    border-radius:5px 5px 5px 5px;
}

p{
    color: lightblue;
}

input[type=text]:focus{
    background-color: #fff;
    border-bottom:2px solid #5fbae9;
}

input[type=text]::placeholder,
input[type=password]::placeholder{
    color: #cccccc;
}

/* animation */

/*  */
.fadeInDown{
    -webkit-animation-name:patrick ;
    animation-name: patrick;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes patrick{
    0%{
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes patrick{
    0%{
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);  
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    
}

}
.first{
    -webkit-animation-name:patrick ;
    animation-name: patrick;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes patrick{
    0%{
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes patrick{
    0%{
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);  
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.second{
    -webkit-animation-name:patrick ;
    animation-name: patrick;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes patrick{
    0%{
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes patrick{
    0%{
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);  
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.third{
    -webkit-animation-name:patrick ;
    animation-name: patrick;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes patrick{
    0%{
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes patrick{
    0%{
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);  
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fourth{
    -webkit-animation-name:patrick ;
    animation-name: patrick;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes patrick{
    0%{
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes patrick{
    0%{
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);  
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}