/* for body text except input text */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&family=Playfair+Display:wght@500&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@1&display=swap'); */

/* for input text */
@import url('https://fonts.googleapis.com/css2?family=Domine&display=swap');


* {
    margin: 0;
    padding: 0;
}

body {
    /* background-image: url('images/wallpaperflare.com_wallpaper\ \(43\).jpg'); */
    background-image: linear-gradient(45deg,red,blue);
    height: 100vh;
    width: 100vw;
    background-size: cover;
    background-position: fixed;
    font-family: 'Oswald', sans-serif, 'Playfair Display';

}

.registeration-form {
    display: inline-block;
    height: 90vh;
    width: 60vw;
    padding: 0.2% 2% 2%;
    border: 2px solid black;
    background-color: blanchedalmond;
    
    /* flex-wrap: wrap; */
    overflow-y: scroll;
    /* scroll-behavior: smooth; */

}

.input-field{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    
}

.box {
    /* padding: 1% 3% 1% 0; */
    margin: -0.5% 3% 1% 0;

}

.container {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 2% 0;
    
}

.input-field label {
    padding: 2px 0;
    margin: 2px 0;
}

input {
    margin: 2.5% 2% 0 0;
    height: 2rem;
    width: 12rem;
    padding-left: 3%;
    border: 2px solid black;
    font-family: 'Domine', serif;
}
.gender{
    margin: 2.5% 2% 0 0;
height: 2rem;
width: 13rem;
padding-left: 1%;
font-family: 'Domine', serif;
}
.files input {
    border: none;

}

span {
    padding: 2% 0;
    font-weight: bolder;

}

/* .personal-details,
.other-details,
.files {
    margin-top: 3%;
    
} */

.button {
    display: flex;
    justify-content: center;
}

.btn {
    margin-top: 1%;
    padding: 0.50rem 6rem;

    border: 2px solid black;
    background-image: linear-gradient(to bottom right, rgb(218, 218, 18), rgb(60, 214, 60), rgb(46, 215, 218));
    border-radius: 7px;
    font-weight: 700;

    /* border: 7px solid whitesmoke; */
}



.main-head {
    font-size: 2em;
    font-weight: bolder;
    text-align: center;
    background-image: linear-gradient(23deg, red, blue, red);
    color: white;
}

.drop-down {
margin: 2% 0 0;
padding-left: 3%;
height: 2.2rem;
width: 12rem;
border: 2px solid black;
background-color: white;
font-family: 'Domine', serif;

}


.gender label {
    width: fit-content;
    display: inline-flex;
    /* justify-content: flex-start; */
    margin-right: 1%;
    cursor: pointer;
}
.gender input{
    width: 50%;
    margin: -10.5% -1% 0 5px;
}
.information input{
    border:none;
}


.field1 ol, .field2 ol{
    margin-left: 3.5%;

    margin-bottom: 4px;
}
.field2 ol li {
    margin-top: -2%;
}
.field2 ol li input{
    height: 1.5rem;
width: 12rem;
}
.field4 label input{
    margin-left: 3.5%;
    height: 1.5rem;
    width: 3rem;
    margin: 0;
}
.field4, .field3{
    margin-left: 2%;
}
@media screen and (max-width:640px){
    .field4 label{
            display: block;
            
            /* margin-left: -0.5%; */
    }
    
    .btn{
        padding-left: 4rem;
        padding-right: 4rem;
    }
}