:root {
    --text-color: white;
    --background: url(/img/mr_backgroundtile.png);
    --main-font: Tahoma, sans-serif;
}

body {
    background-image: var(--background);
    color: var(--text-color);
    font-family: var(--main-font);
    padding-left: 200px;
    padding-right: 200px;
    overflow-x: hidden;
}

h1,
h2,
h3 {
    font-family: Inter, sans-serif;
    font-weight: 800;
}

ul,
ol {
    padding-inline-start: 1em;
}

blockquote {
    padding-inline-start: 1em;
    border-inline-start: 0.3em solid;
}
.return-link-wrapper {
    background-color: #090091;
    width: 200px;
    margin-bottom: 10px;
    padding: 5px;
    font-size: 24px;
    text-align: center;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.return-link-wrapper:hover {
    animation-name: backlinkanim;
    animation-duration: .2s;
    animation: iteration count 5px;
    animation-timing-function:linear;
}
.return-link-wrapper:active {
    background-color: grey;
}
.return-link:link {
    text-decoration: none;
    color: white;
}
.return-link:visited {
    color: white;
}
.return-link:hover {
    text-decoration: solid;
    text-decoration-line: underline;
}

header {
    display: flex;
    justify-content: center;
}

.h-icon {
    filter:invert();
}
.h-icon:active {
    filter:hue-rotate(20deg);
}
.subtitlebg {
    background-color: black;
    position: relative;
    right: 50vw;
    width: 150vw;
    padding: 1px;
}
.subtitle {
    /* === Text Styling === */
    font-family: 'Courier New', Courier, monospace;
    font-size: 24px;
    white-space: nowrap;
    position: relative;

    /* === Scrolling text animation === */
    animation-name: subtitlemoving;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

main {
    padding: 2em;
    margin-left: 10vw;
    margin-right: 10vw;
}

/* ===== Page animations ===== */
@keyframes subtitlemoving {
    0% {
        left: 2500px;
    }
    100% {
        left: -2000px;
    }
}

@keyframes backlinkanim {
    0% {
        transform: rotate(2deg);
    }
    25% {
        tranform: rotate(0deg);
    }
    50% {
        transform: rotate(-2deg);
    }
    75% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* ===== Media quieries for smaller screens ===== */
@media screen and (max-width: 1000px) {
    body {
        padding-left: 5px;
        padding-right: 5px;
    }
    main {
    padding: 2em;
    margin-left: 1vw;
    margin-right: 1vw;
}
    .h-icon {
        width: 240px;
    }
}