@font-face {
    font-family: "Metropolis";
    src: url("assets/fonts/Metropolis-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis-Light";
    src: url("assets/fonts/Metropolis-Light.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Metropolis", sans-serif;
    background-color: #161a1d;
    color: #f5f3f4;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.strip {
    height: 2px;
    background: linear-gradient(
        to right,
        #660708 0%,
        #e5383b 50%,
        #660708 100%
    );
}

.strip.thick {
    height: 1rem;
}

.mainDiv {
    height: 100vh;
    color: #f5f3f4;
}

.mainDiv > h1 {
    color: #e5383b;
}

.mainDiv > p {
    position: relative;
    top: -1rem;
}

.icon-links {
    margin-top: 2rem;
}

.icon-links a {
    margin: 0 1rem;
    display: inline-block;
    vertical-align: middle;
}

.icon-links img {
    height: 1.0rem;
}

.icon-links img.large {
    height: 1.1rem;
}

.icon-links img.small {
    height: 0.8rem;
}


.scrollable-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 0 1000px 0 #f5f3f433;
    background-color: #0e0f0f;
    padding: 1rem;
    overflow-y: auto;
    font-family: "Metropolis-Light", sans-serif;
}

.row {
    display: flex;
    justify-content: space-around;
    /* align-items: center; */
    flex-direction: row;
}

.half-col {
    width: 50%;
}

.row-separator {
    width: 3rem;
}

section {
    margin-bottom: 3rem;
}

.nomb {
    margin-bottom: 0;
}

.arrow {
    top: -10rem;
    position: relative;
    animation: arrowFloatAnimation 2s ease-in-out infinite;
    padding: 2rem;
}

@keyframes arrowFloatAnimation {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2rem);
    }

    100% {
        transform: translateY(0);
    }
}

@media screen and (min-width: 1080px) {
    .sections-wrapper {
        width: 80%;
    }
}

@media screen and (max-width: 1080px) {
    .container,
    .row {
        flex-direction: column;
    }
    .row-separator {
        width: 0;
    }
    .half-col {
        width: 100%;
    }
}

.star {
    position: absolute;
    background: #f5f3f4;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    opacity: 0;
    animation: twinkle 3s infinite;
}

@keyframes twinkle {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.3;
        width: 1px;
        height: 1px;
    }

    100% {
        opacity: 0.5;
    }
}

.maxW100 {
    max-width: 100%;
}

.qr {
    width: 90%;
    max-width: 20rem;
    padding: 1rem;
}

.qrLabel {
    padding: 2rem;
    word-break: break-word;
}

.linksList a {
    color: #e5383b;
    font-weight: bold;
    font-size: large;
    text-decoration: none;
}

.linksList a:hover {
    text-decoration: underline;
}

/* https://coolors.co/palette/0b090a-161a1d-660708-a4161a-ba181b-e5383b-b1a7a6-d3d3d3-f5f3f4-ffffff */