/* licensed under the Open Font License: https://turfwar.ink/fonts/OFL_Bitcount.txt */
@font-face {
    font-family: 'Bitcount Single';
    src: url(../_fonts/BitcountSingle-Regular.ttf) format('truetype');
}

/* licensed under the Open Font License: https://turfwar.ink/fonts/OFL_Monaspace.txt */
@font-face {
    font-family: 'Monaspace Argon';
    src: url(../_fonts/Monaspace-Argon-Var.woff2) format('woff2'),
         url(../_fonts/Monaspace-Argon-Var.woff) format('woff');
}
@font-face {
    font-family: 'Monaspace Xenon';
    src: url(../_fonts/Monaspace-Xenon-Var.woff2) format('woff2'),
         url(../_fonts/Monaspace-Xenon-Var.woff) format('woff');
}

body {
    margin: 0;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 300px;
    grid-template-columns: auto 350px;
    grid-template-areas: "title socials"
                         "links socials";
    gap: 1px;
    overflow: hidden;
}

#workinprogress {
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    color: #ffffff20;
    font-family: 'Monaspace Argon', sans-serif;
    pointer-events: none;
    z-index: 1;
}

/* title */

#titlediv {
    grid-area: title;
    background-color: black;
    display: grid;
    place-items: center;
}

h1 {
    margin: 0;
    color: white;
    font-family: 'Bitcount Single', monospace;
    font-weight: normal;
    font-size: 5em;
    user-select: none;
    cursor: pointer;
    z-index: 1;
}

#canvas1 {
    display: inline;
    position: absolute;
}

#canvas2 {
    display: none;
    position: absolute;
}

#canvasphys {
    position: absolute;
}

/* links */

#linksdiv {
    grid-area: links;
    background-image: url("../_images/crystal-bg.png");;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 2fr 1fr 1fr;
}

p.links {
    margin: 0;
    padding: auto;
    background-color: #000000f0;
    font-family: 'Monaspace Xenon', serif;
    font-size: 1.2em;
    text-align: center;
    line-height: 150px;
    user-select: none;
    transition: background-color 1s;
}

p.links:hover {
    background-color: #000000c0;
    transition: background-color 0.1s;
}

a.links {
    color: white;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.3s;
}

a.links:hover {
    text-decoration-color: white;
}

a.links.broken {
    text-decoration: none;
    color: grey;
}

/* socials */

#socialsdiv {
    grid-area: socials;
    background-color: black;
}

p.socials {
    margin: 0;
    text-align: right;
    color: white;
    font-family: 'Monaspace Argon', sans-serif;
    z-index: 1;
}

p.socials::selection {
    background-color: white;
    color: black;
}

a.socials {
    text-decoration: none;
}

a.socials:hover {
    text-decoration: underline;
}

#discordcopy {
    color: #202020;
}

#canvasbubble {
    position: absolute;
    pointer-events: none;
}