/* nothing here is related to the stages :-) */

@font-face {
font-family: "IBM Plex Mono", monospace;
font-weight: 400;
font-style: normal;
src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}

@font-face {
font-family: "IBM Plex Mono", monospace;
font-weight: 400;
font-style: italic;
src: url('/fonts/IBMPlexMono-Italic.woff2') format('woff2');
}

@font-face {
font-family: "IBM Plex Mono", monospace;
font-weight: 700;
font-style: normal;
src: url('/fonts/IBMPlexMono-Bold.woff2') format('woff2');
}

@font-face {
font-family: "IBM Plex Mono", monospace;
font-weight: 700;
font-style: italic;
src: url('/fonts/IBMPlexMono-BoldItalic.woff2') format('woff2');
}

:root {
    --bg: #111314;
    --text: #ebd3a2;
    --link: #d96629;
}

/* SANZO WADA, DICTIONARY OF COLOR COMBINATIONS VOL. 1, COMBINATION #190 */
/* i decided to use it because i like it and it soothes my eyes */

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "IBM Plex Mono", monospace;
    display: flex; 
    justify-content: center;
}

.mid {
    width: 60vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 65%;
    display: flex;
    align-items: center;
    gap: 60px;
}

.stage {
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 40px;
}

.content {
    text-align: right;
    align-items: center;
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.content p, img {
    margin: 20px;
}

img {
    max-width:100%;
    filter: drop-shadow(5px 5px 5px #000);
}

a {
    color: var(--link);
	font-weight: 700;
    text-decoration: none;
}