@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');

body,html{
    min-height : 100%;
    margin : 0%;
    padding : 0%;
    background-image: linear-gradient(115deg , rgba(58, 58, 158,0.8) , rgba(136 , 136 , 206,0.7)), url("assets/images/1.jpg") ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment : fixed;
}
#bg{
    display : flex;
    flex-direction: column;
}
#title{
    text-align : center;
    align-items: center;
    justify-content: center;
    color : white;
    font-family: "Poppins";
    margin-bottom : 0px;
}
p{
    text-align : center;
    margin-top : 0px;
    color : white;
    font-weight : 100;
    font-family :  sans-serif;
    font-size : 17.5px;
}
#survey-form{
    display: flex;
    flex-direction: column;
    margin-left : 2rem;
    margin-right : 2rem;
    background-color: rgba(27,27,50,0.8);
    color : white;
    border-radius: 5px;
    font-size: 1.152rem;
    font-family: "Poppins";
    width :auto;
}

.checkboxhead{
    display: flex;
    flex-direction: row;
}

.spacing{
    line-height: 30px;
}
label , .pos{
    margin-left : 8%;
    margin-right : 8%;
}

.pos{
    border-radius: 5px;
    height : 2.25rem;
}

label[for="name"]{
    margin-top : 50px;
}


label[for="options"]{
    font-size : 20px;
}

input[type="radio"]{
    min-height : 1.25rem;
    min-width : 1.25rem;
}

#comment,#submit{
    border-radius : 0%;
    margin-bottom : 1rem;
}

#comment{
    resize: none;
    width: auto;
    height : 10rem;
    background-color: rgb(213, 210, 211);
}

#submit{
    background-image: linear-gradient(180deg,rgba(0,255,0,0.8) , rgba(0,125,0,0.7));
    color : white;
}

input[type="checkbox"]{
    height : 1.252rem;
    width : 1.25rem;
}

@media(min-width : 780px){
    #bg{
        max-width : 780px;
        margin : auto;
    }
}

/*Code written to pass the tests */
#description , #name-label , #email-label , #number-label{
    color : white;
}