@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Serif&family=Oswald:wght@200;400&family=Raleway&family=Roboto&family=Shippori+Antique&display=swap');

:root{
   font-size: 18px;
   --primary-bg: rgb(17, 17, 17);
   --secondary-bg: black;
   --color: white;
   --header-footer-bg: brown;
   font-family: 'Noto Serif', sans-serif;
}

*{
   margin: 0;
   padding: 0;
}

body{
   background-color: var(--primary-bg);
   color: var(--color);
}

nav{
   width:5rem;
   height: 100vh;
   background-color: var(--secondary-bg);
   transition: width 90ms ease-out;
   position: fixed;
   box-shadow: 0 0 0.5rem rgb(66, 65, 65);
}

nav:hover{
   width: 12rem;
}

nav ul{
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
}

.nav-list-item{
   list-style-type: none;
   padding: 0.5rem;
}

.nav-list-item:hover{
   background-color: var(--primary-bg);
}

.nav-list-item a{
   text-decoration: none;
   color: white;
   justify-content: space-evenly;
}

.nav-list-item a:hover{
   color: wheat;
}

nav:hover .nav-list-item a{
   justify-content: unset;
   display: grid;
   grid-template-columns: 5rem 5rem;
}

nav:hover .logo a{
   grid-template-columns: 8rem 4rem;
   position: relative;
}

.fa{
   height: 2rem;
   transition: transform 500ms ease-in-out;
}

nav:hover .fa{
   transform: rotate(-270deg);
}

nav .logo p{
   text-transform: uppercase;
   font-size: 2rem;
}

.link-text{
   display: none;
   transition: display 500ms ease-in-out 150ms;
}

nav:hover .link-text{
   display: block;
}

:where(header, main){
   padding: 0.5em 1em 0.5em 6rem;
}

header{
   background-color: var(--header-footer-bg);
   box-shadow: 0 0 0.5rem rgb(66, 65, 65);
}

h1{
   font-size: 4vw;
   font-size: clamp(1rem, 4vw, 4vw);
   text-align: center;
   color: yellowgreen;
   font-family: 'Oswald', sans-serif;
}

main p{
   margin-bottom: 1rem;
   text-align: justify;
}

footer{
   padding: 1em 1em 1em 6em;
   background-color: var(--header-footer-bg);
   text-align: center;
   text-transform: capitalize;
   box-shadow: 0 0 0.5rem rgb(66, 65, 65);
}

footer{
   position: fixed;
   bottom: 0;
   width: 100%;
}