@font-face {
    font-family: Affogato;
    src: url(../fonts/affogato-regular.ttf) format("truetype"),
    url(../fonts/affogato-regular.svg) format("svg"),
    url(../fonts/affogato-regular.woff) format("woff"),
    url(../fonts/affogato-regular.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Affogato;
    src: url(../fonts/affogato-medium.ttf) format("truetype"),
    url(../fonts/affogato-medium.svg) format("svg"),
    url(../fonts/affogato-medium.woff) format("woff"),
    url(../fonts/affogato-medium.woff2) format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/*@font-face {
    font-family: Affogato;
    src: url(../fonts/affogato-bold.ttf) format("truetype"),
    url(../fonts/affogato-bold.svg) format("svg"),
    url(../fonts/affogato-bold.woff) format("woff"),
    url(../fonts/affogato-bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Affogato;
    src: url(../fonts/affogato-black.ttf) format("truetype"),
    url(../fonts/affogato-black.svg) format("svg"),
    url(../fonts/affogato-black.woff) format("woff"),
    url(../fonts/affogato-black.woff2) format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}*/

:root {
    --small-margin: 16px;
    --normal-margin: 32px;
    --big-margin: 64px;
    --bigger-margin: 96px;


	--school-green: #009701;
	
    /* colors for dark theme */
    --dark-background: #2e2e2e;
	--light-text: #bbbbbb;

    /* colors for light theme */
    --light-background: #eeeeee;
    --dark-text: #2e2e2e;

    --background-color: var(--dark-background);
    --foreground-color: var(--light-text);
}

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body {
    font-family: Affogato, sans-serif;
    background: var(--background-color);
    color: var(--foreground-color);
    margin: 0;
}

h1 {
    font-weight: 600;
    font-size: 3em;
    margin: 0;
}

h2 {
    font-weight: 600;
    font-size: 2.6em;
    margin: 0;
}

h3 {
    font-weight: 600;
    font-size: 2.0em;
    margin: 0;
}

h4 {
    font-weight: normal;
    font-size: 1.6em;
    margin: 0;
}

h5 {
    font-weight: normal;
    font-size: 1.2em;
    margin: 0;
}

h6 {
    font-weight: normal;
    font-size: 1.0em;
    margin: 0;
}

a {
    color: var(--school-green);
    text-decoration: none;
}

.animate {
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.top-line {
    height: 10px;
    background: var(--school-green);
    margin-bottom: var(--normal-margin);
}

.back-to-school {
    color: var(--foreground-color);
    margin-bottom: var(--big-margin);
}

.app-icon {
    width: 140px;
    height: auto;
    margin-bottom: var(--normal-margin);
}

.app-icon picture {
    width: 100%;
}

.app-icon img {
    width: 100%;
}

.content {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.divider {
    height: 4px;
    width: 100px;
    background: var(--foreground-color);
    transform: skew(-20deg);
    margin-top: var(--small-margin);
    margin-bottom: var(--normal-margin);
}

.longer-divider {
    height: 4px;
    width: 200px;
    background: var(--foreground-color);
    transform: skew(-20deg);
    margin-top: var(--small-margin);
    margin-bottom: var(--normal-margin)
}

.hvk-section {
    margin-bottom: var(--bigger-margin);
}

.function-container {
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.function-info {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--small-margin);
}

.function-description {
    flex-grow: 1;
    width: calc(100% - 480px);
    min-width: 320px;
    height: auto;
    padding-top: 20px;
}

.function-screenshots {
    width: 450px;
	height: auto;
	margin-right: 30px;
}

.function-screenshots picture {
    width: 100%;
    height: auto;
}

.function-screenshots img {
    width: 100%;
    height: auto;
}

.function-divider {
    height: 2px;
    width: 70%;
    background: var(--foreground-color);
    transform: skew(-20deg);
    margin-top: var(--normal-margin);
    margin-bottom: var(--big-margin);
}

.fadeIn {
    opacity: 1;
}

.update-container {
    margin-bottom: var(--normal-margin);
}

.contact-item {
    width: 200px;
    margin-bottom: 15px;
}

.contact-item-description {
    font-size: 0.8em;
    color: var(--school-green);
}

.contact-item-content {
    color: var(--foreground-color);
}

.bottom-links-container {
    margin-left: 5px;
    margin-bottom: 5px;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-links-container a {
    color: var(--foreground-color);
    font-size: 0.8em;
    margin-right: 15px;
}

@media (max-width: 1100px) {
    .content {
        width: 90%;
    }
}

@media (max-width: 510px) {
    .app-icon {
        width: 100px;
    }

    .function-screenshots {
        width: 90%;
    }

    .function-description {
        width: 90%;
    }

    .updates {
        width: 90%;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --background-color: var(--light-background);
        --foreground-color: var(--dark-text);
    }
}