@import url('/static/css/fonts.css');
@import url('/static/css/colors.css');

body {
    font-family: 'European Teletext';
    width: 880px;
    margin-left: 20px;
    margin-top: 2%;
    background-color: var(--turquoise);
    display: grid;
    grid-template-columns: 88px 552px 220px;
    column-gap: 10px;
}

.summary {
    grid-row: 2;
    padding: 5px;
    margin-top: -5px;
    background-color: var(--mauve);
}

.right {
    grid-column: 3;
    grid-row: 2;
}

.hanrose_banner {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    font-family: 'Spirit';
    font-size: 80px;
    grid-column: 2;
    grid-row: 1;
    height: 90px;
    justify-content: right;
    text-align: right;
}

.hanrose_banner > img {
    width: 300px;
    height: 90px;
    image-rendering: pixelated;
}

.buttons {
    grid-row: 2;
    width: 88px;
    display: flex;
    flex-direction: column;
}

.menu {
    grid-row: 2;
    grid-column: 3;
    position: relative;
    width: 200px;
    height: max-content;
}

.menu > ul {
    list-style: none;
}

.menu a {
    color: black;
    font-weight: 500;
    font-family: sixtyfour, monospace; 
}

.menu a:hover {
    /* color: var(--chalky-green); */
    background-color: var(--mauve);
    letter-spacing: 2px;
}

.hitcounter {
    -webkit-font-smoothing: antialiased;
    display: flex;
    justify-content: right;
    font-size: small;
}