body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 90px;
    /* background-color: #506566; */
    /* background-color: blue;    */
  
}

img{
    position: absolute;
    top: 5px;
    right: 20px;
}
.navigations {
    text-align: center;
}
.navigations button{
    background-color: rgb(37, 75, 110);
}

.navigations li, .navigations a{
   display: inline-block;
/*    width: 130px;
   height: 20px; */
   color: whitesmoke;
   text-align: left;
   /* background-color: #555555;  */
}


p{
    font-size: 1.1em;
    text-align: center;
}

/*   #quiz>div>blockquote { 
    padding-top: 0em; padding-bottom: 0em; padding-left: 0em; padding-right: 0em;
    margin-top: 0; margin-bottom: 0em; 
} 
#quiz>div{
    display: inline;
} */

h1, #quiz>h2, h3{
    text-align: center;
     color: darkslategrey; 
    /* color: #CDB09E; */

}

#quiz>h2{
    margin-top: 5px;
}

h2{
    color: #555555;
    text-align: center;
}

h3{
    margin: 5px;
    text-align: right;
    font-style: italic;
}

#quiz{
    border: 2px solid grey;
    border-radius: 25px;
    padding: 15px 25px;
    background-color: #f5f5f5; 
    /* background-color: #23354B; */
    width: 100%;
    margin: 50px auto 0 auto;
     color: #555555; 
    /* color: #CDB09E; */
   
}

input{
    margin: 10px;
}

span{
    font-size: 1.1em;
}

button, input[type="submit"]{
    margin: 15px 0 10px 0;
    border-radius: 10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.1em;
    padding: 5px 10px;
    background-color: #4f6f6f;
    color: white;
}

input[type="submit"]{
    margin: 10px auto;
    display: block;
}

button:hover, input[type="submit"]:hover{
    background-color: #738484;
}
a{
    text-decoration: none;
    color: darkslategrey;
}

form{
    width: 75%;
    margin: 0 auto;
    text-align: center;
}

input[type="text"]{
    display: block;
    width: 80%;
    margin: 5px auto;
    background-color: #f5f5f5;
}

select{
    width: 40%;
    margin: 0 auto;
    background-color: #e5e5e5
}
a:hover{
    color: #738484;
}
#modal{
    display: none; 
    position: fixed; 
    bottom:80px;
    left: 30%; 
    /* background-color: rgb(182, 29, 29); */
     /* background-color: #506566;  */
    background-color: #23354B;
    width: 500px;
    height: 490px;
    animation-name: modalopen;
    animation-duration: 1s;
    /* position: relative; */
}

/* @keyframes modalopen{
    from{ opacity: 0}
    to{ opacity: 1}
} */

#modalheader{
    /* background-color: darkblue; */
    background-color: #506566;
    width: 500px;
    height: 100px;

}
#modalsubmitBtn{
background-color: gray;
color: whitesmoke;
border-radius: 5px;
margin: 15px 0 10px 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1em;
/* padding: 3px 10px; */
padding: 3px 80px;
position: absolute;
bottom: 5px;
/* right: 15px; */
right: 180px;
}
#modalsubmitBtn:hover,#modalsubmitBtn:focus{
background-color: darkblue;
color: aliceblue;
cursor: pointer;
}
.closemodal{
    color: black;
    float: right;
    font-size: 30px;
}
.closemodal:hover, .closemodal:focus{
     color: #555555;
     text-decoration: none;
     cursor: pointer;
}
#modalheader>img{
    width: 80px;
    height: 80px;
    position: absolute;
    left: 10px;
    top: 10px;
}
input[type="email"]{
    margin: 3px 190px 3px 35px;
    width: 222px;
} 

#provinces{
    margin: 3px 190px 3px 35px;
    width: 225px;
} 

#modalbody>h2{
    color: #CDB09E;
}

/* #comment>input[type="text"]{
    width: 150px;
    height: 70px;
    margin: 5px 20px 5px 35px;
} */

#comment{
    border-radius: 5px;
    width: 150px;
    height: 70px;
    margin: 5px 20px 5px 35px;
}

 #summary, #date{
     display: none; 
} 
 .alerts{
     color: rgb(182, 29, 29);
     animation-name: modalopen;
     animation-duration: 8s;
 }
 .modal-shadow{
     display:none; 
     position:fixed;
     z-index:1;
     left:0;
     top:0;
     height: 100%;
     width: 100%;
     overflow:auto;
     background-color: rgba(0,0,0,0.5);
     animation-name: modalopen;
     animation-duration: 1s; 
 }

 @keyframes modalopen{
     from{ opacity: 0}
     to{ opacity: 1}
 } 
 #name,#surname,#province,#email,#comment,#qualification{
    border-radius: 5px;
 }