/*

    text-decoration-line: line-through;
    text-decoration-color: red;

*/


/* --- Splash --- */

#splash {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #c7b299;
    overflow: hidden;
    background-image: url(img/snow.gif);
    background-size: contain;
}

#logo {
    font-size: 100px;
    position: absolute;
    top: 280px;
    left: 200px;
    z-index: 2;
    font-family: 'Amatic SC', cursive;
}

#knap {
    position: absolute;
    top: 400px;
    left: 215px;
    width: 240px;
    height: 70px;
    background: #534741;
    border-radius: 90px;
    font-family: 'Amatic SC', cursive;
    color: #ffffff;
    font-size: 40px;
    background: #534741;
    padding: 5px 39px 15px 40px;
    text-decoration: none;
    z-index: 2;
    cursor: pointer;
    border-style: none;
}

#knap:hover {
    background: #825542;
    text-decoration: none;
}

#citat {
    font-size: 45px;
    position: absolute;
    bottom: 60px;
    left: 650px;
    color: whitesmoke;
    max-width: 800px;
    z-index: 2;
    font-family: 'Caveat', cursive;
    text-shadow: 2px 2px 2px #000;
}


/* --- Menu --- */

#menu {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #534741;
}


/* Intro */

#velkommen {
    width: 100vw;
    height: 20vh;
    display: grid;
    grid-template-columns: 2fr 1fr;
}

#velkommentekst {
    color: whitesmoke;
    font-size: 20px;
    padding-top: 16px;
    font-family: 'Slabo 27px', serif;
    padding-left: 20px;
}

#logo2 {
    font-size: 70px;
    color: whitesmoke;
    text-align: center;
    padding-top: 30px;
    font-family: 'Amatic SC', cursive;
}


/* Menu af retter */

#retter {
    width: 100vw;
    height: 80vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "forret forret hovedret hovedret" "sideorder drikke dessert dessert";
    grid-gap: 5px;
}

#forret-link {
    grid-area: forret;
    background-image: url(imgs/medium/baltiskbondesuppe-md.jpg);
    background-size: cover;
}

#hovedret-link {
    grid-area: hovedret;
    background-image: url(imgs/medium/boef-md.jpg);
    background-size: cover;
}

#sideorder-link {
    grid-area: sideorder;
    background-image: url(imgs/medium/bondeboller-md.jpg);
    background-size: cover;
}

#drikke-link {
    grid-area: drikke;
    background-image: url(imgs/medium/voda-md.jpg);
    background-size: cover;
}

#dessert-link {
    grid-area: dessert;
    background-image: url(imgs/medium/pavlova-md.jpg);
    background-size: cover;
}

.retter-link {
    background-color: #c7b299;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    color: whitesmoke;
    text-shadow: 2px 2px 2px #000000;
    font-family: 'Amatic SC', cursive;
    opacity: 0.8;
}

.retter-link:hover {
    opacity: 1;
}

a {
    text-decoration: none;
    color: inherit;
    text-decoration: inherit;
}


/* --- Hygge --- */

#alex {
    position: absolute;
    background-image: url(img/alex_udenhovede.png);
    height: 1350px;
    width: 900px;
    bottom: -450px;
    right: -150px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

#ske {
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: aliceblue;
    bottom: 380px;
    right: 85px;
    z-index: 2;
    opacity: 0;
}

#hovede {
    position: absolute;
    background-image: url(img/alex_halvthovede.png);
    height: 382px;
    width: 382px;
    bottom: 433.5px;
    right: 131px;
    background-repeat: no-repeat;
    background-size: contain;
    transition: bottom 2s ease-out;
    transition: all 1s ease-out;
    z-index: 2;
}

#ske:hover+#hovede {
    bottom: 600px;
    right: 180px;
}

#putin {
    position: absolute;
    background-image: url(img/putin.png);
    height: 250px;
    width: 180px;
    bottom: 500px;
    right: 265px;
    background-size: cover;
    transform: rotate(-11deg);
}

#dukke {
    position: absolute;
    background-image: url(img/matryoshka.png);
    height: 130px;
    width: 80px;
    top: 30px;
    right: 70vw;
    background-size: contain;
    z-index: 1000;
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#dukke:hover {
    animation: spin 0.5s linear infinite;
}

#trololo {
    position: absolute;
    background-image: url(img/trolololo.png);
    height: 130px;
    width: 200px;
    top: 30px;
    right: 50vw;
    background-size: contain;
    background-repeat: no-repeat;
}

#stalin {
    position: absolute;
    background-image: url(img/stalin2.png);
    height: 130px;
    width: 100px;
    top: 30px;
    right: 40vw;
    background-size: contain;
    background-repeat: no-repeat;
}

#stalin:hover {
    animation: spin 0.5s linear infinite;
}

#vodka {
    position: absolute;
    background-image: url(img/vodka.png);
    height: 130px;
    width: 130px;
    top: 30px;
    right: 26vw;
    background-size: cover;
    background-repeat: no-repeat;
}

#vodka:hover {
    animation: spin 0.5s linear infinite;
}

#hat {
    position: absolute;
    background-image: url(img/hat.gif);
    height: 130px;
    width: 170px;
    top: 30px;
    right: 10vw;
    background-size: cover;
    background-repeat: no-repeat;
}

#hat:hover {
    animation: spin 0.5s linear infinite;
}

#basil {
    position: absolute;
    background-image: url(img/stbasil.png);
    height: 800px;
    width: 800px;
    bottom: -20px;
    left: 0px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.15;
}