body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
}


nav {
    font-size: 1.25rem;
    padding: 1rem;
    display: flex;
    gap: 3vw;
    justify-content: center;

}

nav a {
    text-decoration: none;
    color: white;
}

nav a:hover {
    transform: scale(1.1);
    text-decoration: underline;
}

header {
    background-color: rgba(0, 0, 0, 0.126);
    position: fixed;
    width: 100%;
    z-index: 10;
}

.backgroundHomePicture {
    background-image: url(../images/space.png);
    height: 80vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background-image {
    border-radius: 40rem;
    position: absolute;
    top: 15%;
    left: 3%;
    width: 27vw;
}

.click-here-button {
    background: linear-gradient(90deg,
            rgba(77, 106, 109, 0.57) 0%,
            rgba(149, 205, 211, 0.57) 65%);
    border-radius: 60px;
    height: 6vh;
    width: 20vw;
    transform: rotate(-18deg);
    position: absolute;
    bottom: 48%;
    right: 28%;
}

.agenda-Fade {
    background: linear-gradient(0deg, rgba(60, 43, 35, 0.00) 0%,
            rgba(60, 41, 35, 1.00) 30%,
            rgba(42, 27, 28, 1.00) 54%,
            rgba(24, 13, 21, 1.00) 86%,
            rgba(42, 27, 28, 0.00) 94%);
    height: 35vh;
    width: 100%;
    position: relative;
    object-fit: cover;
    margin-top: -7rem;
}

.agenda-Box {
    width: 33vh;
    position: relative;
    display: flex;
    border-radius: 12vh;
    background: linear-gradient(90deg,
            rgba(107, 148, 175, 0.78) 42%,
            rgba(45, 62, 73, 0.68) 86.5%);
    height: 6vh;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.agenda-BoxText {
    width: 15rem;
    position: relative;
    font-size: 2.875rem;
    display: inline-block;
    font-family: Roboto;
    color: #faf2db;
    text-align: center;
    margin: auto;
    margin-top: 0.5vh;
}

.agendacontent-TextLeft,
.agendacontent-TextRight {
    width: 32rem;
    font-size: 1rem;
    line-height: 2.5rem;
    text-align: center;
    font-family: Roboto;
    color: #ffffff;
    display: inline-block;
}

.agendacontent-TextLeft {
    padding-left: 30vh;
    position: absolute;
}

.agendacontent-TextRight {
    padding-left: 120vh;
    position: absolute;
}

.guitarPicture {
    background-image: url(../images/pexels-brett-sayles-3398593.jpg);
    height: 100vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -15rem;
    padding: 0;
}

.facilitiesFade {
    background: linear-gradient(180deg,
            rgba(60, 43, 35, 0.00) 0%,
            rgba(60, 43, 35, 0.08) 10%,
            rgba(60, 41, 35, 1.00) 30%,
            rgba(24, 13, 21, 1.00) 50%,
            rgba(60, 41, 35, 1.00) 80%,
            rgba(60, 43, 35, 0.08) 90%,
            rgba(60, 43, 35, 0.00) 100%);
    height: 70vh;
    position: relative;
    margin-top: -28rem;
}

.facilities-box {
    width: 26rem;
    position: absolute;
    display: flex;
    border-radius: 12vh;
    background: linear-gradient(90deg,
            #d38232 1%,
            #3a2822 82.5%);
    height: 5vh;
    justify-content: center;
    align-items: center;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.facilities-BoxText {
    width: 12.5rem;
    position: relative;
    font-size: 3.33rem;
    display: inline-block;
    font-family: Roboto;
    color: #fff;
    text-align: left;
}

.facilitiesContent-TextLeft,
.facilitiesContent-TextRight {
    width: 32rem;
    font-size: 1rem;
    line-height: 2.5rem;
    font-family: Roboto;
    color: #ffffff;
    display: inline-block;
}

.facilitiesContent-TextLeft {
    padding-left: 30vh;
    margin-top: 30vh;
}

.facilitiesContent-TextRight {
    padding-left: 50vh;
}


.drumPicture {
    background-image: url(../images/pexels-dima-pavlenko-1200758-3927789.jpg);
    height: 100vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -12.5rem;
    padding: 0;
}

.footerHome {
    background: linear-gradient(180deg,
            rgba(60, 43, 35, 0.00) 0%,
            rgba(60, 43, 35, 0.39) 11.83331310749054%,
            rgba(60, 41, 35, 1.00) 35.333311557769775%,
            rgba(24, 13, 21, 1.00) 70.99999785423279%);
    height: 60vh;
    position: relative;
    margin-top: -25rem;
}

.current-LocationTitle {
    width: 18.5rem;
    position: relative;
    font-size: 2.5rem;
    font-family: Roboto;
    color: #ffffff;
    text-align: left;
    display: inline-block;
    padding-left: 30vh;
    margin-top: 30vh;
}

.current-LocationTekst {
    width: 13.5rem;
    position: relative;
    font-size: 1rem;
    font-family: Roboto;
    color: #ffffff;
    text-align: left;
    display: inline-block;
}

.about-Ustitle {
    width: 13.4rem;
    position: absolute;
    font-size: 2.5rem;
    line-height: 1.875rem;
    font-family: Roboto;
    color: #ffffff;
    text-align: left;
    display: inline-block;
    padding-left: 30vh;
    margin-top: 30vh;
}

.about-UsTekst {
    width: 21.2rem;
    position: relative;
    font-size: 1rem;
    line-height: 1.875rem;
    font-family: Roboto;
    color: #ffffff;
    text-align: left;
    display: inline-block;
}

.contact-Title {
    width: 13.4rem;
    position: absolute;
    font-size: 2.5rem;
    line-height: 1.875rem;
    font-family: Roboto;
    color: #ffffff;
    text-align: left;
    display: inline-block;
    padding-left: 90vh;
    margin-top: 30vh;
}

.contact-Tekst {
    width: 21.2rem;
    position: relative;
    font-size: 1rem;
    line-height: 1.875rem;
    font-family: Roboto;
    color: #ffffff;
    text-align: left;
    display: inline-block;
}



/* ====================================ticket CSS==================================== */
.backgroundTicketPage {
    background-image: url(../images/pexels-edwardeyer-811838.jpg);
    height: 80vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
}

.main-background-ticketPage {
    background: #d9d9d9;
    height: 206vh;
    position: relative;
}

.artistContainer {
    display: grid;
    gap: 10vh;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 2vh;
}

.artistItem {
    background-color: #ece8e8;
    padding: 10vh;
    font-size: 3vh;
    text-align: center;
}

@media (max-width: 1200px) {
    .backgroundHomePicture {
        height: 70vh;
    }

    .click-here-button {
        width: 25vw;
        height: 7vh;
    }

    .agenda-Box {
        width: 45vh;
    }

    .facilities-box {
        width: 75%;
    }

    .artistContainer {
        grid-template-columns: 1fr 1fr;
    }
}