@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');

* {
    font-family: Karla;
}

html, body {
  overflow-x: hidden;
}

.content {
    margin: auto;
    display: flex;
    justify-content: center;  
    align-items: center;
    text-align: center;       
    gap: 0.7rem;        
    flex-wrap: wrap; 
    font-weight: 500;
    letter-spacing: 0.2rem;
    position: relative;
    z-index: 1;

    background-image: url("images/Dalhem-Chamber-Music-hall-Aarhus-DK.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 43rem;
}

.content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4); 
    z-index: -1;
}

.button2 a {
    color: #DAC0A3;
    text-decoration: none;
    font-weight: bold;
}

.button2 a:hover {
    color: #301304
}

.content p {
    font-size: 2rem;
    color: aliceblue; 
}

.content h3 {
    font-size: 2.7rem;
    color: aliceblue;
    margin-bottom: 0.5rem;
    letter-spacing: 0.2rem;
    opacity: 0;
    animation: fadeInTop 1s ease-out forwards;
    text-shadow: 2px 2px 4px #3b3a3a;
}

      
@keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px); 
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
}

@keyframes fadeInTop {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
}

@keyframes fadeInBottom {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
}

/* 1000px — tablets & small laptops */
@media screen and (max-width: 1000px) {

    .content {
        margin-top: 0;
        padding: 1.5rem;
        gap: 1rem;
    }

    .content p {
        font-size: 1.7rem;
    }

    .content h3 {
        font-size: 2.4rem;
    }
}

/* 768px — mobile screens */
@media screen and (max-width: 768px) {

    .content {
        margin-top: 0;
        padding: 2rem 1rem;
        gap: 1rem;
    }

    .content p {
        font-size: 1.4rem;
        text-shadow: 2px 2px 4px #767575;
        letter-spacing: 0.1rem;
    }

    .content h3 {
        font-size: 1.9rem;
        text-shadow: 2px 2px 4px #767575;
        letter-spacing: 0.15rem;
    }

}