/* Styling HTML Elements */
body{
    background-image: url("../images/Registartion-Page-Background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
h2{
    transition: 0.5s;
    font-size: 1.5em;
}
label{
    transition: 200ms;
}

/* Styling HTML Elements - Hover */
h2:hover{
    font-size: 1.52em;
}
label:hover{
    font-size: 1.03em;
}

/* Styling IDs */
#register{
    margin-left: 40%;
    margin-bottom: 30px;
    margin-top: 20px;
}
#introduction img{
    opacity: 0.8;
    transition: opacity 200ms;
    object-fit: cover;
    width: 100%;
}
/* Styling IDs - Hover */
#introduction img:hover{
    opacity: 1;
}
#success{
    border: solid 2px#004085;
    display: none;
    transition: 1s;
}

/* Styling Classes */
.form{
    width: fit-content;
    margin-top: 1%;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 7%;
    background-color: rgba(47, 79, 79, 0.582);
    color: aliceblue;
    border-radius: 10px;
    border-width: 2px;
    border-style: solid;
    transition: background-color 0.3s;
}
.form h1{
    color: rgb(213, 219, 223);
    font-family: Lobster;
}
.form p{
    size: 2em;
}
.form-group{
    margin-top: 2%;
    margin-bottom: 2%;
    transition: 300ms;
}

/* Styling Classes - Hover */
.form:hover{
    background-color: rgba(47, 79, 79, 0.65);
}
.form-group:hover{
    margin-bottom: 2.5%;
    margin-top: 2.5%;
}

/* Setting Mobile Behaivour */
@media (max-width: 990px){
    #register{
        margin-left: 35%;
    }
}
@media (max-width: 762px){
    #register{
        margin-left: 28%;
    }
}
@media (max-width: 600px){
    #register{
        margin-left: 25%;
    }
}