*{ margin: 0; padding: 0; box-sizing: border-box; } main{ padding-top: 90px; padding-left: 6px; } .no-dec{ text-decoration: none; } .no-lst-style{ list-style: none; } .centered{ text-align: center; } .padded-2px{ padding: 2px; } .header{ position: fixed; top: 0; width: 100%; } .home-button{ display: inline-block; font-size: 60px; padding: 7px 10px 6px; } .nav{ width: 100%; height: 100%; overflow: hidden; max-height: 0; } .nav-menu{ display: none; } .menu a{ display: block; padding: 32px 30px; } .hmb{ cursor: pointer; float: right; background-color: transparent; padding: 40px 20px; } .hmb-line{ display: block; height: 2px; position: relative; width: 24px; } .hmb-line::before, .hmb-line::after{ content: ''; display: block; height: 100%; position: absolute; transition: all .1s ease-out; width: 100%; } .hmb-line::before{ top: 5px; } .hmb-line::after{ top: -5px; } .nav-menu:checked ~ nav{ max-height: 100%; } .nav-menu:checked ~ .hmb .hmb-line{ background: transparent; } .nav-menu:checked ~ .hmb .hmb-line::before{ transform: rotate(-45deg); top:0; } .nav-menu:checked ~ .hmb .hmb-line::after{ transform: rotate(45deg); top:0; } .main-table{ display: table; width: 100%; box-sizing: content-box; } .main-table > div{ display: table-row; background-color: transparent; box-sizing: inherit; } .main-table > div > div{ display: table-cell; border-style: solid; border-width: 1px; vertical-align: middle; box-sizing: inherit; } .main-table > div > div > div{ margin: 3px 0; padding: 2px; box-sizing: inherit; } .item-table{ display: table; width: 100%; box-sizing: content-box; background-color: transparent; } .item-table > div{ display: table-row; background-color: transparent; box-sizing: inherit; } .item-table-full, .item-table-240{ border-style: solid; border-width: 1px; background-color: transparent; vertical-align: top; box-sizing: inherit; } .item-table-full{ display: table-cell; width: 100%; } .item-table-240{ display: none; } @media (min-width: 320px){ .main-table > div > div > div{ margin: 5px; } .item-table-240{ display: table-cell; width: 240px; } } @media (min-width: 480px){ .nav{ max-height: none; top: 0; position: relative; float: right; width: fit-content; } .menu li{ float: left; } .menu a:hover{ background-color: transparent; } .hmb{ display: none; } }