nav { background-color: #87CBB9; border-radius: 4px; border: 1px solid black; padding: 1.5rem; margin-bottom: 15px; } body { background-color: #bcc5c3; } .nav-button { background-color: #B9EDDD; border-radius: 5px; border: 1px solid black; padding: 0.5rem 1.2rem; margin-right: 0.5rem; } .nav-button:hover { background-color: aqua; } .rounded_border { border-radius: 5px; } .bordered { border: 1px solid black; } .bordered_left { border-left: 1px solid black; } .bordered_right { border-right: 1px solid black; } .content_area { display: table; width: 100%; } .menu_button { width: 100%; height: 2rem; margin-bottom: 0.5rem; } .single_width { width: 15rem; } .double_width { width: 30rem; } .wrapper { width: 100%; background-color: #577D86; padding: 5px; } .wrapper:not(:last-child){ margin-bottom: 1rem; } .log_table { display: table; width: 100%; } .table_header { display: table-cell; text-align: center; background-color: #bcc5c3; padding: 0.2rem; } .table_header:not(:last-child){ border-right: 1px solid black; } .center_text { text-align: center; } .table_row { width: 100%; display: table-row; } .table_row:not(:last-child){ border-bottom: 1px solid black; } .table_cell { display: table-cell; padding: 0.2rem; } .table_cell:not(:last-child){ border-right: 1px solid black; } .menu_bar { display: flexbox; visibility: visible; background-color: #569DAA; padding: 1rem; margin-right: 1rem; } .menu_bar.double_width:not(:has(.log_table)){ display:none; visibility: hidden; } .border_rounded_left { border-radius: 5px 0px 0px 5px; } .border_rounded_right { border-radius: 0px 5px 5px 0px; } .cell { display: table-cell; } .content { background-color: #B9EDDD; padding: 1rem; } .content_area::after { clear: both; }