﻿/* ========== Allgemeine Resets & Schrift ========== */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Verdana, Arial, sans-serif;
}

/* ========== Body & Hintergrundbild ========== */
body {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    z-index: 0;
}

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../img/general/pexels-lilartsy-1236421.jpg);
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        opacity: 0.4;
        z-index: -1;
    }

#mainmenu {
    width:600px;
    margin:0px auto;
}


@media only screen and (max-width: 1024px) {
    #mainmenu {
        width: 600px;
    }
}

@media only screen and (max-width: 768px) {
    #mainmenu {
        width: 480px;
    }
}

@media only screen and (max-width: 480px) {
    #mainmenu {
        width: 360px;
    }
}


h1 {

}

.row {
    border: 1px solid black;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.5);
    transition: background-color 0.2s ease-in-out;
    padding: calc(5rem / 16);
    font-size: calc(0.8rem + 0.5vw);
    border-radius: calc(0.625rem);
    border: calc(0.0625rem) solid black;
}

a:hover .row {
    background-color:white;
}

h1, .row {
    text-align: center;
    margin:1rem;
    
    /*margin: 10px;
    height: 50px;*/
}

a {
    text-decoration: none;
    line-height:50px;
    color:black;
}