:root {
    --color: black;
}

@font-face {
    font-family: "Roboto Mono";
    font-weight: 400;
    src: local("Roboto Mono Regular"),
         local("RobotoMono-Regular"),
         url("../fonts/RobotoMono-Regular.woff2"),
         url("../fonts/RobotoMono-Regular.ttf");
}

@font-face {
    font-family: "Roboto Mono";
    font-weight: 700;
    src: local("Roboto Mono Bold"),
         local("RobotoMono-Bold"),
         url("../fonts/RobotoMono-Bold.woff2"),
         url("../fonts/RobotoMono-Bold.ttf");
}

/* Cornerstones */

* {
    margin: auto;
    font-family: "Roboto Mono","Arial",sans-serif;
    color: var(--color);
}

html,
body,
main {
    width: 100%;
    height: 100%;
}

/* Components */

.logo {
    --size: 3vw;
    --skew: calc(var(--size) / 1.7);

    width: 0; 
    height: 0; 
    border-left: var(--skew) solid transparent;
    border-right: var(--skew) solid transparent;
    border-top: var(--size) solid var(--color);
}

.logo::after {
    content: "";
    width: 0; 
    height: 0; 
    border-left: var(--skew) solid transparent;
    border-right: var(--skew) solid transparent;
    border-top: var(--size) solid var(--color);
    opacity: .3;
}

/* Layout */

main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

main > div {
    width: 80%;
}