@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');


* {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    font-weight: 300;
    color: #bbb674;
    text-decoration: none;
    border: none;
    box-sizing: content-box;
    list-style-type: none;
   
}

a:hover, a:active, a:link, a:visited {
    color: #7d9bd3;
    text-decoration: none;
}


html {
    font-size: 100%;
}

body {
    margin: 0 3vw 0 3vw;
    padding-top: 11vw;
    font-size: 1.40rem;
}

#title {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    top: 0;
    font-size: 11vw;
    font-weight: 300;
    mix-blend-mode: exclusion;
    z-index: 9999;
}

table {
    margin: 0.8rem 0 2rem 0
}

table tr td:first-child {
    white-space: nowrap;
}

table tr td {
    padding-right: 0.8rem;
}

section {
    margin-bottom: 6rem;
}

section ul li img {
    cursor: pointer;
    transition: 0.2s ease;
}

section ul li img:hover {
    transform: scale(1.1);
}

#copyright {
    font-size: 0.8rem;
    margin: 6rem 0 0.4rem 0;
    display: block;
    text-align: center;
}

#contact {
    position: fixed;
    right: 0.8rem;
    bottom: 0.4rem;
    font-size: 0.8rem;
    mix-blend-mode: exclusion;
}

#contact a {
    display: block;
    text-align: center;
}

#email {
    width: 28px
}

#instagram {
    width: 26px;
}

#pfeil {
    position: fixed;
    right: 50%;
    bottom: 1.5rem;
    font-size: 0.8rem;
    mix-blend-mode: exclusion;
    font-size: 2rem

}


@media screen and (max-width:740px) {

    html {
        font-size: 75%;
    }

    
    #title {
        font-size: 10.5vw;
    }

    section ul li img:hover {
        transform: none;
    }

}

@media screen and (min-width:1760px) {

    html {
        font-size: 150%;
    }

    #email {
        width: 39px
    }
    
    #instagram {
        width: 36px;
    }


}