.container{margin-left:65px}nav{position:fixed;left:0;z-index:100;width:65px;height:100vh;background:var(--navbar);display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:20vh 0;transition:all .5s;text-align:center}.nav-item{width:100%;height:100%;align-items:end}nav button{font:900 .7rem/1 Roboto,sans-serif;color:var(--navbar-svg);text-decoration:none;background:0 0;border-style:none;border-radius:.5rem;padding:8px}button:hover{background-color:var(--hover);scale:1.04;transition:all .5s}button:active,button:focus{background-color:var(--hover);scale:1.04;transition:all .5s}@media screen and (max-height:320px){nav button{font-size:.5rem!important}nav{padding:30vh 0}}@media screen and (min-width:501px){nav{top:0}}@media screen and (max-width:500px){.container{margin-left:0;margin-bottom:60px}nav{background:var(--navbar-bottom);right:0;bottom:0;flex-direction:row;align-items:baseline;width:100vw;height:60px;padding:0 10vw;padding-bottom:5px}nav button{font-size:.6rem;transition:all .5s}}@media screen and (min-width:500px) and (max-width:1024px){nav button{font-size:.6rem;transition:all .5s}}@media screen and (min-width:1921px){nav{width:100px}nav button{font-size:1rem;transition:all .5s}.container{margin-left:100px}}@media screen and (min-height:1000px){nav{padding:25vh 0}}h1{text-align:center}