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

@font-face {
    font-family: playfairdisplay;
    src: url(/fonts/PlayfairDisplay-VariableFont_wght.ttf);
}


@media screen and (max-width: 391px ) {
        body {
            background: linear-gradient(180deg, #d1fed2, #ffffff) ;
        }
        
        .forsidelogo {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 60px;
            margin: auto; /* Centrerer containeren horisontalt */
            padding-bottom: 10px;
        }
        /* Reset for margin/padding */

/* Skjul checkboxen */
.burger-checkbox {
    display: none;
}

/* Styling af burgerikonet */
.burger {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    margin: 10px;
}

.line {
    height: 3px;
    background-color: #da7897; /* Farve på linjerne */
    margin: 5px 0;
    border-radius: 2px; /* Runding af hjørner */
}

/* Styling af menuen */
.menu {
    display: none; /* Skjul menuen som standard */
    background-color: #da7897;
    position: absolute;
    top: 90px; /* Placer menuen nedenfor burgerikonet */
    right: 0;
    width: 100%;
    text-align: left;
    font-family: playfairdisplay;
}

.menu ul {
    list-style: none;
}

.menu ul li {
    padding: 15px;
}

.menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    display: block;
}

/* Vis menuen, når checkboxen er markeret */
.burger-checkbox:checked + .burger + .menu {
    display: block;
}

h2 {
    text-align: center;
    font-size: 1.5rem;
    font-family: playfairdisplay;
    padding-bottom: 1rem;
}

header {
    padding: 30px;
}

hr {
    border-color: #da7897;
}

.menumenu {
display: flex;
justify-content: space-between;
text-decoration: none;
padding-left: 30px;
padding-right: 30px;
}

.morgenhr {
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 15px;
}

.morgenmadhr {
    display: none;
}

a {
    text-decoration: none;
    color: black;
    font-family: playfairdisplay;
    font-size: 1.2rem;
}

section {
    text-align: center;
    line-height: 1.8rem;
}

 h4 {
    padding-top: 1.5rem;
 }

 .morgenbilleder {
    position: relative;
    width: 275px;
    height: 275px;
 }

 .bollesnurre {
    border-radius: 44px;
    position: absolute;
    top: 33.33%;
    right: -15.33%;
    width: 45%;
    height: 65%;
    z-index: 2;
    object-fit: cover;
 }

 .bowl {
    border-radius: 44px;
    position: absolute;
    top: 5.33%;
    right: 24.67%;
    width: 45%;
    height: 65%;
    z-index: 1;
    object-fit: cover;
 }

 .snurre {
    border-radius: 44px;
    position: absolute;
    top: 62.33%;
    right: 21.67%;
    width: 45%; 
    height: 65%;
    z-index: 3;
    object-fit: cover;
 }

 .frokosthr {
    margin-top: 8rem;
    margin-right: 30px;
    margin-left: 30px;
 }

 .frokosth3 {
    padding-top: 2rem;
 }

 .frokostbillede {
    position: relative;
    width: 275px;
    height: 275px;
 }

 .avocado {
    border-radius: 44px;
    position: absolute;
    top: 20.33%;
    right: -25.33%;
    width: 55%;
    height: 63%;
    z-index: 2;
    object-fit: cover;
 }

 .bord {
    border-radius: 44px;
    position: absolute;
    top: 58.33%;
    right: 17.67%;
    width: 60%;
    height: 80%;
    z-index: 3;
    object-fit: cover;
 }

 .sandwich {
    border-radius: 44px;
    position: absolute;
    top: 15.33%;
    right: 22.67%;
    width: 67%;
    height: 57%;
    z-index: 1;
    object-fit: cover;
 }

 .drikkevarerhr {
    margin-top: 8rem;
    margin-right: 30px;
    margin-left: 30px;
 }

 .drikkevarerh3 {
    padding-top: 2rem;
 }

 .drikkevarerbilleder{
    position: relative;
    width: 275px;
    height: 275px;
    margin-bottom: 9rem;
 }

 .drinks {
    border-radius: 44px;
    position: absolute;
    top: 52.33%;
    right: 14.67%;
    width: 56%;
    height: 53%;
    z-index: 3;
    object-fit: cover;
 }

 .juice {
    border-radius: 44px;
    position: absolute;
    top: 8.33%;
    right: -3.33%;
    width: 74%;
    height: 53%;
    z-index: 1;
    object-fit: cover;
 }

 .kaffe {
    border-radius: 44px;
    position: absolute;
    top: 17.33%;
    right: 44.67%;
    width: 49%;
    height: 66%;
    z-index: 2;
    object-fit: cover;
 }

 .kakao {
    border-radius: 44px;
    position: absolute;
    top: 55.33%;
    right: -35.33%;
    width: 60%;
    height: 70%;
    z-index: 4;
    object-fit: cover;
 }

 .spritz {
    border-radius: 44px;
    position: absolute;
    top: 78.33%;
    right: 51.67%;
    width: 44%;
    height: 59%;
    z-index: 5;
    object-fit: cover;
 }

 .vin {
    border-radius: 44px;
    position: absolute;
    top: 13.33%;
    right: -35.33%;
    width: 40%;
    height: 49%;
    z-index: 6;
    object-fit: cover;
 }
 
.footerbox {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 3rem;
}

.aabningstider {
    margin-top: 2rem;
    margin-bottom: 2rem;
    line-height: 2rem;
    text-align: center;
}

.kontaktmig {
    line-height: 2rem;
    text-align: center;
}

.roundlogo {
    margin-bottom: 2rem;
    display: none;
}

.instagramlogo {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
}

.facebooklogo {
    width: 2rem;
    height: 2rem;
}

.logoer {
    display: flex;
    justify-content: center;
}
}



@media screen and (min-width: 392px) {
    body {
        background: linear-gradient(135deg, #d1fed2, #ffffff) ;
    }
    
    .forsidelogo {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 130px;
        margin: auto; /* Centrerer containeren horisontalt */
        padding-bottom: 10px;
    }
    /* Reset for margin/padding */

/* Skjul checkboxen */
.burger-checkbox {
display: none;
}

.menu ul {
list-style: none;
display: flex;
justify-content: space-between;
}

.menu ul li {
padding: 15px;
}

.menu ul li a {
color: black;
text-decoration: none;
font-size: 1.5rem;
}

/* Vis menuen, når checkboxen er markeret */
.burger-checkbox:checked + .burger + .menu {
display: block;
}

h2 {
text-align: center;
font-size: 1.2rem;
font-family: playfairdisplay;
padding-bottom: 1rem;
}

header {
padding: 30px;
}

hr {
border-color: #da7897;
}

.menumenu {
display: flex;
justify-content: space-between;
text-decoration: none;
padding-left: 15rem;
padding-right: 15rem;
margin-top: -2rem;
}

.morgenhr {
margin-left: 30px;
margin-right: 30px;
margin-bottom: 15px;
display: none;
}

.morgentekst {
list-style-type: none;
}

.morgenmad {
margin-bottom: 0.5rem;
}

.morgenmadhr {
border: solid 0.1rem #da7897;
width: 8rem;
margin-bottom: 0.5rem;
}

a {
text-decoration: none;
color: black;
font-family: playfairdisplay;
font-size: 1.3rem;
list-style-type: none;
}

section {
text-align: left;
line-height: 1.8rem;
padding: 3rem;
margin-top: -3rem;
list-style-type: none;
}

h4 {
padding-top: 1.5rem;
}

.morgenbilleder {
position: relative;
width: 200px;
height: 200px;
float: right;
}

.bollesnurre {
border-radius: 44px;
position: absolute;
top: -298.67%;
right: 41.67%;
width: 125%;
height: 155%;
z-index: 2;
object-fit: cover;
}

.bowl {
border-radius: 44px;
position: absolute;
top: -321.67%;
right: 174.67%;
width: 130%;
height: 150%;
z-index: 1;
object-fit: cover;
}

.snurre {
border-radius: 44px;
position: absolute;
top: -184.67%;
right: 134.67%;
width: 120%;
height: 140%;
z-index: 3;
object-fit: cover;
}

.frokosthr {
margin-top: 4rem;
margin-right: 30px;
margin-left: 30px;
display: none;
}

.frokosth3 {
padding-top: 5rem;
}

.frokosth3hr {
border: solid 0.1rem #da7897;
width: 5rem;
margin-bottom: 0.5rem;
}

.frokostbillede {
position: relative;
width: 275px;
height: 275px;
}

.frokosthøjre {
text-align: left;
line-height: 1.8rem;
padding-left: 45rem;
list-style-type: none;
margin-top: -3rem;
}

.avocado {
border-radius: 44px;
position: absolute;
top: -106.67%;
right: -114.33%;
width: 110%;
height: 118%;
z-index: 2;
object-fit: cover;
}

.bord {
border-radius: 44px;
position: absolute;
top: -2.33%;
right: -45.33%;
width: 100%;
height: 120%;
z-index: 3;
object-fit: cover;
}

.sandwich {
border-radius: 44px;
position: absolute;
top: -89.67%;
right: -12.33%;
width: 107%;
height: 100%;
z-index: 1;
object-fit: cover;
}

.drikkevarerhr {
margin-top: 8rem;
margin-right: 30px;
margin-left: 30px;
display: none;
}

.drikkevarerh3 {
padding-top: 5rem;
font-size: 1.2rem;
}

.drikkevarerh3hr {
border: solid 0.1rem #da7897;
width: 7rem;
margin-bottom: 0.5rem;
}

.alkoholdrikke {
text-align: left;
line-height: 1.8rem;
padding-left: 50rem;
list-style-type: none;
margin-top: -1rem;  
}

ul {
    list-style-type: none;
}

.drikkevarerbilleder {
position: relative;
width: 200px;
height: 200px;
}

.drinks {
border-radius: 44px;
position: absolute;
top: -235.67%;
right: -38.33%;
width: 126%;
height: 123%;
z-index: 3;
object-fit: cover;
}

.juice {
border-radius: 44px;
position: absolute;
top: -712.67%;
right: -515.33%;
width: 200%;
height: 170%;
z-index: 1;
object-fit: cover;
}

.kaffe {
border-radius: 44px;
position: absolute;
top: -552.67%;
right: -494.33%;
width: 175%;
height: 185%;
z-index: 4;
object-fit: cover;
}

.kakao {
border-radius: 44px;
position: absolute;
top: -631.67%;
right: -325.33%;
width: 175%;
height: 185%;
z-index: 4;
object-fit: cover;
}

.spritz {
border-radius: 44px;
position: absolute;
top: -122.67%;
right: -44.33%;
width: 124%;
height: 139%;
z-index: 5;
object-fit: cover;
}

.vin {
border-radius: 44px;
position: absolute;
top: -192.67%;
right: -148.33%;
width: 120%;
height: 160%;
z-index: 6;
object-fit: cover;
}

.footerhr {
    margin-bottom: 2rem;
}

.footerbox {
    display: flex;
    justify-content: space-between;
    margin: 2rem;
    flex-direction: row;
}

.socialmediabox {
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    font-size: 1.5rem;
}

.instagramlogo {
    width: 5rem;
    height: 5rem;
    margin-right: 1rem;
    margin-top: 2rem;
}

.facebooklogo {
    width: 5rem;
    height: 5rem;
    margin-top: 2rem;
}

.logoer {
    display: flex;
    justify-content: center;
}

.aabningstider {
    display: flex;
    flex-direction: column;
    line-height: 2rem;
}

.kontaktmig {
    display: flex;
    flex-direction: column;
    line-height: 2rem;
}
}