*{
    margin: 0px;
    padding: 0px;
}

body{
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: dashed;
    background-color:beige;
}

form{
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    /* font-style: oblique; */
    /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: larger;
}

h1{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-style:inherit;
}

li:nth-child(5):hover{
    color: aqua;
}

nav{
    justify-content: center;
    align-items: center;
    background-color:rgb(29, 52, 128);
    color: white;
    position: sticky;
    top: 0px;
    margin: 0px;
    display: flexbox;
    text-decoration: none;
}

nav a:visited{
    color: inherit;
    text-decoration: none;
}

nav a:hover{
    text-decoration: none;
    color: aqua;
}

nav a{
    text-decoration: none;
    color: white;
}

nav a:active{
    color: aqua;
}

ul li{
    list-style: none;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif; 
}

ul{
    display: flex;
    padding: 20px;
    gap: 40px;
   
}

.navl{
    color: white;
    justify-content: left;
    padding-left: 63%;
}

.form{
    margin-top: 20px;
    background-color: rgb(240, 194, 44);
}
/* 
.reset{
    color: rgb(255, 255, 255);
    background-color: rgb(26, 66, 179); 
     width: 200px;  height: 50px; 
     border-radius: 8px;
     font-size: larger; 
     cursor: pointer; 
     font-weight: bolder;
     
} */

details{
    color: blue;
    border: 2px solid grey;
    transition: cubic-bezier(0.165, 0.84, 0.44, 1);
}

footer{
    background-color:rgb(29, 52, 128);
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding:20px 20px 20px;
}


footer ul{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    list-style-type: none;
    padding: 0px;
    margin: 0px;

}
footer a{
    color: inherit;
    text-decoration: none;
}

footer a:hover{
    color: aqua;
}

@media screen and (max-width: 768px) {
    ul {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .navl {
        padding-left: 0;
        text-align: center;
    }

    .form {
        width: 100%;
        padding: 10px;
    }

    footer {
        flex-direction: column;
        align-items: center;
    }

    footer ul {
        flex-direction: column;
        gap: 10px;
    }
}

/* Tablets (769px to 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    ul {
        gap: 30px;
    }

    .navl {
        padding-left: 50%;
    }

    .form {
        width: 80%;
        margin: 20px auto;
    }

    footer {
        padding: 20px 10px;
    }
}

/* Laptops and Desktops (above 1024px) */
@media screen and (min-width: 1025px) {
    ul {
        gap: 40px;

    .navl {
        padding-left: 63%;
    }

    .form {
        width: 60%;
        margin: 20px auto;
    }

    footer {
        padding: 20px 20px 20px;
    }
}

}