/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

        body {
            font-family: Times New Roman, serif;
            font-size: 12pt;
            color: #000000;
            padding: 0;
            background-color: #c4c4c4;
            background-image:
                radial-gradient(black 10%, transparent 11%),
                radial-gradient(black 10%, transparent 11%);
            background-size: 9px 9px;
            background-position: 0 0, 12.5px 12.5px;
        }
        .header-container {
            margin: 0 auto;
            width: 700px;
        }
        header {
            border: 3px ridge black;
            background-color: white;
            padding: 0;
            text-align: center;
            margin: 0;
        }
        header img {
            width: 100%;
            height: auto;
        }
        .container {
            display: flex;
            margin: 10px auto;
            width: 700px;
        }
        aside {
            width: 20%;
            background-color: white;
            padding: 10px;
            margin-right: 10px;
            border: 2px groove black;
        }
        aside img {
            width: 100%;
            border: 1px inset black;
            height: auto;
        }
        main {
            flex: 1;
            padding: 15px;
            background-color: white;
            border: 2px groove black;
        }     
        main p {
            margin-top: 0;
        }
        a {
            color: #000000;
            text-decoration: underline;
        }
        a:hover {
            text-decoration: underline;
        }
        .button {
            display: block;
            width: 100%;
            padding: 3px;
            margin-bottom: 5px;
            border: 1.5px outset black;
            background-color: #ffffff;
            color: #000000;
            text-decoration: none;
            font-size: 12pt;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
        }
        .button:active {
            border-style: inset;
        }     
        .left-float {
            float: left;
            margin: 0 10px 0px 0;
        }     
        .right-float {
            float: right;
            margin: 0 0 0 10px;
        }     
        .row {
            display: flex;
            margin-top: 0px;
            margin-bottom: 10px;
            justify-content: space-between;
            align-items: stretch;
            width: 100%;
        }
        .button-block {
            display: flex;
            justify-content: center;
            align-items: stretch;
            padding: 0 2px;
            flex: 1;
        }
        .button-block.first,
        .button-block.seventh {
            flex: 0 0 2%;
        }
        .button-block.default {
            flex: 1;
        }
        .button-block button {
            width: 100%;
            height: 100%;
            padding: 2px;
            margin: 0;
            border: 1.5px outset black;
            background-color: #ffffff;
            color: #000000;
            text-decoration: none;
            font-family: Times New Roman, serif;
            font-size: 10pt;
            letter-spacing: -0.5pt;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .button-block button:active {
            border-style: inset;
        }
        .square-button-container {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            width: 100%;
        }
        .square-button {
            width: 100%;
            height: calc(50% - 2px);
            padding: 3px;
            margin: 0;
            border: 1.5px outset black;
            background-color: #ffffff;
            color: #000000;
            text-decoration: none;
            font-family: Times New Roman, serif;
            font-size: 9pt;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .square-button + .square-button {
            margin-top: 4px;
        }
        .square-button:active {
            border-style: inset;
        }
        .retro-scrollbar {
            padding-right: 2px; 
        }       
        .retro-scrollbar::-webkit-scrollbar {
            width: 16px; 
            background-color: lightgray; 
        }
        .retro-scrollbar::-webkit-scrollbar-thumb {
            background-color: lightgray; 
            border: 3px outset black; 
            border-radius: 0; 
        }
        .retro-scrollbar::-webkit-scrollbar-track {
            background-color: #DCDCDC; 
        }
        .retro-scrollbar::-webkit-scrollbar-thumb:hover {
            background-color: #696969; 
        }
        .retro-scrollbar::-webkit-scrollbar-corner {
            background-color: #c0c0c0; 
        }