@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

@font-face {
    font-family: "Aino Headline";
    src: url("Aino-Headline.otf") format("opentype");
    font-display: swap;
}

:root {
    --js-yellow: #f0db4f;
    --ts-blue: #0065a9;
    --main-color: #323330;
    --secondary-color-1: #c977f9;
    --secondary-color-2: ivory;
    --dark-color-1: #333333;
    --dark-color-alpha-1: rgba(255, 255, 255, 0.6);
    --dark-color-alpha-2: rgba(255, 255, 255, 0.45);
}

* {
    padding: 0;
    margin: 0;
}

html {
    font-size: 16px;
    min-height: 100vh;
}

@media screen and (max-width: 1100px) {
    html {
        font-size: 14px;
    }
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Roboto, sans-serif;
    text-align: center;
    height: 100%;
}

h1,
h2,
h3,
.greeting {
    font-family: "Aino Headline", sans-serif;
}

.page-title {
    padding: 6vh 0 5vh 0;
}

.typed-cursor,
.page-title {
    font-size: 2.75rem;
    font-weight: normal;
    max-height: 2.75rem;
}

.intro p {
    max-width: 500px;
    margin: 1rem;
}

a {
    text-decoration: none;
}

.typed-cursor {
    transform: translateZ(0);
    display: inline-table;
    /* Why? Because Google Chrome uses hardware acceleration for certain transitions. This means that whenever the typed-cursor
       element does its blinking animation, a rounded integer value will be used as it's size instead of the actual floating
       point value. When the typed text is mirrored, i.e. the cursor is to the left of the text, this rounding will mean
       that everything right of it will suddenly jump by the rounded amount. display: inline-table forces an integer size and fixes this.
       Additionally transform: translateZ(0) forces hardware acceleration to be always active while the cursor is shown
       https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/
     */
}

.mirrored {
    display: inline-table;
    transform: scale(-1, 1);
}

.li-icon,
.github-icon {
    height: 3rem;
    width: 3rem;
    position: relative;
}

.li-icon {
    top: 0.3125rem;
}

.github-icon {
    top: 0.5rem;
}

@media screen and (max-width: 1100px) {
    h1,
    .typed-cursor {
        font-size: 2.25rem;
        max-height: 2.25rem;
    }

    .li-icon,
    .github-icon {
        height: 2.25rem;
        width: 2.25rem;
    }
}

.greeting {
    font-size: 1.5rem;
}

.projects,
.about {
    text-align: left;
    margin: 20px;
}

.about {
    max-width: 600px;
}

.about ul {
    list-style-type: none;
}

.about ul li {
    margin: 0.3rem;
}

.about ul li::before {
    font: var(--fa-font-solid);
    margin-right: 0.4rem;
    display: inline-block;
    min-width: 15px;
}

.about ul li.education::before {
    content: "\f19c";
}

.about ul li.work::before {
    content: "\f1ad";
}

.about ul li.fun::before {
    content: "\f135";
}

.projects {
    max-width: 80%;
}

.projects ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 25px;
}

@media screen and (max-width: 1100px) {
    .projects ul {
        grid-template-columns: 1fr;
    }
}

.projects ul li {
    display: inline-block;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid ivory;
    max-width: 250px;
    background: var(--dark-color-alpha-2, rgba(255, 255, 255, 0.45));
    transition: background-color 0.1s ease;
}

.projects ul li:hover {
    background: var(--dark-color-alpha-1, rgba(255, 255, 255, 0.6));
}

.projects ul li h3 {
    margin-bottom: 0.1rem;
}

.note {
    font-size: 0.75rem;
    position: relative;
    bottom: 0.25rem;
}

.page-footer {
    margin: auto 0 5vh 0;
}

.page-footer p {
    color: var(--dark-color-1, #333333);
}

.page1 {
    background: var(--js-yellow);
}

.page1 a {
    color: var(--secondary-color-1, #c977f9);
}

.spacer {
    background: linear-gradient(var(--js-yellow), var(--ts-blue));
    min-height: 30vh;
}

.page2 {
    background: var(--ts-blue);
}

.page2 a {
    color: var(--secondary-color-2, ivory);
}

.page {
    min-height: 100vh;
}

.page,
.spacer,
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.container p {
    margin: 1rem;
}

.arrow {
    border: solid black;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 5px;
    transition: transform 0.5s;
}

.arrow-small {
    border-width: 0 3px 3px 0;
    padding: 3px;
    margin: 5px 2px 2px 5px;
}

.arrow-down {
    transform: rotate(45deg);
}

.arrow-right {
    transform: rotate(-45deg);
}

.bottom-arrow {
    position: relative;
    bottom: 4px;
}