body{
    user-select: none;
}
.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    animation:
       hallo-animation 2s ease 2.9s 1 normal forwards,
       slide-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) normal forwards 5s;
}
.subtitle-container{
    display: flex;
    justify-content: center;
    margin-top: -270px;
    text-align: center;
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 5s;
}
.button-container{
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 80px;
    animation: scale-up-center 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 6.5s;
}
.button{
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 20px;
    background-color: #CC6700;
    border: none;
    animation: shadow-drop-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 7s;
    box-shadow: 0 0 20px 0px rgba(255, 255, 255, 0.45);
    transition: all 0.3s ease;
}
.button:hover{
    transform: scale(1.05);
    cursor: pointer;
}
.button p{
    text-decoration: none;
    font-family: sans-serif;
    color: white;
    font-size: 25px;
}
.subtitle{
    color: var(--text-color);
}
.title{
    font-size: 150px;
    color: var(--text-color);
    letter-spacing: 25px;
    animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both 1s;
}

@media screen and (max-width: 780px) {
    .title{
        font-size: 90px;
        letter-spacing: 10px;
    }
    .subtitle{
        font-size: 20px;
        font-weight: 500;
    }
    .subtitle-container{
        margin-top: -330px;
        padding: 10px;
    }
    .button p{
       font-size: 20px;
    }
    .button-container{
       margin-top: 40px;
    }
}