header{
 background-color: #333;
 color: white;
 text-align: center;
 padding: 40px 0;
 margin-bottom: 20px;
}
header h1{
 font-size: 27.5px;
 margin: 0;
 font-weight: bold;
}
header p{
 font-size: 18px;
 margin-top: 10px;
 font-style: italic;
 color: pink;
}
nav {
 background-color: #333;
 padding: 15px ;
}
nav ul{
 list-style: none;
 margin: 0;
 padding: 0;
 text-align: center;
}
nav ul li{
 display: inline-block;
 margin-right: 20px;
}
nav ul li a {
 color: white;
 text-decoration: none;
 font-size: 20px;
 padding: 10px 15px;
 border-radius: 5px;
}
nav ul li a:hover{
 background-color: rgb(66, 66, 124);
 color: black;
}
main{
width: 90%;
margin: auto;
padding: 20px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
} 
main h1 {
font-size: 24px;
text-align: center;
color: black;
}
main p {
 text-align: center;
 font-size: 16px;
 color: blueviolet;
}
form {
 margin-top: 20px;
}
form label{
 display: block;
 font-weight: bold;
 margin-bottom: 5px;
 color: #333;
}
form input ,form textarea, form button{
 width: 100%;
 padding: 10px;
 margin-bottom: 12px;
 border: 1px solid black;
 border-radius: 4px;
 font-size: 14px;
 font-family: Arial, Helvetica, sans-serif;
}
form button{
 background-color: aqua;
 color: black;
 font-weight: bold;
 border: none;
 border-radius: 14px;
 cursor: pointer;
}
form button:hover{
 background-color: skyblue;
}
footer{
 text-align: center;
 background-color: beige;
 color: black;
 padding: 20px;
 margin-top: 30px;
}
footer h4{
 margin-bottom: 10px;
}
footer ul{
 list-style: none;
 padding: 0;
}
footer ul li{
 margin: 5px 0;
}
footer ul li a{
 color: brown;
 text-decoration: none;
}
footer ul li a:hover {
 text-decoration: underline;
}
@media(max-width:1024){
 main{
     width: 95%;
 }
 main h1{
     font-size: 22px;
 }
 form input, form textarea, form button{
     font-size: 14px;
 }
}
@media(max-width: 768px){
    header h1 {
        font-size: 2em;
        }
        
        header p {
        font-size: 1.1em;
        }
        
        nav ul li {
        display: block;
        margin-bottom: 10px;
        }
    main{
        padding: 15px;
    }
    main h1{
        font-size: 20px;
    }
    form input, form textarea, form button{
        font-size: 13px;
        padding: 8px;
    }
    footer h4{
        font-size: 16px;
    }
}
@media(max-width: 480){
    header h1 {
        font-size: 2em;
        }
        
        header p {
        font-size: 1.1em;
        }
        
        nav ul li {
        display: block;
        margin-bottom: 10px;
        }
    main{
        padding: 10px;
    }
    main h1{
        font-size: 18px;
    }
    form label{
        font-size: 14px;
    }
    form input, form textarea, form button {
        font-size: 12px;
        padding: 6px;
    }
    footer h4{
        font-size: 14px;
    }
}