@font-face {
    font-family: insolente;
    src: url(Insolente-Regular.otf);
}
@font-face {
    font-family: ft88;
    src: url(FT88-Regular.ttf);
}

:root {
    --accent: rgb(255, 133, 174);
    --text: rgb(255, 171, 199);
    --gray: #64284d;
}

html {
    font-family: 'Courier New', Courier, monospace;
    background-color: #010101;
    color: var(--text);
    font-family: ft88;
}

body {
    width: fit-content;
    max-width: 900px;
    padding: 15px;
    border: 2px solid var(--accent);
    margin: 20px auto 20px auto;
    display: grid;
    gap: 10px;
    grid-template-areas: 
    'header header'
    'main aside'
    'footer footer';
    grid-template-columns: 2fr 1fr;
}

h1 {
    color: var(--accent);
    text-align: center;
    font-family: insolente;
    font-size: 11rem;
    margin: 0;
    width: fit-content;
}

a { 
    color: rgb(120, 140, 255);
}

mark {
    background-color: var(--text);
}

header, main, aside, footer {
    border: 2px dashed var(--gray);
    padding: 10px;
    &:hover {
        border-color: var(--accent);
        transition: border-color 0.25s ease-in-out;
    }
}

header {
    grid-area: header;
    img {
        float: right;
        image-rendering: pixelated;
    }
}

main {
    grid-area: main;
}

aside {
    grid-area: aside;
}

footer {
    grid-area: footer;
    text-align: center;
}

/* responsive stuff... ough */

@media only screen and (max-width: 920px) {
    body {
        grid-template-areas: 
        'header header'
        'main aside'
        'footer footer';
        grid-template-columns: 2fr 1fr;
        max-width: 100%;
        margin: 10px
    }
}

@media only screen and (max-width: 845px) {
    h1 {
        font-size: 7rem;
        height: fit-content;
    }
    img:has(+ h1) {
        height: calc(7rem + 20px);
    }
}

@media only screen and (max-width: 655px) {
    h1 {
        font-size: 5rem;
    }
    img:has(+ h1) {
        height: calc(5rem + 20px);
    }
}

@media only screen and (max-width: 476px) {
    body {
        grid-template-areas: 
        'header'
        'main'
        'aside'
        'footer';
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 430px) {
    img:has(+ h1) {
        display: none;
    }
}

@media only screen and (max-width: 340px) {
    h1 {
        font-size: 3rem;
    }
}