@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

/* Allmäna inställningar*/
body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    font-family: "Poppins", arial;
    box-sizing: border-box;
    background-color: white;
    transition: background-color 0.3s ease;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

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

img {
    width: 100%;
}

/*När användaren scrollar ner*/
.changeColor {
    background-color: black;
}

.changetextColor {
    color: white;
}

.changeFill {
    filter: invert(100%) sepia(89%) saturate(128%) hue-rotate(200deg) brightness(121%) contrast(100%);
}

/*Meny*/
.nav-container a {
    color: black;
    font-size: 1.1em;
}

header {
    display: flex;
    justify-content: space-between;
    padding: 2em;
    padding-bottom: 1em;
}

header .logo {
    width: 36px;
    padding: 0;
}

header ul {
    display: flex;
}

header ul a {
    display: block;
    margin: 0 1em;
    color: black;
}

/*Styling aktiv länk*/
a:hover {
    color: rgb(122, 122, 122);
}

a:active {
    color: rgb(49, 49, 49);
}

/*Header med text och pil*/
.hero {
    color: black;
    padding: 0 2em;
    height: 100vh;
    position: relative;
    margin-right: 2em;
}

.hero h1 {
    font-weight: 300;
    font-size: 3em;
    line-height: 1.1em;
    margin-right: .5em;
}

.hero p {
    font-weight: 300;
    font-size: 1.25em;
    margin-right: 3em;
    line-height: 1.3em;
}

.hero .smaller {
    font-weight: 400;
    font-size: 1.1em;
    transition: all .2s ease-in-out;
    display: inline-block;
    text-decoration: underline;
    text-underline-offset: 10px;
}

.hero .smaller:hover {
    transform: scale(1.2);
    cursor: pointer;
    font-weight: 700;
}


/*Varje sektion med projekt*/
section {
    padding: 4em 2em;
    overflow: hidden;
}

.project-container {
    text-align: center;
}

.project-title {
    font-weight: 400;
    font-size: 1.4em;
    margin-bottom: 1em;
    text-align: left;
    width: 90%;
}

.right-arrow {
    max-width: 2.5%;
    margin-left: .5em;
    fill: black;
}

.hidden {
    display: none;
}

/*Inställningar för de olika bilderna på startsidan*/
.img-interrail {
    max-width: 80%;
}

.img-torpa {
    max-width: 90%;
}

.img-adios {
    max-width: 80%;
}

.img-airbnb {
    width: 140%;
    margin-left: -20%;
}

/*Nedersta sektionen med namn och kontakt*/
.info {
    margin-top: 10em;
    margin-bottom: 5em;
}

.info-large {
    font-size: 1.5em;
    line-height: 1.3em;
    margin-bottom: 1.5em;
}

/*Footer*/
footer {
    padding: .2em 2em;
    text-align: center;
    font-size: .8em;
    border-top: .1em solid rgb(0, 0, 0, 0.1);
}

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

    /*Header text och pil startsida*/
    .hero h1 {
        font-size: 3.3em;
        margin-right: 1.4em;
    }

    .hero p {
        font-size: 1.4em;
        margin-right: 4.4em;
    }

    .project-title {
        width: 75%;
    }

    /*Nedersta sektionen med namn och kontakt*/
.info a {
    font-size: 1.2em;
    }

}

@media only screen and (min-width: 600px) {
    /*Titel för projekten startsida*/
    .project-title {
        width: 60%;
    }

    .hero h1 {
        margin-right: 3em;
    }

    .hero p {
        margin-right: 8em ;
    }

    /*Inställningar för de olika bilderna på startsidan*/
    .img-interrail {
        max-width: 60%;
    }

    .img-torpa {
        max-width: 70%;
    }

    .img-adios {
        max-width: 60%;
    }
}

@media only screen and (min-width: 690px) {
    /*Margin*/
    .hero {
        padding: 2em 3em;
    }

    section {
        padding: 4em 3em;
    }

    /*Projekt rubrik*/
    .project-title {
        width: 55%;
    }

    /*Mindre texten i headern*/
    .hero p {
        margin-right: 10em;
    }
}

@media only screen and (min-width: 800px) {
    /*Bredd projekt rubrik startsida*/
   .project-title {
       width: 52%;
   }

   /*Inställningar för de olika bilderna på startsidan*/
   .img-interrail {
    max-width: 50%;
    }

    .img-torpa {
        max-width: 60%;
    }

    .img-adios {
        max-width: 25%;
    }

     /*Bilder på prototyp på startsida*/
     .hidden {
        display: unset;
    }

    .mockup-row-full {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120%;
        margin-left: -10%;
        gap: 20px;
    }

    .mockup-row-full img {
        width: 19%;
    }

    .mockup-row img {
        width: 45%;
    }

    .mockup-row .img-adios-mb {
        width: 65%;
    }

    /*Interrail mockup row*/
    .mockup-row {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 15px;
    }

    /*Margin top för info längst ner*/
    .info {
        margin-top: 20em;
    }
       
}

@media only screen and (min-width: 900px) {
    .project-title {
        width: 40%;
    }
}

@media only screen and (min-width: 1000px) {
     /*Margin*/
     header {
         padding: 2em 4em;
         padding-bottom: 7em;
     }

    .hero {
        padding: 0em 4em;
        height: 70vh;
    }

    section {
        padding: 4em 4em;
    }

    /*Bredd header mindre text */
    .hero p {
        margin-right: 15em;
    }

    /*Storlek på bilder startsida*/
    .img-torpa {
        max-width: 50%;
    }
}

@media only screen and (min-width: 1200px) {
    /*Margin*/
    header {
        padding: 2em 6em;
        padding-bottom: 8em;
    }

   .hero {
       padding: 0em 6em;
       height: 68vh;
   }

   section {
       padding: 4em 6em;
   }

     /*Bredd och storlek huvudrubrik startsida*/
     .hero h1 {
         margin-right: 3.5em;
         font-size: 4em;
         margin-bottom: .5em;
     }

   /*Bredd och storlek header mindre text */
   .hero p {
       margin-right: 20em;
       font-size: 1.6em;
       margin-top: 0;
   }

   /*Bredd och storlek text startsida*/
   .project-title {
       font-size: 1.8em;
       width: 35%;
   }
   .info-large {
   font-size: 1.9em;
   }

   .info a {
       font-size: 1.4em;
   }

   footer {
       font-size: 1em;
   }

   /*Interrail grid*/
   .mockup-row-full {
    width: 125%;
    margin-left: -12.5%;
    }

     /*Margin top för info längst ner*/
     .info {
        margin-top: 23em;
    }
}

@media only screen and (min-width: 1500px) {
      /*Margin*/
      header {
        padding: 2em 10em;
        padding-bottom: 9em;
        }

    .hero {
        padding: 0em 10em;
    }

    section {
        padding: 4em 10em;
    }

   /*Storlek meny*/
   .nav-container a {
    font-size: 1.2em;
    }   

    /*Storlek logga*/
    header .logo {
        width: 45px;
    }

    /*Interrail grid*/
    .mockup-row-full {
        width: 134%;
        margin-left: -17%;
        gap: 30px;
    }

   /*Storlek bilder startsida*/
   .img-torpa
   {
       max-width: 40%;
   }

   .img-adios {
       max-width: 23% ;
   }

   .img-adios-mb {
       max-width: 65%;
   }

   /*Storlek på infå längst ner på startsidan*/
   .info-large {
    font-size: 2em;
    }
 
    .info a {
        font-size: 1.6em;
    }
}

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

    /*Höjd hero*/
    .hero {
    height: 65vh;
    }

    /*Bredd header*/
    .hero h1 {
        margin-right: 5em;
    }

    .hero p {
        margin-right: 25em;
    }

        /*Interrail grid*/
        .mockup-row-full {
            gap: 35px;
        }
}

@media only screen and (min-width: 1700px) {
     /*Margin*/
     header {
        padding: 2em 15em;
        padding-bottom: 9em;
    }

   .hero {
       padding: 0em 15em;
   }

   section {
       padding: 4em 15em;
   }

        /*Bredd header*/
        .hero h1 {
            margin-right: 6em;
        }


       /*Interrail grid*/
        .mockup-row-full {
            width: 144%;
            margin-left: -22%;
        }

    }

    @media only screen and (min-width: 2000px) {
        /*Margin*/
        header {
            padding: 2em 18em;
            padding-bottom: 15em;
            
        }

        .hero {
        padding: 0em 18em;
        }

        section {
        padding: 4em 18em;
        }

                /*Storlek meny*/
                .nav-container a {
                    font-size: 1.6em;
                    }   
                
                    /*Storlek logga*/
                    header .logo {
                        width: 58px;
                    }

            /*Bredd och storlek text startsida*/

            .hero h1 {
                font-size: 4.5em;
            }

            .hero p {
                font-size: 2em;
                margin-right: 20em;
            }
            
            .hero .smaller {
                font-size: 1.5em;
            }

            .project-title {
                font-size: 2.1em;
                width: 30%;
            }

            .info-large {
            font-size: 2.5em;
            }

            .info a {
                font-size: 2em;
            }

            footer {
                font-size: 1.2em;
            }

                    /*Storlek meny*/
        .nav-container a {
            font-size: 1.5em;
            }   
        
            /*Storlek logga*/
            header .logo {
                width: 55px;
            }
    }

    @media only screen and (min-width: 2100px) { 
         /*Margin*/
         header {
            padding: 2em 20em;
            padding-bottom: 15em;
        }

        .hero {
        padding: 0em 20em;
        }

        section {
        padding: 4em 20em;
        }

        /*storlek text startsida*/

        .hero h1 {
            font-size: 4.8em;
        }

    }

    @media only screen and (min-width: 2400px) { 
        /*Margin*/
        header {
           padding: 2em 23em;
           padding-bottom: 16em;
       }

       .hero {
       padding: 0em 23em;
       }

       section {
       padding: 4em 23em;
       }

       /*storlek text startsida*/

       .hero h1 {
           font-size: 6em;
       }

       .hero p {
        font-size: 2.5em;
        margin-right: 20em;
    }
    
    .hero .smaller {
        font-size: 2em;
    }

    .project-title {
        font-size: 2.8em;
        width: 33%;
    }

    .info-large {
    font-size: 3em;
    }

    .info a {
        font-size: 2.7em;
    }

    footer {
        font-size: 1.6em;
    }

            /*Storlek meny*/
            .nav-container a {
                font-size: 2em;
                }   
            
                /*Storlek logga*/
                header .logo {
                    width: 75px;
                }

   }

    /*SLUT PÅ MEDIA QUERIES*/

    /*Animation när sidan laddas*/
.fadeInLeft {
    -webkit-animation: fadeInLeft 1.2s both;
    -moz-animation: fadeInLeft 1.2s both;
    -o-animation: fadeInLeft 1.2s both;
    animation: fadeInLeft 1.2s both; 
}

.nav-container a {
    animation: nav-load 500ms ease-out;
}

 /*DENNA ANIMATION ANVÄNDS INTE JUST NU. LÄGG TILL SOM CLASS PÅ DOWN-ARROW OM DEN SKA ANVÄNDAS
 .fadeInBottom {
    -webkit-animation: fadeInBottom .8s both;
    -moz-animation: fadeInBottom .8s both;
    -o-animation: fadeInBottom .8s both;
    animation: fadeInBottom .8s both; 
}
*/

/*Exkludera nedåt pil från animation från vänster*/
.hide-left {
    -webkit-animation: anti-move-left 1.2s both;
    -moz-animation: anti-move-left 1.2s both;
    -o-animation: anti-move-left 1.2s both;
    animation: anti-move-left 1.2s both
}

/*Animation när man scrollar*/
.fade-in-section {
    opacity: 0;
    transform: translateY(20vh);
    visibility: hidden;
    transition: opacity 0.6s ease-out, transform 1.2s ease-out;
    will-change: opacity, visibility;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
    visibility: visible;
}

/*Animation hero*/
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
@-o-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*Ta bort animation från vänster på nedåtpil*/
@-webkit-keyframes anti-move-left {
    0% {
        opacity: 1;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@-moz-keyframes anti-move-left {
    0% {
        opacity: 1;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@-o-keyframes anti-move-left {
    0% {
        opacity: 1;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes anti-move-left {
    0% {
        opacity: 1;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*Animation pil hero ANÄNDS INTE JUST NU. TA BORT KOMMENTAR OCH LÄGG TILL CLASS PÅ DOWN-ARROW OM DEN SKA ANVÄNDAS.
@-webkit-keyframes fadeInBottom {
    0% {
        opacity: 0;
        transform: translateY(1000px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@-moz-keyframes fadeInBottom {
    0% {
        opacity: 0;
        transform: translateY(1000px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@-o-keyframes fadeInBottom {
    0% {
        opacity: 0;
        transform: translateY(1000px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInBottom {
    0% {
        opacity: 0;
        transform: translateY(1000px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
*/

/*Animation navigation*/
@-webkit-keyframes nav-load {
    0% {
        -webkit-transform: translateY(-200%);
    }

    100% {
        -webkit-transform: translateY(0);
    }
}
@-moz-keyframes nav-load {
    0% {
        -moz-transform: translateY(-200%);
    }

    100% {
        -moz-transform: translateY(0);
    }
}
@-o-keyframes nav-load {
    0% {
        -o-transform: translateY(-200%);
    }

    100% {
        -o-transform: translateY(0);
    }
}

@keyframes nav-load {
    0% {
        transform: translateY(-200%);
    }

    100% {
        transform: translateY(0);
    }
}

/*Till animering on scroll*/

.project, .info {
    opacity: 0;
    transform: translateY(150px);
    transition: 1s ease-out;
  }
  
  .project.scrolled, .info.scrolled {
      transform: translateY(0);
    opacity: 1;
  }