html, body { height: 100vh;}

@media (max-width: 1024px) {
    footer
    {
        padding-bottom: 100px;
    }
}

@font-face {
    font-family: Handelson;
    src: url("fonts/Handelson-One.otf") format("opentype");
}

*{margin: 0; padding: 0; box-sizing: border-box;}

.impress

.bg_gray
{
    background: rgb(240, 240, 240);
}

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

.title
{
    position: absolute;
    top: 2%;
    width: 100%;
    text-align: center;
    font-family:'Handelson';
    font-size:7vw;
    color:rgb(240, 240, 240);
}

@media (max-width: 1024px) {
    .title
    {
        font-size:15vw;
    }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.description_title
{   
    font-family:'Handelson';
    font-size: 75px;
}

@media (max-width: 1024px) {
    .description_title
    { 
        font-size:13vw;
    }
}

.description_text
{
    font-family: 'Segoe UI';
    font-size: large;
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 1%;
    /*background-color: white;*/
}
.description_text_limits
{
    font-family: 'Segoe UI';
    font-size: large;
    width: 100%;

}

.media
{
    width: 100%;
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    .media
    {
        /*Rearrange all items below each other*/
        height: 450px;
        flex-direction: column;
    }
}
.media .icon
{
    width: 100px;
    height: 100px;
    border-radius: 999px;
    background: #fff;
    color: #fff;
    margin: 20px;
    text-align: center;
    font-size: 50px;
    line-height: 100px;
    font-family: sans-serif;
    overflow: hidden;
    box-shadow: 5px 10px 20px rgba(150, 150, 150, .3);
    transition: all .4s ease-out;
    transform: scale(0.65);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
}

.media a
{
    text-decoration: none !important; /* Use !important to ensure it takes precedence */
}

.media .icon:hover
{
    width: 400px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: #fff;
}

.media .icon:hover i
{
    color: #fff;
}
.media .icon .fa-facebook-f
{
    color: #1A6ED8;
}
.media .fb:hover
{
    background: #1A6ED8;
}
.media .icon .fa-instagram
{
    color: #C13584;
}
.insta:hover
{
    background: #C13584;
}
.media .icon .fa-envelope
{
    color: #1DB954;
}
.mail:hover
{
    background: #1DB954;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leftFloat
{
    float: left;
    margin-right: 10px;
    border-radius: 8px;
}

.rightFloat
{
    float: right;
    margin-left: 10px;
    border-radius: 8px;
}

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

.impressum, .credits
{
    padding: 25px;
}

/*Impressum and Credits Popups*/
.impressum_popup, .credits_popup
{
    position: fixed;
    width: 400px;
    background: white;
    border-radius: 6px;
    top: 0%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0.1);
    text-align: center;
    padding: 0 0 30px;
    color: black;
    visibility: hidden;
    transition: transform 0.4s, top 0.4s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 99;
}

/*Opens the Impressum and Credits Popups*/
.open_impressum, .open_credits
{
    visibility: visible;
    top: 50%;
    transform: translate(-50%,-50%) scale(1);
}

.i_bg {
    position: relative;
    width: 80px;
    height: 80px;
    top: 0%;
    left: 50%;
    background-color: gray;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%) scale(1.8);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

/*Button to close the Impressum and Impressum*/
.impressum_popup button, .credits_popup button
{
    width: 80%;
    margin-top: 30px;
    padding: 10px 0;
    background: lightgrey;
    color: black;
    border: 0;
    outline: none;
    font-size: 18px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 5px 5px rga(0,0,0,0.2);
}

.debug_output
{
    position: fixed;
    border-radius: 10px;
    font-size: x-large;
    padding: 10px;
    margin: 10px;
    width: auto;
    height: auto;
    background-color: lightgray;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    color: red;
}