body {
    height: 95vh;
    margin: 2vh 0;
    background-color: #050505;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background-color: #121212;
    color: #486b7f;
    display: grid;

    overflow-Y: scroll;
    overflow-x: hidden;

    max-width: 680px;
    height: 75vh;
    font-size: 12px;
    margin: 50px 0;
    padding: 20px 0;
    
    grid-template-columns: 90vw;
    grid-template-rows: 1fr 4fr 1fr;
    justify-items: center;
    justify-content: center;

}

header, main, footer {
    display: grid;
    justify-items: center;
    text-align: center;
    padding: 10px;
}

header {
    color: #d1bfb0;
    font-size: 24px;
    font-weight: bolder;
    min-width: fit-content;
    padding-top: 40px;
}

main {
    padding-top: 60px;
}

footer {
    color: #789c96;
    align-items: end;
    font-weight: bolder;
}

a:link { color: #bb474f; }
a:visited { color: #bb474f; }
a:hover { color:#789c96; }

.gif-hr {
    width: 360px;
    height: 225px;
}

@media only screen and (-moz-min-device-pixel-ratio: 2),
        only screen and (-o-min-device-pixel-ratio: 2/1),
        only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (min-device-pixel-ratio: 2) {

    body { height: 80vh; }
    .container { max-height: 75vh; margin: 10px 0; }
    .gif-hr { width: 255px; height: 150px; }
    header { font-size: 24px; padding-top: 10px;}
    main { padding-top: 20px; }
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #121212; }
::-webkit-scrollbar-thumb { background: #789c96; }
::-webkit-scrollbar-thumb:hover { background: #486b7f; }