:root{ --white: #f9f9f9; --black: #36383F; --gray: #85888C; } /* variables*/ /* Reset */ *{ box-sizing: border-box; } a{ text-decoration: none; } nav ul{ list-style: none; } /* Header */ .header{ background-color: var(--black); box-shadow: 1px 1px 5px 0px var(--gray); position: sticky; width: 100%; } /* Logo */ .logo{ display: inline-block; color: #8ae717; font-size: 60px; margin-left: 10px; padding-bottom: 10px; } /* Nav menu */ .nav{ width: 100%; height: 100%; background-color: var(black); overflow: hidden; font-family: verdaina; } .menu a{ display: block; padding: 15px; margin-right: 30px; text-align: center; color: powderblue; } .menu a:hover{ background-color: var(--gray); } .nav{ max-height: 0; transition: max-height .5s ease-out; } /* Menu Icon */ .hamb{ cursor: pointer; float: right; padding: 40px 20px; }/* Style label tag */ .hamb-line { background: var(--white); display: block; height: 2px; position: relative; width: 24px; } /* Style span tag */ .hamb-line::before, .hamb-line::after{ background: var(--white); content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } .hamb-line::before{ top: 5px; } .hamb-line::after{ top: -5px; } .side-menu { display: none; } /* Hide checkbox */ /* Toggle menu icon */ .side-menu:checked ~ nav{ max-height: 100%; background-color: var(--black); } .side-menu:checked ~ .hamb .hamb-line { background: transparent; } .side-menu:checked ~ .hamb .hamb-line::before { transform: rotate(-45deg); top:0; } .side-menu:checked ~ .hamb .hamb-line::after { transform: rotate(45deg); top:0; } /* Responsiveness */ @media (min-width: 1190px) { .nav{ max-height: none; top: 0; position: relative; float: right; width: fit-content; background-color: transparent; transition: 0.6s; } .menu li{ float: left; } .menu a:hover{ background-color: transparent; color: var(--gray); } .hamb{ display: none; } } body { background-color: #1c1e20; color: #cdcdcd; font-family: arial; } h2,h3 { margin: 30px; color: #ffc38a; } h2.terminal{ } .code { background-color: #4D4D4D } a.external { color: #8ae717 } footer { padding: 3px; border: skyblue; border-style: solid double none; text-align: center; }