* { /*Nulstiller hjemmesidens værdier*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
@font-face { /*Vores egen font som bruges på hele siden*/
    font-family: playfairdisplay;
    src: url(/fonts/PlayfairDisplay-VariableFont_wght.ttf);
}


/*MOBIL STARTER*/

@media screen and (max-width: 391px ) {
    * {
        font-family: playfairdisplay;
    }

        body {
            background: linear-gradient(180deg, #ffff99, #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;
}

header {
    padding: 30px;
}

hr {
    border-color: #da7897;
}

.forsidehr {
    display: none;
}

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

.infotext {
    font-size: 1rem;
    text-align: justify;
    line-height: 1.8rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

.bowl {
    border-radius: 44px;
    position: absolute;
    top: 5.33%;
    left: 70%;
    width: 55%; /* Får dem til at fylde hele containeren */
    height: 90%;
    z-index: 1;
    object-fit: cover; /*Vi har brugt "object-fit cover for at ungå at billdet vil blive udstrukket*/
}

.bolle {
    border-radius: 34px;
    position: absolute;
    top: 64%;
    left: 43.33%;
    width: 30%; /* Får dem til at fylde hele containeren */
    height: 50%;
    z-index: 3;
    object-fit: cover;
}

.avocado {
    border-radius: 44px;
    border-color: #da7897;
    position: absolute;
    top: 5.33%;
    right: 36.67%;
    width: 50%; /* Får dem til at fylde hele containeren */
    height: 70%;
    z-index: 2;
    object-fit: cover;
}

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

.menukortlinkdesktop {
    display: none;
}

/*Designer hvordan menu kanppen ser ud på forsiden*/
.menukortlink {
    text-decoration: none;
    color: black;
    font-family: playfairdisplay;
    font-weight: bold;
    background-color: #da7897;
    border-radius: 20px;
    padding: 10px 20px;
    top: 102%;
    left: 86.67%;
    position: absolute;
    border: none;
    box-shadow: 2px 2px 4px 0px grey; /*skaber lidt skygge, og styger hvilken retning skyggen skal falde*/
    text-align: center;
}

.eventshr{
    margin-left: 30px;
    margin-right: 30px;
}

.eventsh2{
    padding-top: 8rem;

}

.eventstekst{
    padding-top: 1rem;
    font-size: 1rem;
    text-align: justify;
    line-height: 1.8rem; /*skaber afstand mellem linjer i tekst så den bliver nemere at læse*/
    padding-left: 3rem;
    padding-right: 3rem;
}

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

.run{
    border-radius: 34px;
    position: absolute;
    top: 5.33%;
    left: 80%;
    width: 45%; /* Får dem til at fylde hele containeren */
    height: 90%;
    z-index: 1;
    object-fit: cover;
}

.keramik {
    border-radius: 34px;
    position: absolute; /*Gør det muligt at ligge billederne over hinanden*/
    top: 64%;
    left: 64%;
    width: 40%; /* Får dem til at fylde hele containeren */
    height: 50%;
    z-index: 3;
    object-fit: cover;
}

.strik {
    border-radius: 44px;
    border-color: #da7897;
    position: absolute;
    top: 5.33%;
    right: 21.33%;
    width: 50%; /* Får dem til at fylde hele containeren */
    height: 70%;
    z-index: 2; /*Bestemmer hvilket lag billedet ligger på og derved styger hvad der ligger forst og bagerst (1 = Bagerst)*/
    object-fit: cover;
}

.eventlink{
    text-decoration: none;
    color: black;
    font-family: playfairdisplay;
    font-weight: bold;
    background-color: #da7897;
    border-radius: 20px;
    padding: 10px 20px;
    top: 100%;
    left: 10.66%;
    box-shadow: 2px 2px 4px 0px grey;
    position: relative;
    border: none;
    margin-top: 4rem;
    text-align: center;
}

.eventlinkdesktop{
    display: none; /*Gemmer knappen fra desktop væk så man ikke ser 2 på mobil*/
}




/*LOKATION STARTER*/

.lokationh2 {
    padding-top: 8rem;
}

.lokationshr {
    margin-left: 30px;
    margin-right: 30px;
}

.lokationtekst {
    padding-top: 1rem;
    font-size: 1rem;
    text-align: justify;
    line-height: 1.8rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

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

.lokationimg {
    border-radius: 44px;
    position: absolute;
    top: 37.33%;
    left: 26%;
    width: 90%;
    height: 90%;
    z-index: 1;
    object-fit: cover;
}

.lokationlink {
    background-color: #da7897;
    border-radius: 20px;
    padding: 10px 20px;
    top: 10%;
    left: 50%;
    z-index: 4;
    position: absolute;
    border: none;
    box-shadow: 2px 2px 4px 0px grey;
    text-align: center;
}

.lokationlinkdesktop {
    display: none;
}

.lokationlink {
    text-decoration: none;
    color: black;
    font-family: playfairdisplay;
    font-weight: bold;
}




/*REVIEW STARTER*/

.reviewh2 {
    padding-top: 8rem;
}

.reviewhr {
    margin-left: 30px;
    margin-right: 30px;
}

.reviewboks {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.haticeboks {
    border: 3px solid #da7897;
    border-radius: 10px;
    text-align: center; 
    margin: 30px;
    padding-top: 1rem;
    padding-bottom: 3rem;
}

.lotteboks {
    border: 3px solid #da7897;
    border-radius: 10px;
    text-align: center; 
    margin: 30px;
    padding-top: 1rem;
    padding-bottom: 3rem;
}

.galboks{
    border: 3px solid #da7897;
    border-radius: 10px;
    text-align: center; 
    margin: 30px;
    padding-top: 1rem;
    padding-bottom: 3rem;
}

.hatice {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.lotte {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.gal {
    margin-top: 1rem;
    margin-bottom: 1rem;
}




/*FOOTER STARTER*/

.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;
}
}




/*DESKTOP STARTER*/

@media screen and (min-width: 392px) {
    * {
        font-family: playfairdisplay;
    }
        body {
            background: linear-gradient(135deg, #ffff99, #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;  /*Disse 3 menu selectors bruger vi de føglende atributter til at designe vores navbar*/
}

.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;
}

header {
    padding: 30px;
}

hr {
    border-color: #da7897;
}

.forsidemenu {
    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.forsidemenutext {
    text-align: center;
    display: flex;
    padding-left: 0.3rem;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 50%;
}

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

.forsidehr {
    border: solid 0.1rem #da7897;
    width: 36rem;
    margin-bottom: 1.5rem;
}

.infotext {
    font-size: 1.3rem;
    text-align: justify;
    line-height: 1.8rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

.bowl {
    border-radius: 44px;
    position: absolute;
    top: 5.33%;
    left: 92%;
    width: 85%;
    height: 125%;
    z-index: 1;
    object-fit: cover;
}

.bolle {
    border-radius: 34px;
    position: absolute;
    top: 79%; /*top og left taget styrer hvor på siden billedet sidder*/
    left: 55.33%;
    width: 70%;
    height: 90%;
    z-index: 2;
    object-fit: cover;
}

.avocado {
    border-radius: 44px;
    border-color: #da7897;
    position: absolute;
    top: 14.33%;
    right: 16.67%;
    width: 65%;
    height: 90%;
    z-index: 3;
    object-fit: cover;
}

.imagesfrontmenu {
    display: flex;
    position: relative;
    width: 275px;
    height: 275px;
    margin-right: 22rem;
}

.menukortlink {
    display: none;
}

.menukortlinkdesktop {
    text-decoration: none;
    color: black;
    font-family: playfairdisplay;
    font-weight: bold;
    font-size: 1.3rem;
    background-color: #da7897;
    border-radius: 20px;
    padding: 10px 20px;
    z-index: 4;
    position: relative;
    border: none;
    box-shadow: 2px 2px 4px 0px grey;
    margin-top: 4rem;
    text-align: center;
}






/*EVENTS STARTER*/

section.forsideevents {
    display: flex;
    justify-content: space-between;
    margin-top: 12rem;
    flex-direction: row-reverse;
}

section.forsideeventstext {
    height: 50%;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.eventshr {
    border: solid 0.1rem #da7897;
    width: 36rem;
    margin-bottom: 1.5rem;
}

.eventstekst {
    font-size: 1.3rem;
    text-align: justify;
    line-height: 1.8rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

.eventimg {
    display: flex;
    position: relative;
    width: 275px;
    height: 275px;
    margin-left: 3rem;
}

.run {
    border-radius: 34px;
    position: absolute;
    top: 5.33%;
    left: 109%;
    width: 90%;
    height: 130%;
    z-index: 2;
    object-fit: cover;
}

.keramik {
    border-radius: 34px;
    position: absolute;
    top: 78%;
    left: 29%;
    width: 90%;
    height: 90%;
    z-index: 3;
    object-fit: cover;
}

.strik {
    border-radius: 44px;
    border-color: #da7897;
    position: absolute;
    top: -22.67%;
    right: -15.67%;
    width: 80%;
    height: 110%;
    z-index: 1;
    object-fit: cover;
}

.eventlinkdesktop {
    text-decoration: none;
    color: black;
    font-family: playfairdisplay;
    font-weight: bold;
    font-size: 1.3rem;
    background-color: #da7897;
    border-radius: 20px;
    padding: 10px 20px;
    position: relative;
    border: none;
    box-shadow: 2px 2px 4px 0px grey;
    margin-top: 4rem;
    text-align: center;
}

.eventlink {
    display: none;
}




/*LOKATION STARTER*/

section.forsidelokation {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 12rem;
}

section.forsidelokationtext {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 50%;
    width: 50%;
}

.lokationshr {
    border: solid 0.1rem #da7897;
    width: 36rem;
    margin-bottom: 1.5rem;
}

.lokationtekst {
    font-size: 1.3rem;
    text-align: justify;
    line-height: 1.8rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

.lokationbox {
    position: relative;
    width: 50%;
    height: 50%;
}

.lokationimg {
    border-radius: 44px;
    position: relative;
    width: 90%;
    height: 90%;
    z-index: 1;
    object-fit: cover;
    
}

.lokationlink {
    display: none;
}

.lokationlinkdesktop {
    text-decoration: none;
    color: black;
    font-family: playfairdisplay;
    font-weight: bold;
    font-size: 1.3rem;
    background-color: #da7897;
    border-radius: 20px;
    padding: 10px 20px;
    position: relative;
    border: none;
    box-shadow: 2px 2px 4px 0px grey;
    margin-top: 4rem;
    text-align: center;
}




/*REVIEW STARTER*/

section.forsidereview {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reviewh2 {
    margin-top: 12rem;
}

.reviewhr {
    border: solid 0.1rem #da7897;
    width: 36rem;
}

.reviewboks {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.boks {
    border: 3px solid #da7897;
    border-radius: 3rem;
    text-align: center;
    margin: 5rem;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 20%;
    height: 20rem;
}

p {
    font-size: 1.2rem;
}

.hatice {
 margin-top: 1.5rem;
 margin-bottom: 1rem;
 font-size: 1.5rem;
}

.lotte {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.gal {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}




/*FOOTER STARTER*/

.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;
}
}