header {
    position: relative;
    width: 100%;
    height: 100vh;
    @media (orientation: portrait) {
        height: calc(90vw / 2.5 * 2);
    }
    background-color: var(--black);

    display: flex;
    flex-direction: column;
}

header #logos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 20%;
}

header .banner-logo {
    height: 100%;
    aspect-ratio: 1/1;
}

header #id-logo {
}

header #iof-logo {
    box-sizing: border-box;
    padding: 2%
}

header #overdrive {
    align-self: center;
    justify-self: center;
    position: relative;

    aspect-ratio: 2.5/1;
    width: 80vw;
    @media (orientation: portrait) {
        width: 90vw;
    }

    display: flex;
    align-items: center;
    justify-content: center;
}

header #overdrive #overdrive-text {
    position: absolute;
    justify-self: center;
    align-self: center;
    width: 80%;
    z-index: 3;

    will-change: scale;
    animation: var(--overdrive-boom);
}

header #overdrive #iofestival-text {
    position: absolute;
    z-index: 2;
    width: 30%;
    transform: translate(-80%, -400%);

    will-change: scale;
    animation: var(--iof-boom);
}

header .banner-spikes {
    position: absolute;
    opacity: 60%;

    height: 100%;
    object-fit: fill;

    will-change: scale, rotation;
    animation: var(--spike-boom);
}

header #spike-1 {
    width: 100%;
    opacity: 100%;
    transform: translateX(-10%);
    animation: var(--spike-boom), var(--spike-wiggle-1);
}

header #spike-2 {
    width: 90%;
    animation: var(--spike-boom), var(--spike-wiggle-2);
}

header #spike-3 {
    width: 90%;
    height: 120%;
    animation: var(--spike-boom), var(--spike-wiggle-3);
}

header #spike-4 {
    width: 60%;
    transform: translateX(-5%);
    animation: var(--spike-boom), var(--spike-wiggle-4);
}

header #spike-5 {
    width: 80%;
    opacity: 100%;
}

header #glass-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;

    z-index: 5;
}

.glass {
    position: absolute;
    width: 100%;
    height: 100%;

    opacity: 0.8;
}

.glass-shard {
    position: absolute;
    z-index: 5;
    width: 35%;

    opacity: 0.8;
}

#shard-0 {left: 55%; top: 50%; rotation: 20deg;}
#shard-1 {left: 12%; top: 12%}
#shard-2 {left: 52%; top: 20%; rotation: 340deg;}
#shard-3 {left: 15%; top: 60%; rotation: 180deg;}
#shard-4 {left: 10%; top: 35%; rotation: 340deg;}

.hidden {
    display: none;
}

.section-transition-band {
    position: relative;
    width: 100%;
    aspect-ratio: 8/1;

    overflow: hidden;
}

#header-transition {
    position: absolute;
    top: -40%;
    width: 100%;
    z-index: 2;
}

#dance-section {
    display: none;
    @media (orientation: landscape) {
        display: block;
    }
    height: min-content;
}

#dance {
    position: relative;

    width: 100%;
    aspect-ratio: 16/1;
    background-image: url("../media/objects/E - dansende mannetjes 2.svg");
    background-size: auto 100%;
    background-repeat: repeat-x;
    animation: rotate-dance 2s steps(20, jump-none) infinite;
    background-color: var(--black);
}

#map-transition-container {
    background-color: var(--purple);
}

#map-transition {
    background-color: var(--purple);
    width: 100%;
    aspect-ratio: 10/1;
    object-fit: cover;
    object-position: bottom;
}

.line {
    position: relative;

    width: 100%;
    aspect-ratio: 32/1;
    background-repeat: repeat-x;
    background-size: 200% 100%;
    background-color: var(--white);
}

#line_1 {
    background-image: url("../media/objects/Middel 50.svg");
    animation: rotate-line1 10s linear infinite;
    margin-top: 2%;
}
#line_2 {
    background-image: url("../media/objects/Middel 502.svg");
    animation: rotate-line2 10s linear infinite;
    margin-bottom: 2%;
}

#ticketsale_section {
    background-color: var(--white);
    padding-top: 20px;
    color: var(--black);
    font-family: Noka-light, sans-serif;
    font-weight: normal;
    line-height: 1.2;
    font-size: 100px;
    text-align: center;
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    row-gap: 0;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
}

#welcometext {
    width: 45%;
    padding-top: 1em;
    padding-bottom: 1em;

    @media (orientation: portrait) {
        width: 80%;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }
}

.ticketbuy {
    position: relative;

    width: 100%;
    background-image: url("../media/objects/B - Achtergrond.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    @media (orientation: portrait) {
        width: 100%;
    }

    #ticketbutton {
        position: absolute;
        width: 38%;
        left: 0;
        right: 10%;
        top: 0;
        bottom: 0;

        display: block;
        margin: auto;

    }

    #tickettext{
        position: absolute;
        width: 38%;
        padding-top: 8%;
        left: 10%;

    }

}

.lineup {
    box-sizing: border-box;
    padding: 2% 5% 2% 5%;
    display: flex;
    flex-direction: column;
    row-gap: 1em;
    width: 100%;
}

#lineup-landscape {
    @media (orientation: portrait) {
        display: none;
    }
}

#lineup-portait {
    @media (orientation: landscape) {
        display: none;
    }
}

.lineup-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 1em;
    width: 100%;
}

.two-artists video {
    width: calc((100% - 1em) / 2);
}

.three-artists video {
    width: calc((100% - 2em) / 3);
}

.four-artists video {
    width: calc((100% - 3em) / 4);
}

.five-artists video {
    width: calc((100% - 4em) / 5);
}

#map-section {
    position: relative;
    background-color: var(--purple);

    box-sizing: border-box;
    padding: 0 5% 0 5%;
}

#map-section #map {
    width: 100%;
}

#map-section #map-title {
    width: 100%;
    @media (orientation: landscape) {
        position: absolute;
        right: 0;
        width: 50%;
    }
}

#timetable-section {
    /*--timetable-width: min(96vw, 62rem);*/
    /*--timetable-image-width: 124%;*/
    /*--timetable-image-left: -7%;*/
    /*--timetable-crop-top: -5rem;*/

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 0 5% 0 5%;
    background-color: var(--black);

    /*@media (orientation: portrait) {*/
    /*    !*--timetable-width: min(100%, 31rem);*!*/
    /*    !*--timetable-image-width: 118%;*!*/
    /*    !*--timetable-image-left: -5.5%;*!*/
    /*    !*--timetable-crop-top: -1.8rem;*!*/

    /*    padding: 3.5rem 1.4rem 0 1.4rem;*/
    /*}*/
}

#timetable-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    /*width: var(--timetable-width);*/

}

#timetable-logo {
    /*width: min(62%, 32rem);*/
    /*height: auto;*/
    /*margin-left: -10%;*/
    /*margin-bottom: -0.35rem;*/
    /*transform: translateY(1rem);*/

    /*@media (orientation: portrait) {*/
    /*    width: 60%;*/
    /*    margin-left: -11.2%;*/
    /*    margin-bottom: 0.15rem;*/
    /*    transform: translateY(0.55rem);*/
    /*}*/
    width: 100%;
    @media (orientation: landscape) {
        width: 60%;
        align-self: start;
    }
}

#timetable-frame {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-content: center;
}

#timetable {
    display: block;
    /*width: var(--timetable-image-width);*/
    height: auto;
    /*margin-left: var(--timetable-image-left);*/
    /*margin-top: var(--timetable-crop-top);*/
    width: 100%;
    transform: translateX(5%);
}

#house-rules-section {
    position: relative;
}

#house_rulse_transition {
    background-color: var(--purple);
    width: 100%;
    aspect-ratio: 10/1;
    object-fit: cover;
    object-position: top;
}

#house-rules {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5% 0 5%;
    background-color: var(--white);
    z-index: 2;

    @media (orientation: portrait) {
        content: url("../media/objects/House rules phone.svg");
    }
}

#house-rules-people {
    position: absolute;
    right: 5%;
    top: 2%;
    width: 40%;

    @media (orientation: portrait) {
        display: none;
    }
}

#socials-section {
    position: relative;
    width: 100%;
    aspect-ratio: 2.5 / 1;
    overflow: hidden;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 12vw 8vw 10vw 8vw;

    @media (orientation: portrait) {
        padding: 0;
    }
}

#socials-background {
    position: absolute;
    width: 100%;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#socials-background-top,
#socials-background-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    object-fit: cover;
}

#socials-background-top {
    top: 0;
    object-position: bottom center;
}

#socials-background-bottom {
    bottom: 0;
    object-position: top center;
    background-color: var(--black);
}

#socials-stickman {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;

    @media (max-width: 700px) {
        width: 135%;
    }
}

#socials-content {
    position: absolute;
    top: 27%;
    left: 10%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;

    @media (max-width: 700px) {
        top: 29%;
        left: 8%;
        right: auto;
        width: 58%;
        gap: 0;
        text-align: left;
    }
}

#soundcloud-content {
    position: absolute;
    right: 10%;
    bottom: 31%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.9rem;

    @media (max-width: 700px) {
        top: 47%;
        right: 6%;
        bottom: auto;
        left: auto;
        width: 68%;
        gap: 0.2rem;
        text-align: right;
    }
}

.socials-button-text {
    margin: 0;
    font-family: "Noka-Light", sans-serif;
    font-weight: normal;
    font-size: clamp(3rem, 3.5vw, 4.2rem);
    line-height: 1;
    color: var(--black);
    white-space: nowrap;
    text-align: inherit;

    @media (max-width: 700px) {
        font-size: clamp(0.9rem, 4vw, 1.2rem);
        line-height: 0.95;
        white-space: nowrap;
    }
}

.socials-platform-row {
    display: flex;
    align-items: center;
    gap: 2.2rem;

    @media (max-width: 700px) {
        gap: 0.35rem;
    }
}

.socials-platform-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.socials-platform-button img {
    display: block;
    width: auto;
    height: clamp(4.6rem, 4.7vw, 5.7rem);

    @media (max-width: 700px) {
        height: clamp(1.6rem, 6.8vw, 2rem);
        max-width: 100%;
    }
}

footer {
    font-family: "Nako-Light", sans-serif;
    color: var(--yellow);
    position: relative;
    width: 100%;
    z-index: 0;
}

#footer-transition {
    position: absolute;
    width: 100%;
    bottom: -20%;
    z-index: 0;
}

#info_container {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: "Noka-Light", sans-serif;
    background-color: var(--black);
    color: var(--yellow);
    gap: 0.5rem;
    padding-top: 0.3rem;
    padding-bottom: 2rem;
    width: 100%;
    box-sizing: border-box;
}

#info_container > *:not(.footer-transition) {
    position: relative;
    z-index: 1;
}

#email-link {
    text-decoration: none;
    color: var(--yellow);
}

#footer-logo {
    width: 9rem;
    height: auto;
}

#info   {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
}

#column-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
}

#column-right {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
}

#info p,
#column-left p,
#column-right p {
    margin: 0;
}

.right-align {
    text-align: right;
}

.left-align {
    text-align: left;
}

#footer-mark {
    width: 7.5rem;
    height: auto;
    margin-top: 1.5rem;
}

#footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: 1.5rem;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;

    @media (orientation: portrait) {
        display: flex;
        flex-direction: column;
        gap: 0.05rem;
    }
}

#footer-copy-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: 2;
    justify-self: center;

    @media (orientation: portrait) {
        justify-self: auto;
    }
}

.footer-copy {
    margin: 0;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1;
}

.footer-copy-bold {
    font-family: "Noka-Semibold", sans-serif;
    margin-top: 0.2rem;
    margin-bottom: 0.35rem;

    @media (orientation: portrait) {
        margin-top: 0.65rem;
    }
}

.footer-copy-light {
    font-family: "Noka-Light", sans-serif;
}

.anisette-char {
    font-family: "Anisette-Light", sans-serif;
}

#social-buttons {
    display: flex;
    gap: 0.7rem;
    grid-column: 3;
    justify-self: end;
    align-self: start;
    margin-top: 0.9rem;

    @media (orientation: portrait) {
        justify-self: auto;
        align-self: center;
        margin-top: 0;
        order: -1;
    }
}

.social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0 0.1rem;
    text-decoration: none;

    @media (orientation: portrait) {
        width: 1.85rem;
        height: 1.85rem;
    }
}

.social-icon {
    display: block;
    width: 2rem;
    height: 2rem;

    @media (orientation: portrait) {
        width: 1.85rem;
        height: 1.85rem;
    }
}

#social-icon-instagram {
    width: 1.55rem;
    height: 1.55rem;

    @media (orientation: portrait) {
        width: 1.45rem;
        height: 1.45rem;
    }
}

#social-icon-soundcloud,
#social-icon-spotify {
    width: 2.35rem;
    height: 2.35rem;

    @media (orientation: portrait) {
        width: 2.15rem;
        height: 2.15rem;
    }
}