*{padding:0;margin:0;box-sizing:border-box;border-radius:10px}:root{--mainColor:#181818;--mainColorLight:#ff97bd;--secondaryColor:#ff317c;--textColor:#eee}header{display:flex;align-items:center;justify-content:center;max-width:80%;height:50px;margin-bottom:5%;margin-top:5%;background-color:var(--mainColor)}header,nav a{color:var(--textColor)}nav a{font-size:large;padding:15;margin:0 1rem;text-decoration:none}nav a:hover{color:var(--secondaryColor)}header div,nav{display:flex;align-items:center}.hamburger{display:none;flex-direction:column;justify-content:space-around;width:30px;height:30px;background:none;border:none;cursor:pointer}.hamburger .line{width:100%;height:3px;background-color:var(--textColor);border-radius:5px}@media only screen and (max-width:1024px){header .responsive_nav{transform:translateY(100vh)}nav a{font-size:1.5rem}.hamburger{display:flex}nav{flex-direction:column;position:absolute;top:50px;left:0;width:100%;background-color:var(--mainColor);transform:translateY(-100%);transition:transform .3s ease-in-out}nav.responsive_nav{transform:translateY(0)}nav a{margin:1rem 0;font-size:1.2rem}}