/*Denna CSS är skapad av:
            Marcus Lundin
            malu2412@student.miun.se*/


/*Design för body*/
body {
    background-color: #333; /*bakgrundsfärg*/
    color: #e5e5e5; /*Färg på text*/
    font-family: Arial, Helvetica, sans-serif; /*Font stil*/
    line-height: 1.6; /*Ökar mellanrummet mellan textrader*/
    margin: 0 auto; /*Centrerar body*/
    padding: 0; /*Tar bort inre marginal*/
    padding-top: 60px; /*60px marginal eftersom headern är fixed*/
    max-width: 1440px; /*Max bredden som body visas i*/
}
/*Design för header*/
header {
    background-image: url('pics/headbackground.jpg'); /*Bakgrundsbild*/
    background-size: cover; /*Hela bilden täcker headern*/
    background-position: 50% 20%; /*Centrerad horisontellt och något nedåt vertikalt*/
    background-repeat: no-repeat; /*Bilden repeteras inte*/
    display: flex; /*Flex-Box layout*/
    align-items: center; /*Lodrätt centrering*/
    padding: 10px 20px; /*10px mellanrum upp och ned, 20px mellanrum åt sidorna*/
    color: #e5e5e5; /*Färg på text*/
    position: fixed; /*Headern visas alltid överst*/
    top: 0;/*Fäster högst upp på skärmen*/
    left: 0;/*Fäster längst till vänster på skärmen*/
    width: 100vw;/*Täcker hela sidans övre del*/
    z-index: 1000; /*Detta värde är högt så headern alltid visas över andra element*/
    height: 60px; /*Tjockleken på headern*/
}

/*Inställningar för länkar i headern*/
header a {
    display: flex; /*Felx-box layout*/
    align-items: center; /*Lodrätt centrering*/ 
}

/*inställningar för loggan i headern*/
header img {
    max-width: 80px; /*Maxbredd*/ 
    height: auto; /*Justerar höjden automatiskt beroende på bredden*/
    margin-right: 20px; /*Mellanrum till höger om loggan*/
}

/*Design för main*/
main {
    padding: 20px; /*Mellanrum inom main element*/
}

/*Design för sectioner*/
section {
    margin-bottom: 20px; /*Mellanrum nedanför*/
    padding: 20px; /*inre avstånd*/
    background: #333; /*Bakgrundsfärg*/
    border-radius: 1px; /*Avrundning på hörnen*/
}
/*Design för rubrik 1 och 2*/
h1, h2 {
    color: #e5e5e5; /*Färg på texten*/
}
/*design för osorterad lista*/
ul {
    list-style-type: none; /*Tar bort punkterna från listan*/
    padding: 0; /*Ingen inre marginal*/
}
/*Design för objekt i osorterad lista*/
ul li {
    margin-bottom: 10px; /*Mellanrum nedanför*/
}

/*Design för navigationsfältet*/
nav {
    display: flex; /*Flex-Box layout*/
    align-items: center; /*Lodrätt centrering*/
    flex-grow: 1; /*Tillåter nav att växa för att fylla ut ledigt utrymmme*/
    justify-content: flex-start; /*Innehållet justeras horizontellt till vänster*/
}

/*Gör om listan till liggandes och tart bort punkterna*/
nav ul {
    display: flex; /*Flex-Box layout*/
    list-style-type: none; /*Tar bort punkterna*/
    margin: 0; /*Inget mellanrum*/
    padding: 0; /*Ingen inre marginal*/
}
/*Design för objekt i osorterad lista i navigationsfältet*/
nav ul li {
    margin: 0 10px; /*Ingen marginal upp och ner men 10px åt sidorna*/
}

/*Design på länkarna i Nav*/
nav ul li a { 
    text-decoration: none; /*Tar bort understrykningarna på länkarna*/
    color: #e5e5e5; /*Färg på länkarna*/
    padding: 10px 15px; /*10px mellanrum ovanför och nedanför, 15px mellanrum åt sidorna*/
    display: block; /*Block som visas och är klickbar*/
    transition: background-color 0.3s ease, color 0.3s ease; /*Mjuk övergång*/
    border-radius: 5px; /*Hörnen på blocket är rundade*/
}

/*Inställningar för när musen är på länken*/
nav ul li a:hover {
    background-color: #575757; /*Bakgrundsfärg*/
    color: #e5e5e5; /*Färg på texten*/
    border-radius: 5px; /*Hörden är rundade*/
}
/*inställningar för footern*/
footer {
    text-align: center; /*Horisontell centrering*/
    padding: 10px; /*Inre mellanrum i elementet*/
    background: #333; /*Bakgrundsfärg*/
    color: #e5e5e5; /*Färg på texten*/
    
}

/*Inställningar för footern*/
footer a {
    color: #e5e5e5; /*Färg på texten*/
    text-decoration: none; /*Ingen understräck på länkar*/
}
/*När man har musen över länkar i footern*/
footer a:hover {
    color: #575757; /*Färg på texten*/
}
/*Design för Historia-segmentet på index sidan*/
#history .content {
    display: flex; /*Flex-Box layout*/
    flex-direction: row; /*Ordnar barn-element horisontellt */
    align-items: flex-start; /*Justeras vertikalt vid toppkanter*/
    gap: 20px; /*Mellanrum på 20px mellan barnen*/
    background: #333;/*bakgrundsfärg*/
    padding: 20px; /*20px inre marginal*/
    border-radius: 10px; /*Rundar av hörnen*/
    margin-bottom: 20px; /*20px mellanrum nedtill*/
}
/*Design för bilderna*/
#history img {
    float: left; /*Bild till vänster och låter texten 'flyta' runt*/
    margin-right: 15px; /*15px mellanrum åt höger*/
    max-width: 300px; /*maxbredd på 300px*/
    height: auto; /*justerar höjden automatiskt beroende på bildens bredd*/
    border-radius: 10px; /*Rundar av hörnen*/
}
/*Design för texten*/
#history .text {
    flex: 1; /*Fyller ut texten*/
    color: #e5e5e5; /*Färg på texten*/
    overflow: hidden; /*Begränsar så texten inte visas utanför behållaren*/
}
/*Design för rubriken i history*/
#history h2 {
    margin-top: 20px; /*20px mellanrum ovnaför*/
    color: #e5e5e5; /*Färg på texten*/
}
/*Design för osorterad list i history*/
#history ul {
    list-style-type: disc; /*Punkter före listobjekten*/
    padding-left: 20px; /*20px mellanrum till vänster*/
    margin-top: 10px; /*10px mellanrum ovanför*/
}
/*Design för listobjekt i osorterad lista*/
#history ul li {
    margin-bottom: 10px; /*10px mellanrum mellan listobjekten*/
    line-height: 1.5; /*Ökar radavståndent*/
}

/*Design för tradition-segmentet på index sidan*/
#traditions .content {
    display: flex; /*Flex-Box layout*/
    align-items: flex-start; /*Justerar barnelementen vertikalt vid övre kanten*/
    gap: 20px; /*20px mellanrum mellan barn-element*/
    background: #333;/*Bakgrundsfärg*/
    padding: 20px; /*20px inre avstånd runt innehållet*/
    border-radius: 1px; /*Rundar av hörnet*/
}
/*Desogm för bilden*/
#traditions img {
    max-width: 300px;/*maxbredd satt till 300px*/
    height: auto; /*Höjden ändras automatiskt beroende på skärmstorleken*/
    border-radius: 10px; /*Rundar av hörnet*/
}

/*Design för today segmentet på index sidan*/
#today .content {
    display: block; /*Elementet visas som block*/
    margin-bottom: 20px; /*20px mellanrum under segmentet*/
}
/*Design för bilderna*/
#today img {
    float: left; /*Bild till vänster och låter texten 'flyta' runt bilden*/ 
    margin: 0 20px 20px 0; /*0px mellanrum upptill, 20px mellanrum till höger, 20px nedanför, 0px mellanrum till vänster*/
    max-width: 300px; /*Maxbredd satt till 300px*/
    height: auto; /*Höjden justeras automatiskt beroende på hur stor skärmen är*/
    border-radius: 10px;/*Rundar av hörnen*/
}
/*Design för texten*/
#today .text {
    overflow: auto; /*Skrollbar aktiveras vid behov*/
}
/*Design för rubrikerna*/
#today h2, #today h3 {
    margin-top: 0; /*Inget mellanrum ovanför*/
    color: #e5e5e5; /*Färg på texten*/
}
/*Design för osorteradlista*/
#today ul {
    list-style-type: disc; /*Punktlista*/
    padding-left: 20px; /*Mellanrum till vänster */
    margin-top: 10px; /*Mellanrum ovanför*/
}
/*Design för listobjekten i osorterad lista*/
#today ul li {
    margin-bottom: 10px; /*Mellanrum på 10px mellan objekten*/
}
/*Design för paragrafelementet*/
#today p {
    margin-bottom: 15px; /*Mellanrum mellan varje paragraf*/
    line-height: 1.6; /*Radavstånd för läsbarhet*/
}

/*Design för hamburgemenyn*/
.menu-toggle {
    display: none; /*Dold element som standard*/
    justify-content: center; /*Horisontell centrering vid användning av flex*/
    align-items: center;/*Vertikal centrereing vid användning av flex*/
    width: 40px; /*Maxbredd på 40px*/
    height: 40px; /*Maxhöjd på 40px*/
    background-color: #575757; /*Bakgrundsfärg*/
    color: #e5e5e5; /*Färg på texten*/
    font-size: 24px; /*Storlek på teckensnittet*/
    border-radius: 5px; /*Avrundade hörn*/
    cursor: pointer; /*Ändrar muspekaren till en hand vid hover*/
    
}
/*Designinställninar för lounge-intro på lounge.html*/
#lounge-intro .content {
    display: flex; /*Flexbox används för hantering av layout*/
    flex-direction: row; /*Elementen hamnar i horisontell rad*/
    align-items: flex-start; /*Justerar början av innehållet till containerhöjden*/
    gap: 20px; /*Mellanrum mmellan elementen satt till 20px*/
    background: #333; /*Bakgrundsfärg för sektionen*/
    padding: 20px; /*Inre marginal på 20px runt innehållet*/
    border-radius: 10px;; /*Rundar hörnen*/
    margin-bottom: 20px; /*Mellanrum på 20px under sektionen*/
    text-align: center; /*Centrerar texten*/
}
/*Design för bilden*/
#lounge-intro img {
    float: left; /*Bild flyttas till vänster om texten*/
    margin-right: 15px; /*Mellanrum på 15px till höger om bilden*/
    max-width: 300px; /*Maxbredd satt till 300px*/
    height: auto; /*Höjden justeras proportionellt till bredden*/
    border-radius: 5px; /*Rundar bildens hörn med 5px*/
}

/*Design för texten*/
#lounge-intro .text {
    flex: 1; /*Elementet fylls ut i flexbehållaren*/
    color: #e5e5e5; /*Textfärg */
    overflow: hidden; /*Innehåll utanför elementet döljs*/
}

/*Designinställningar för bar segmentet på lounge.html*/
#lounge-bar .content {
    display: flex; /*Flexbox används för layouten*/
    align-items: flex-start; /*Elementen justeras till toppen av flexbehållaren*/
    gap: 20px; /*Mellanrum mellan elementen satt till 20px*/
    background: #333; /*Bakgrundsfärg*/
    padding: 20px; /*Inre marginal på 20px runt innehållet*/
    border-radius: 10px; /*Rundar hörnen*/
}

/*Designinställningar för bilderna*/
#lounge-bar .lounge-bar-images {
    display: grid; /*Gridlayout används för bildplaceringen*/
    grid-template-columns: repeat(2, 1fr); /*Två kolumner med lika fördelning av platsen*/
    grid-template-rows: auto auto auto; /*Tre rader med automatisk höjd*/
    grid-template-areas: 
        "img1 img2" /*Första raden */
        "img3 img4" /*Andra raden r*/
        "img3 img5"; /*Tredje raden */
    grid-gap: 10px; /*Mellanrum på 10px mellan bilderna*/
    max-width: 600px; /*Maximal bredd för layouten är 600px*/
    margin: 0 auto; /*Centrerar gridbehållaren horisontellt*/
    padding: 0; /*Tar bort inre marginaler*/
}

#lounge-bar .lounge-bar-images img {
    width: 100%; /*Bilden fyller hela sin föräldracontainers bredd*/
    height: auto; /*Höjden anpassas efter bredden*/
    border-radius: 10px; /*Rundar bhörnen*/
    margin: 0; /*Inga yttre marginaler*/
    padding: 0; /*Inga inre marginaler*/
    box-sizing: border-box; /*Inkluderar padding och border elementet*/
}

/*Specifika inställningar för bilderna*/
#lounge-bar .lounge-bar-images a:nth-child(1) {
    grid-area: img1; /* Anger att den första bilden ska placeras i området "img1" */
}

#lounge-bar .lounge-bar-images a:nth-child(2) {
    grid-area: img2; /* Anger att den andra bilden ska placeras i området "img2" */
}

#lounge-bar .lounge-bar-images a:nth-child(3) {
    grid-area: img3; /* Anger att den tredje bilden ska placeras i området "img3" */
}

#lounge-bar .lounge-bar-images a:nth-child(4) {
    grid-area: img4; /* Anger att den fjärde bilden ska placeras i området "img4" */
    margin-top: -10px; /* Justerar bildens position uppåt med 10px */
}

#lounge-bar .lounge-bar-images a:nth-child(5) {
    grid-area: img5; /* Anger att den femte bilden ska placeras i området "img5" */
    align-self: start; /* Justerar bilden till början av sin rad */
    margin-top: -55px; /* Justerar bildens position uppåt med 55px */
}

/*Designinställningarna för texten*/
#lounge-bar .text {
    flex: 1; /* Texten tar upp resterande utrymme */
}

/*Designinställningar för drinklistan*/
.drinks {
    list-style-type: none; /*Tar bort standardpunkter */
    padding: 0; /*Tar bort inre marginaler */
    margin: 0; /*Tar bort yttre marginaler */
}

.drinks > li {
    margin-bottom: 20px; /*Mellanrum på 20px under varje listobjekt*/
}

.drinks > li > strong {
    font-size: 18px; /*Textstorleken satt till 18px*/
    color: aliceblue; /*Färg på texten*/
}

/*Designinställningar för underlistor*/
.drinks > li > ul {
    list-style-type: disc; /*Underlistor använder punkter som lista*/
    padding-left: 20px; /*Mellanrum på 20px till vänster */
    margin-top: 10px; /*Mellanrum på 10px ovanför */
}

.drinks > li > ul > li {
    margin-bottom: 5px; /*Mellanrum på 5px under varje underlisteobjekt*/
    font-size: 16px; /*Storleken på texten satt till 16px*/
}

/*Designinställningar för lounge experience segmentet på lounge.html*/
#lounge-experience {
    background: #333; /*Bakgrundsfärg */
    color: #e5e5e5; /*Färg påt ext*/
    padding: 40px 20px; /*Inre marginal på 40px ovanför/under och 20px på sidorna*/
    border-radius: 10px; /*Rundar hörnen */
    max-width: 800px; /*Maxbredd satt till 800px*/
    margin: 40px auto; /*Lägger till 40px marginal ovanför/under och centrerar horisontellt*/
    line-height: 1.8; /*Sätter radavståndet till 1.8 för bättre läsbarhet*/
}

/*Design för bilden*/
#lounge-experience img {
    float: left; /*Bilden placeras till vänster om texten*/
    margin: 0 20px 20px 0; /*Mellanrum runt bilden: 0px ovanför, 20px till höger, 20px under och 0px till vänster*/
    max-width: 300px; /*Maximal bredd för bilden är 300px*/
    height: auto; /*Höjden justeras proportionellt efter bredden*/
    border-radius: 10px; /*Rundar hörnen med en radie på 10px*/
}

/*Design för rubriken*/
#lounge-experience h2 {
    font-size: 28px; /*Textstorleken för rubriken sätts till 28px*/
    margin-bottom: 20px; /*Lägger till ett mellanrum på 20px under rubriken*/
    color: #e5e5e5; /*Textfärgen sätts till ljusgrå (#e5e5e5)*/
    text-align: center; /*Centrerar rubriken horisontellt*/
}

/*Design för paragrafen*/
#lounge-experience p {
    font-size: 18px; /*Textstorleken för paragrafen sätts till 18px*/
    margin-bottom: 20px; /*Lägger till ett mellanrum på 20px under paragrafen*/
}

/*Design för listan*/
#lounge-experience ul {
    list-style-type: disc; /*Listan använder punkter som lista*/
    padding-left: 20px; /*Lägger till ett mellanrum på 20px till vänster om listan*/
}

/*Design för underlistan*/
#lounge-experience ul li {
    margin-bottom: 10px; /*Lägger till ett mellanrum på 10px under varje listobjekt*/
    font-size: 16px; /*Textstorleken för listobjekten sätts till 16px*/
}

/*Design för contact.html*/
#contact .content {
    display: flex; /*Flexbox används för att hantera layouten*/
    flex-direction: row; /*Elementen placeras i en horisontell rad*/
    align-items: flex-start; /*Justerar elementen till toppen av flexbehållaren*/
    gap: 20px; /*Lägger till ett mellanrum på 20px mellan elementen*/
    background: #333; /*Bakgrundsfärgen sätts till mörkgrå (#333)*/
    padding: 20px; /*Inre marginal på 20px runt innehållet*/
    border-radius: 10px; /*Rundar hörnen med en radie på 10px*/
    margin-bottom: 20px; /*Lägger till ett mellanrum på 20px under sektionen*/
    text-align: center; /*Centrerar texten horisontellt*/
}
/*Designf för bilden*/
#contact img {
    float: left; /*Bilden placeras till vänster om texten*/
    margin: 0 20px 20px 0; /*Mellanrum runt bilden: 0px ovanför, 20px till höger, 20px under och 0px till vänster*/
    max-width: 300px; /*Maximal bredd för bilden är 300px*/
    height: auto; /*Höjden justeras proportionellt efter bredden*/
    border-radius: 10px; /*Rundar hörnen med en radie på 10px*/
}
/*Design för texten*/
#contact .text {
    flex: 1; /*Textbehållaren tar upp all återstående plats i flexbehållaren*/
    color: #e5e5e5; /*Textfärgen sätts till ljusgrå (#e5e5e5)*/
    overflow: hidden; /*Döljer innehåll som går utanför behållarens gränser*/
}
/*Design för paragraf*/
#contact p {
    font-size: 18px; /*Textstorleken för paragrafen sätts till 18px*/
    margin-bottom: 20px; /*Lägger till ett mellanrum på 20px under paragrafen*/
}

/*Inställningar för listan*/
#contact ul {
    list-style-type: disc; /*Listan använder punkter som lista*/
    padding-left: 20px; /*Lägger till ett mellanrum på 20px till vänster om listan*/
}

/*Inställningar för underlistan*/
#contact ul li {
    margin-bottom: 10px; /*Lägger till ett mellanrum på 10px under varje listobjekt*/
    font-size: 16px; /*Textstorleken för listobjekten sätts till 16px*/
}

/*Responsiva inställningar*/
/*Inställningar för menyer och sektioner vid max bredd 768px */
@media (max-width: 768px) {
    /* Header och navigationsmenyn */
    header {
        flex-direction: row; /*Elementen placeras horisontellt*/
        justify-content: space-between; /*Jämnt utrymme mellan elementen*/
        align-items: center; /*Centrerar elementen vertikalt*/
    }

    .menu-toggle {
        display: flex; /*Gör hamburgermenyn synlig*/
        justify-content: center; /*Centrerar ikonen horisontellt*/
        align-items: center; /*Centrerar ikonen vertikalt*/
        width: 40px; /*Hamburgermenyns bredd*/
        height: 40px; /*Hamburgermenyns höjd*/
        background-color: #575757; /*Bakgrundsfärg på hamburgermenyn*/
        color: #e5e5e5; /*Färgen på ikonen*/
        font-size: 24px; /*Ikonens storlek*/
        border-radius: 5px; /*Rundar hörnen*/
        cursor: pointer; /*Ändrar muspekaren till en hand vid hover*/
        transition: transform 0.3s ease-in-out; /*Lägger till en mjuk animation vid rotation*/
    }

    .menu-toggle.open {
        transform: rotate(90deg); /*Roterar hamburgermenyn 90 grader när den är öppen*/
    }

    nav ul {
        display: none; /*Gömmer navigationsmenyn som standard*/
        flex-direction: column; /*Visar menyalternativ i en vertikal lista*/
        width: 100%; /*Listan fyller hela bredden*/
        background-color: rgba(51, 51, 51, 0.9); /*Transparent bakgrundsfärg*/
        position: absolute; /*Positionerar listan relativt till dess container*/
        top: 60px; /*Placerar listan direkt under headern*/
        left: 0; /*Justerar listan till vänsterkanten*/
    }

    nav ul.open {
        display: flex; /*Visar navigationsmenyn när den är öppen*/
    }

    nav ul li {
        margin: 5px 0; /*Lägger till mellanrum mellan menyalternativen*/
        text-align: center; /*Centrerar texten i menyalternativen*/
    }

    nav ul li a {
        padding: 15px; /*Lägger till inre marginaler för klickytan*/
        border-bottom: 1px solid #575757; /*Understreck mellan menyalternativen*/
    }

    /* Sektioner */
    #history .content,
    #traditions .content,
    #today .content,
    #lounge-intro .content,
    #lounge-bar .content,
    #lounge-experience,
    #contact {
        display: block; /*Visar sektionerna som block för full bredd*/
        text-align: center; /*Centrerar texten i sektionerna*/
    }

    /* Inställningar för bilder */
    #history img,
    #traditions img,
    #today img,
    #lounge-intro img,
    #lounge-bar img,
    #lounge-experience img,
    #contact img {
        float: none; /*Tar bort flyteffekt för bilder*/
        margin: 0 auto 20px; /*Centrerar bilder och lägger till mellanrum under dem*/
        max-width: 100%; /*Gör bilderna responsiva*/
        height: auto; /*Behåller bildens proportioner*/
        display: block; /*Visar bilderna som blockelement*/
    }

    #lounge-bar .lounge-bar-images {
        display: grid; /*Gridlayout för bilderna*/
        grid-template-columns: 1fr; /*En kolumn för bilderna*/
        grid-gap: 10px; /*Mellanrum mellan bilderna*/
    }

    #lounge-bar .lounge-bar-images img {
        display: none; /*Gömmer bilderna som standard*/
    }

    #lounge-bar .lounge-bar-images a:nth-child(3) img {
        display: block; /*Visar endast den tredje bilden*/
    }

    /* Listor */
    #lounge-experience ul {
        padding-left: 0; /*Tar bort indrag på listan*/
        text-align: center; /*Centrerar listan*/
    }

    #lounge-experience ul li {
        margin: 10px 0; /*Mellanrum mellan listobjekten*/
    }

    /* Text och rubriker */
    h1, h2 {
        font-size: 18px; /*Minskar rubrikstorleken för mindre skärmar*/
    }

    p {
        font-size: 14px; /*Minskar textstorleken för mindre skärmar*/
        line-height: 1.4; /*Reducerar radavståndet*/
    }

    /* Footer */
    footer {
        text-align: center; /*Centrerar texten i sidfoten*/
        padding: 15px; /*Lägger till inre marginal för bättre läsbarhet*/
        font-size: 12px; /*Minskar textstorleken för sidfoten*/
    }
}

/* Inställningar för mindre mobiler (max-width: 576px) */
@media (max-width: 576px) {
    body {
        font-size: 14px; /*Justerar grundtextstorleken för små skärmar*/
    }

    header img {
        max-width: 60px; /*Begränsar headerbildens bredd till 60px*/
    }

    section {
        padding: 10px; /*Minskar inre marginal för sektionerna*/
    }

    h1, h2 {
        font-size: 16px; /*Reducerar rubrikstorleken ytterligare*/
    }

    p {
        font-size: 12px; /*Reducerar textstorleken för paragrafer*/
        line-height: 1.3; /*Minskar radavståndet för paragrafer*/
    }

    #lounge-intro .content,
    #lounge-experience {
        padding: 10px; /*Minskar inre marginaler för dessa sektioner*/
        text-align: center; /*Centrerar innehållet*/
    }

    #lounge-experience ul {
        padding-left: 0; /*Tar bort indrag på listan*/
        text-align: center; /*Centrerar listan*/
    }

    #lounge-bar .lounge-bar-images img {
        max-width: 100%; /*Gör bilderna responsiva*/
    }
}