*{
margin: 0px;
padding: 0px;
font-family: 'Courier New', Courier, monospace;}
header {
background-color: #7fffd4;
display: flex;
align-items: center;
height: 80px;
}
nav{
flex: 1;
}
nav ul{
display: flex;
justify-content:space-evenly ;
}
nav ul li {
list-style: none;
}
nav a{
text-decoration: none;
color: #000000;
}
nav a:hover{
color: red;
text-shadow: 1px 1px 10px red;
}
h1{
padding: 10px 30px;
font-size: xx-large;
font-family: "Montserrat", sans-serif;
}
main{
background-color: #faebd7;
min-height: calc(100vh - 80px - 40px);
padding: 30px;
}
footer{
background-color: #663399;
height: 40px;
text-align: center;
color: #ffffff;
}
main section{
margin: 20px 0px;
}
a.active_page{
color: white;
text-shadow: 1px 1px 1px black;
}
form{
width: 500px;
border: 3px solid darkgray;
padding: 15px ;
border-radius: 20px;
margin: 50px auto;
box-shadow: 2px 2px 15px gray;
}
#submit_button{
display: block;
width: 100%;
border: none;
font-size: 25px;
letter-spacing: 5px;
background-color: tomato;
color: white;
font-weight: bold;
border-radius: 8px;
margin-top: 15px;
cursor: pointer;
transition: 0.8s;
}
#submit_button:hover{
background-color: darkred;
}
form h3{
text-align: center;
}
fieldset{
margin: 10px 0px;
padding: 10px;
}
.input_group{
margin: 8px 0px;
display: flex;
align-items: center;
gap: 10px;
}
form input, form select, form textarea{
font-size: 20px;
flex: 1;
padding: 4px;
outline: none;
}
form textarea{
width: 100%;
resize: vertical;
field-sizing: content;
}
.img_on_left, .img_on_right{
border: 3px solid red;
box-shadow: 2px 2px 15px black;
border-radius: 30px;
padding: 20px;
background-color: azure;
min-height: auto;
height: auto;
}
.img_on_left h3, .img_on_right h3{
text-align: center;
font-family: monospace;
font-size: 20px;
margin-bottom: 20px;
}
.img_on_left img{
float: left;
display: block;
border-radius: 30px;
margin: 0 20px 20px 0;
}
.img_on_right img{
float: right;
display: block;
border-radius: 30px;
margin: 0 0 20px 20px;
}
.img_on_left p, .img_on_right p{
text-align: justify;
}
.img_on_left ul, .img_on_right ul{
list-style-position: inside;
}
@media screen {max-width: 767px;
h1{font-size: 12;
}
img{
width: 100px;
}
}