/***GLOBAL VARIABLES
*****************************************************/
:root {
    /***TEXT***/
    --fontSizeSmall: 0.75rem;
    --fontSizeMedium: 1rem;
    --fontSizeLarge: 2.6rem;
    --letterSpacing: 0.1em;
    --lineHeight: 1.2;
    --spaceX: calc(var(--fontSizeMedium) * 1.8);
    --spaceY: calc(var(--fontSizeMedium) * 1.4);
    --rowGutter: calc(var(--fontSizeMedium) * var(--lineHeight));
    --rowGutterSmall: calc(var(--fontSizeSmall) * var(--lineHeight));
} 

/***FONTS
*****************************************************/
* {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
	text-size-adjust: 100%;
    -webkit-font-smoothing: smooth;
	-moz-font-smoothing: smooth;
    -moz-osx-font-smoothing: smooth;
	-ms-font-smoothing: smooth;
    -o-font-smoothing: smooth;
    text-rendering: geometricPrecision;
}
@font-face {
    font-family: Fibel Nord;
    src: url("Fibel-Nord.ttf");
}
@font-face {
    font-family: Fibel Nord Bold;
    src: url("Fibel-Nord-Bold.ttf");
}
.font_size_S {
    font-family: 'Fibel Nord', sans-serif;
    font-size: var(--fontSizeSmall);
    letter-spacing: var(--letterSpacing);
}
.font_size_M {
    font-family: 'Fibel Nord', sans-serif;
    font-size: var(--fontSizeMedium);
    letter-spacing: var(--letterSpacing);
}
.font_size_L {
    font-family: 'Fibel Nord Bold', sans-serif;
    font-size: var(--fontSizeLarge);
    letter-spacing: var(--letterSpacing);
}

/***RESET
*****************************************************/
::-webkit-scrollbar {
	display: none;
}
::selection {
	color: white;
	background-color: black;
}
::-moz-selection {
	color: white;
	background-color: black;
}
body {
    height: 100vh;
    margin: 0;
    padding: var(--spaceY) var(--spaceX);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
a {
    color: black;
    text-decoration: none;
}
a:hover {
    text-decoration: underline 1px;
}

/***CONTENT
*****************************************************/
video.intro {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    object-fit: cover;
    background: black;
    transition: opacity 0.3s;
    z-index: 500;
}
header {
    align-self: start;
    height: 100%;
}
footer p {
    padding: 0;
    margin: 0;
}
.uppercase {
    text-transform: uppercase;
}

/***TABLETS and MOBILES (LANDSCAPE and PORTRAIT)
*****************************************************/
@media (max-width: 1024px) {
    /***VIEWPORT HEIGHT***/
    :root {
        --viewportHeight: calc(var(--vh, 1vh) * 100);
    }
    body {
        height: 100vh; /* Fallback */
        height: var(--viewportHeight);
    }
    video.intro {
        height: 100vh; /* Fallback */
        height: var(--viewportHeight);
    }
}