/* html {
    overflow: hidden;
    height: 100%;
} */

body {
    margin: auto;
    overscroll-behavior: none; /*So you cant scroll over the bode showing white window*/
}

/* Type-selector(s) */
/* Selection of different headings, p-element and link element*/
h1,
h2,
h3,
p,
a,
.book-button {
    color: #122151;
    font-family: avenirNext, sans-serif, Josefin, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
}

h2 {
    /* Takes away gap between ex. intro. & about-us*/
    margin-top: 0px;
    font-size: 3.25rem;
    text-align: center;
    padding-top: 10vh;
}

h3{
    font-size: 2.25rem;
    padding-top: 2rem;
}

p {
    padding: 00 5vw;
    font-size: 1rem;
}

nav{
    position: fixed;
    width: 100%;
    transition: 0.5s ease-in; /*Makes the navbar slide in and out on scroll*/
}

/* class selector */
.top-navigation {
    background-color: #E86252;
    display: flex;
    align-items: center; /*Centers text in the nav vertically*/
    height: 10vh;
    z-index: 2;
}

/* LOGO -> CLAY STUDIO */
.top-navigation h1 {
    font-size: 1.5rem;
    flex-grow: 1;
    justify-content: center;
    margin: 00 5vw;
    padding-top: 1.5%;
    display: inline-block;
    cursor: pointer;
    /* position: relative; */
}

/* List */
.top-navigation ul {
    margin-left: 5vw;
    display: none;
    /*Undisplays/hides the links in nav-bar */
    list-style-type: none;
}

/* hamburger-button/container - class selector */
.hamburger-container {
    display: inline-block;
    cursor: pointer;
    margin-right: 5vw;
    order: 1;
    position: relative;
    z-index: 3;
}

.line1, .line2{
    width: 32px;
    height: 2px;
    background-color: #122151;
    margin: 10px 0;
    transition: 0.3s;
}

/* The lines inside of the hamburger  */
.rotate .line1{
    transform: translate(0, 6px) rotate(-45deg);
}

.rotate .line2 {
    transform: translate(0, -6px) rotate(45deg);
}

/* The menu that slides out when clicking the hamburger */
.hamburger-menu {
    background-color: #EEEBD0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    align-items: center;
    justify-content:center;
    margin-right: -100vw;
    display: none;
}

/* Animation that makes the hamburger-menu come in from right to left*/
@keyframes slide-right {
    from {
        margin-right: -100vw;
        opacity: 50%;
    }

    to {
        margin-right: 0vw;
        opacity: 100%;
    }
}

/* Animation that makes the hamburger-menu go back to the right and disappear*/
@keyframes slide-back {
    from {
        margin-right: 0vw;
    }

    to {
        margin-right: -100vw;
        display: none;
    }
}

.hamburger-menu ul {
     display: flex;
     flex-direction: column;
     row-gap: 3vh;
     padding: 0;
     position: fixed;
    /* background-color: #E86252; */
     /* margin: 0; */
}

.hamburger-menu li {
    list-style-type: none;
}

#hamburger-menu li>a {
    font-size: 46px;
}




/* ========================================================== */
/* =======================First section====================== */
/* =======================Introduction======================= */
/* ========================================================== */

/* Id-selector */
#introduction {
    background-image: url(../media-ceramics/hand-building_in_action_light.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100svh;/*90*/
    display: flex;
    justify-content: center;
    /*Places text vertically in the center of page*/
    flex-direction: column;
}

#introduction h2 {
    font-size: 3.25rem;
    margin: 00 5vw;/*Sätter margin åt vänster och höger*/
    text-align: start;
}

#introduction p {
    margin: 0;
    font-size: 1.25rem;
    margin-bottom: 16vh;
}

/* Works as a container */
#intro-text{
    width: 70%;
}




/* ========================================================== */
/* ======================== ABOUT US ======================== */
/* ========================================================== */

#about-us {
    background-color: #EEEBD0;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#about-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Adjacent sibling combinator */
/*Takes away outfilling text*/
#about-text p+p {
    display: none;
}

/* #about-text p{
    text-align: justify;
} */

#about-us h2 {
    margin-bottom: 0;
}

.aboutUs-img {
    width: 90vw;
    max-width: 400px; /*630px*/
    margin-bottom: 5vw;
}




/* ========================================================== */
/* ======================== COURSES ========================= */
/* ========================================================== */

#courses {
    background-color: #F6CDFA;
    min-height: min-content;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
}

#courses h2 {
    padding-top: 10vh;
    margin-bottom: 0;
    /* margin-left: 5vw;
    margin-right: 5vw; */
}

/* #courses .main-text{
    display: none;
} */




/* ========================================================== */
/* ======================== FIND US ========================= */
/* ========================================================== */

#find-us {
    background-color: #EEEBD0;
    min-height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#find-us h2{
    margin:0
}

#find-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#map-container{
    background-color: #E86252;
    width: 90vw;
    height: 90vw;
    max-width: 400px;
    margin-bottom: 5vw;
    overflow: hidden;
    max-height: 400px;
    padding: 0;
}

#map-container img {
    background-color: #122151;
    filter: grayscale(0.8);
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
}

#map-container img:hover{
    transform: scale(1.5);
}




/* ========================================================== */
/* ======================== FOOTER ========================== */
/* ========================================================== */

footer{
    background-color: #E86252;
    height: 100%;
    margin: 0;
    padding: 10vh 10vw;
}

#footer-summery p{
    padding: 0;
    /* text-align: justify; */
    /* font-size: small; */
    font-size: medium;
}

#copyrights{
    padding-top: 5vh;
    text-align: center;
    /* font-size: smaller; */
   }



/* ========================================================== */
/* ===================== courses page ======================= */
/* ========================================================== */

#courses-page{
    background-color: #F6CDFA;
    height: 100vh;
    width: 100%;
}




/* ========================================================== */
/* ========================= FONTS ========================== */
/* ========================================================== */

/*Font*/
@font-face {
    font-family: Josefin;
    src: url(../Josefin_Sans/static/JosefinSans-Regular.ttf);
    font-weight: 400;
    font-style: normal;
}
/*Font*/
@font-face {
    font-family: Josefin;
    src: url(../Josefin_Sans/static/JosefinSans-Bold.ttf);
    font-weight: 500;
    font-style:normal;
}

/* @font-face {
    font-family: avenirNextLight;
    src: url(../avenir-next/AvenirNextCyr-Light.ttf);
    font-weight: 400;
} */

/* @font-face {
    font-family: avenirNextThin;
    src: url(../avenir-next/AvenirNextCyr-Thin.ttf);
    font-weight: 300;
} */

@font-face {
    font-family: avenirNext;
    src: url(../avenir-next/AvenirNextCyr-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: avenirNextDemi;
    src: url(../avenir-next/AvenirNextCyr-Demi.ttf);
    font-weight: 900;
}


/* ========================================================== */
/* ====================== MEDIA QUERIE ====================== */
/* ========================================================== */

/* @media screen and (min-width: 400px){

    #find-us{
        overflow: hidden;
    }
} */

/* iPad */
@media screen and (min-width: 768px) and (max-width: 980px){

    p{
        font-size: 1.125rem;/* = 18px */
    }

   #intro-text h2{
        font-size: 67px;    /*Ceramic studio and boutique*/
   }

    #hamburger-menu li>a {
        font-size: 56px;
    }

    .aboutUs-img{
        margin-bottom: 10vw;
    }

    #about-text {
        max-width: 700px;
    }

   .main-text, footer p{
        max-width: 700px
    }

    #courses{
        min-height: min-content;
        display: flex;
    }

    #courses .main-text{
        align-self: center;
    }

}


@media only screen and (min-width: 980px) {

    p{
        /* font-size: small; */
        font-size: 1.25rem; /*20px*/
    }




    /* ========================================================== */
    /* ==================== Media Query Top nav ================= */
    /* =============== Re-arrange navbar adding links============ */
    /* ===========================980px========================== */

    /* class selector */
    .top-navigation {
        height: 12vh;
    }

    /* List */
    .top-navigation ul {
        order: 0;
        /*Puts the item to the left = first in row. */
        display: inline-block;
        /*Makes the list with links horisontal*/
        padding-left: 0;
        font-size: 0.75rem;
    }

    /* LOGO -> CLAY STUDIO */
    .top-navigation h1 {
        order: 1;
        font-size: 2.3rem;
        flex-grow: 1;
        text-align: center;
        padding-top: 1%;
    }

    /* Hamburger icon / hamburger-menu-button */
    .hamburger-container {
        order: 2;
    }

    /* The menu that slides out when clicking the hamburger */
    .hamburger-menu {
        width: fit-content;
        width: 300px;
    }

    #hamburger-menu ul a:hover{
        border-bottom: 2px solid #E86252;
    }

    #intro-text h2{
        font-size: 70px;
   }

    /* ========================================================== */
    /* ========================= About ========================== */
    /* ===========================980px========================== */

    #about-us {
        padding-bottom: 10vh;
        height: fit-content;
        margin: 0;

    }

    #about-container{
        flex-direction: row;
        gap: 4vw;
        padding: 0 5vw;
        max-width: 1000px;
    }

    #about-text {
        max-width: 50%;
    }

    #about-us p {
        padding: 00 0vw;
    }

    #about-text p+p {
        display: block;
    }

    /* image */
    .aboutUs-img {
        border-radius: 50%;
        width: 47.5vw;
        margin-bottom: 0;
    }



    /* ========================================================== */
    /* ==================== courses section ===================== */
    /* ========================min w-980px======================= */


    #courses{
        /* height: 95vh; */
        min-height: min-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #courses .main-text{
        align-self: center;
    }

    #courses>p{
        max-width: 70%;
    }



    /* ========================================================== */
    /* ======================== FIND US ========================= */
    /* ===========================980px========================== */

    #find-us {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #find-container{
        flex-direction: row;
        max-width: 1000px;
        gap: 4vw;
        padding: 0 5vw;
    }

    #location-text{
        max-width: 50%;
    }

    #find-us p {
        padding: 00 0vw;
    }

    #map-container{
        border-radius: 50%;
        padding-bottom: 0vh;
        padding-left: 0vw;
    }

    #map-container img{
        border-radius: 50%;
    }


    /* ========================================================== */
    /* ======================== FOOTER  ========================= */
    /* ==========================980px=========================== */


    #footer-summery{
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content:center;
    }

    footer{
        padding: 2vw 5vw;
    }

    #footer-summery section{
        width: 30vw;
        margin: 00 2vw
   }
}

/*
@media only screen and (min-width: 900px) {

    #about-text p, .main-text {
        font-size: 1.25rem;
    }

}

@media only screen and (min-width: 1000px) {

    #about-text p, .main-text {
        font-size: 1.4rem;
    }

}
*/
@media only screen and (min-width: 1200px) {

    #about-text p, .main-text {
        font-size: 1.15rem;
        /* font-size: medium; */
    }

}

.underscore {
    text-decoration: underline;
}