@font-face {
    font-family: "Public Sans";
    src: url("https://repo.alexbaldwin.dev/fonts/PublicSans-ExtraBold.ttf") format('truetype'), local("Public Sans");
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: "Public Sans";
    src: url("https://repo.alexbaldwin.dev/fonts/PublicSans-SemiBold.ttf") format('truetype'), local("Public Sans");
    font-weight: normal;
    font-display: swap;
}

:root {
    --text-color: #ffffff;
    --background-color: #000000;
    --highlight-color: #ff2266;
    --main-padding-size: 8mm;
    
    --font-size-s: 3mm;
    --font-size-m: 4mm;
    --font-size-l: 4.75mm;
    --font-size-xl: 6mm;
    --font-size-xxl: 10mm;
    --font-size-xxxl: 14mm;
    
    --screen-width-small-limit: 128mm;
    --screen-width-large-limit: 256mm;
}

@media screen and (min-width: 192mm) {
    :root {
        --main-padding-size: 16mm;
        
        --font-size-s: 3mm;
        --font-size-m: 5mm;
        --font-size-l: 6mm;
        --font-size-xl: 9mm;
        --font-size-xxl: 12mm;
        --font-size-xxxl: 24mm;
    }
}

@media screen and (min-width: 256mm) {
    :root {
        --main-padding-size: 24mm;
        
        --font-size-s: 3.5mm;
        --font-size-m: 6mm;
        --font-size-l: 8mm;
        --font-size-xl: 12mm;
        --font-size-xxl: 16mm;
        --font-size-xxxl: 32mm;
    }
}

html, body {
    overflow-x: hidden;
    font-family: "Public Sans", "Helvetica", "Helvetica Neue", "San Francisco", "Source Sans Pro", "Lato", sans-serif;
}

html, body, div, main, nav {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

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

main {
    padding: 0 var(--main-padding-size) var(--main-padding-size) var(--main-padding-size);
}

div {
    padding: var(--main-padding-size) var(--main-padding-size) var(--main-padding-size) var(--main-padding-size);
}

#root {
    padding: 0;
    margin: 0;
}

h1, h2, h3 {
    color: var(--text-color);
    margin: 0 0 0.5em 0;
}
h4, h5, h6 {
    color: var(--text-color);
    margin: 0.5em 0 0.5em 0;
}
h1 {
    
    font-size: var(--font-size-xxxl);
}
h2 {
    font-size: var(--font-size-xxl);
}
h3 {
    font-size: var(--font-size-xl);
}
h4 {
    font-size: var(--font-size-l);
}

a {
    text-decoration: none;
    position: relative;
}
a:hover {
    
}

a > span {
    transition-property: width, opacity;
    transition: 0.2s ease;
    background-color: var(--highlight-color);
    opacity: 0.5;
    height: 0.26em;
    width: 0;
    position: absolute;
    bottom: 0.1em;
    display: block;
}
a:hover > span {
    font-size: inherit;
    opacity: 1;
    height: 0.26em;
    width: 100%;
}

a, p {
    font-size: var(--font-size-m);
    color: var(--text-color);
    margin: 0 0 0.5em 0;
}

.small-spacer,
.spacer,
.separator,
.large-spacer {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.separator {
    height: 0;
}
.small-spacer {
    height: var(--font-size-m);
}
.spacer {
    height: var(--font-size-l);
}
.large-spacer {
    height: var(--font-size-xl);
}
.extra-large-spacer {
    height: var(--font-size-xxl);
}
.extra-extra-large-spacer {
    height: var(--font-size-xxxl);
}

.large-link {
    font-size: var(--font-size-l);
    display: inline-block;
    padding: 0.15em 0.0em 0.15em 0.0em;
    margin: -0.3em 0.0em 0.3em 0.0em;
}

.link-arrow {
    border: solid var(--text-color);
    transform: rotate(-45deg);
    border-width: 0 0.135em 0.135em 0;
    display: inline-block;
    padding: 0.15em;
    margin: 0.07em 0.5em 0.07em 0.00em;
}

#front-page {
    width:100vw;
    height:100vh;
    overflow-y: hidden;
    position: relative;
    box-sizing: border-box;
}

#front-page-background {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-image: url("./front-page-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    filter: grayscale(50%) contrast(50%) brightness(33%);
}

#front-page-credit-text {
    position: absolute;
    bottom: var(--main-padding-size);
    right: var(--main-padding-size);
    font-size: var(--font-size-s);
}

#front-page-technology-text {
    position: absolute;
    bottom: calc(var(--main-padding-size) + 2em);
    right: var(--main-padding-size);
    font-size: var(--font-size-s);
}

#front-page-react-logo {
    position: absolute;
    width: 3em;
    bottom: calc(var(--main-padding-size) + 1.625em);
    right: calc(var(--main-padding-size) + 16.5em);
    font-size: var(--font-size-s);
    animation-name: front-page-react-logo-keyframes;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes front-page-react-logo-keyframes {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#front-page-tagline {
    font-size: var(--font-size-xl);
    margin: -0.55em 0 -0.5em 0;
    display: block;
}

#front-page-software {
    position:relative;
}

#front-page-software > div {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index: -1;
    background-color: var(--background-color);
    background-image: url("./arcade-carpet.png");
    background-repeat: repeat;
    background-size: var(--background-size);
    filter: grayscale(50%) contrast(25%) brightness(25%);
}

#front-page-research {
    position:relative;
}

#front-page-research > div {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index: -1;
    background-color: var(--background-color);
    background-image: url("./research-background.png");
    background-repeat: repeat;
    background-position: center; 
    background-size: var(--background-size);
    filter: grayscale(50%) contrast(25%) brightness(25%);
}