@import url("./reset.css");
@import url("./colors.css");
@import url("../font/eurostile/font.css");
@import url("../font/source-serif/font.css");
@import url("../font/vcr/font.css");

body {
    background-color: #0a0a0a;
    color:#000;

    display:flex;
    justify-content: center;
    font-size: 12px;
    padding:12px;
}

.content {
    background-color: #ffffff08;

    display:flex;
    flex-direction: column;

    width:640px;
    max-width: 100%;

    padding:12px;
}

h1 {
    color: var(--bandito);
    font-family: "Eurostile Bold";
    text-align: center;
    font-size: 3rem;
    text-transform: uppercase;
    padding:12px;
}

h2 {
    font-family: "VCR";
    background-color: var(--bandito);
    font-size: 1.5rem;
    text-transform: uppercase;
    padding:4px 12px;
}

.links {
    width:100%;
    display:flex;
    flex-direction: column;
    padding:6px;
    gap:6px;

    border: solid 2px var(--bandito);
}

.link {
    background-color: #0a0a0a;
    color:#ffffff99;
    padding:12px 12px 12px 12px;
    width:100%;
    font-size: 1.2rem;
    font-family: "Source Serif";
    letter-spacing: 0px;
    border-left: solid 2px #dedede;
    transition: border-left 0.3s, padding 0.5s, color 0.3s, letter-spacing 0.5s;
}

.link:hover {
    color:#fff;
    letter-spacing: 1px;
    border-left: solid 12px #dedede;
    padding:12px 12px 12px 18px;
}

iframe {
    aspect-ratio: 16/9;
}