@charset "UTF-8";

body {
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 50px repeat(4, 1fr) 50px;
    grid-template-rows: 60px 700px 80px minmax(0, auto) auto;
    grid-template-areas:
        "nav nav nav nav nav nav"
        "header header header header header header"
        "text text text text text text"
        ". content24 content23 content22 content21  ."
        "footer footer footer footer footer footer";
    gap: 0 20px;

}

#Navbar {
    grid-area: nav;
    position: sticky;
    z-index: 1000;

    width: 100%;
    background-color: rgb(255, 255, 255);


    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 2px solid #333;


}

.nav-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-left h1:hover {
    color: #EF6F39;
}

.logo {
    width: 60px;
}



.navlocation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-left: 40px;
}

.location-icon {
    width: 30px;
    opacity: 0.9;
    flex-shrink: 0;
}

.nuvarandeplats {
    color: #EF6F39;
    margin: 0;
    font-size: 14px;
}

.navcity {
    margin: 0;
    font-size: 16px;
}

.navigationslinks {
    display: flex;
    gap: 10px;
    list-style: none;
    margin-left: auto;
    margin-right: 20px;
}

.navigationslinks a {
    text-decoration: none;
    color: #333;
    font-size: 20px;
    padding: 8px 40px;
    border: 2px solid transparent;
}

.navigationslinks a:hover {
    color: white;
    border: 2px solid rgba(199, 36, 199, 0.876);
    background-color: rgba(199, 36, 199, 0.876);
    border-radius: 15px;
}

nav a.thisPage {
    color: white;
    border: 2px solid #EF6F39;
    background-color: #EF6F39;
    border-radius: 15px;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 100%;
    background-size: 100%;
    background-image: url(../img/blabla2.png);
    background-position: center;
    max-height: none;
    grid-area: header;
}

.titel1 {
    color: white;
    font-size: 70px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 70px;

}

.titel2 {
    color: #fb923c;
    font-size: 70px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 70px;

}

.undertitel {
    color: white;
    font-size: 24px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 50px;
    margin-left: 300px;
    margin-right: 300px;

}

.inläggknapp {
    font-size: 20px;
    margin-right: 10px;
    margin-top: 30px;
    padding: 15px 40px;
    border-radius: 15px;
    border: none;
    display: inline-block;
    background-color: #EF6F39;
    color: white;
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s;

}


.inläggknapp:hover {
    transform: scale(1.15);
    background-color: #ef6f39da;
    z-index: 100;
}


.ommigknapp {
    font-size: 20px;
    margin-left: 10px;
    margin-top: 30px;
    padding: 10px 30px;
    border-radius: 15px;
    border: 2px solid white;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.156);
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.ommigknapp:hover {
    background-color: rgba(255, 255, 255, 0.395);
}


#lastpost {
    grid-area: text;
    background-color: rgb(252, 251, 251);
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: 20px;
    

}



.posts {
    text-align: left;
    background-color: white;
    border-radius: 10px;
    height: 550px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border: 2px solid black;
    margin-bottom: 60px;


}

.posts .vientiene {

    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 350px;
    object-fit: cover;
    display: block;
}

.postbottom {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    gap: 40px;
    margin-top: auto;
    align-items: center;
    font-size: 18px;
}

.post-nav-pin {
    display: flex;
    margin-top: 8px;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    color: #7a6352;
    margin-left: 15px;
}

.post-pin-img {
    width: 15px;
    height: auto;
    flex-shrink: 0;
}

.readmore {
    text-decoration: none;
    color: #EF6F39
}

.readmore:hover {
    border-bottom: 2px solid #EF6F39
}

.posts h1 {
    margin-top: 0px;
    padding: 5px;
    font-size: 22px;
}

.posts-undertext {
    margin-top: -10px;
    padding: 5px;
}



.posts h2 {
    font-size: 14px;
}


#post1 {
    grid-area: content1;
}

#post2 {
    grid-area: content2;
}

#post3 {
    grid-area: content3;
}

#post4 {
    grid-area: content4;
}

/* CSS ---------------------- FOOTER -------------------------------------------------------------------------- */

footer {
    grid-area: footer;
    background-color: rgba(234, 236, 234, 0.551);
    color: #7a6352;
    padding: 10px 20px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 50px;
}

footer div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#FootOmMig img {
    display: block;
    width: 130px;
    margin-top: -20px;
}

.foot-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    color: #7a6352;
}


.foot-item img {
    width: 20px;
    height: auto;
}

footer a {
    display: inline-block;
}

footer h3 a {
    text-decoration: none;
    color: #7a6352;
}

footer h3 a:hover {
    transform: scale(1.30);
    border-bottom: 2px solid black;
    color: red
}

footer h2 a {
    text-decoration: none;
    color: black;
    border-bottom: 2px solid black;
}

footer h2 a:hover {
    transform: scale(1.30);
    border-bottom: 2px solid black;
    color: red
}

footer h2 {
    color: black;
}

footer h1 {
    color: #EF6F39
}

footer p {
    font-size: 16px;
    padding: 10px;
}

.foot-name {
    font-size: 12px;
    display: block;
    flex-direction: column;
    margin-left: 40px;
    margin-top: -10px;
}
             
/* CSS ---------- E INLÄGG SIDAN -------------------------------------------------------------------------- */



body.body-posts {
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 50px repeat(4, 1fr) 50px;
    grid-template-rows: 60px auto auto minmax(0, auto) auto auto auto auto auto auto;
    grid-template-areas:
        "nav nav nav nav nav nav"
        "sortera sortera sortera sortera sortera sortera"
        "text text text text text text"
        ". content24 content23 content22 content21  ."
        ". content20 content19 content18 content17  ."
        ". content16 content15 content14 content13  ."
        ". content12 content11 content10 content9  ."
        ". content8 content7 content6 content5  ."
        ". content4 content3 content2 content1  ."
        "footer footer footer footer footer footer";
    gap: 0 20px;
}

.posts-sort-by-country {
    grid-area: sortera;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    flex-wrap: nowrap;
    text-align: center;
    margin-top: 20px;
    font-size: 20px;
}

.countrys-row {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
}

.posts-countrys {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 170px;
    padding-left: 30px;
    border: 2px solid black;
    text-align: center;
    border-radius: 30px;
}

.posts-countrys h2 {
    font-size: 24px;
}

.posts-countrys:hover {
    border: 2px solid black;
    background-color: rgba(199, 36, 199, 0.876);
    transform: scale(1.10);
    color: white;
}

.posts-countrys img {
    height: 20px;
}

#post1 {
    grid-area: content1;
}

#post2 {
    grid-area: content2;
}

#post3 {
    grid-area: content3;
}

#post4 {
    grid-area: content4;
}

#post5 {
    grid-area: content5;
}

#post6 {
    grid-area: content6;
}

#post7 {
    grid-area: content7;
}

#post8 {
    grid-area: content8;
}

#post9 {
    grid-area: content9;
}

#post10 {
    grid-area: content10;
}

#post11 {
    grid-area: content11;
}

#post12 {
    grid-area: content12;
}

#post13 {
    grid-area: content13;
}

#post14 {
    grid-area: content14;
}

#post15 {
    grid-area: content15;
}

#post16 {
    grid-area: content16;
}

#post17 {
    grid-area: content17;
}

#post18 {
    grid-area: content18;
}

#post19 {
    grid-area: content19;
}

#post20 {
    grid-area: content20;
}

#post21 {
    grid-area: content21;
}

#post22 {
    grid-area: content22;
}

#post23 {
    grid-area: content23;
}

#post24 {
    grid-area: content24;
}

.posts h3 {
    font-size: 22px;
    margin: 10px;
}

.posts p {
    font-size: 14px;
    font-weight: bold;
}

.posts h4 {
    font-size: 22px;
}

posts h2,
.posts h3,
.posts h4,
.posts p {
    margin-top: 2px;
    margin-bottom: 2px;}















/* CSS ---------- OM MIG  SIDAN -------------------------------------------------------------------------- */


body.about-me-body {
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 200px 1fr 1fr 200px;
    grid-template-rows: 50px min-content min-content min-content min-content min-content auto;
    grid-template-areas:
        "nav nav nav nav"
        "about-me-info about-me-info about-me-info about-me-info"
        ". about-me-content1 about-me-content2 ."
        ". about-me-content3 about-me-content4 ."
        ". about-me-content3 about-me-content5 ."
        ". about-me-content6 about-me-content6 ."
        "footer footer footer footer";
    gap: 40px;
}

.about-me-ommig {
    grid-area: about-me-info;
    text-align: center;
    margin-top: -30px;
    margin-bottom: -40px;
    font-family: Arial, sans-serif;
}

.about-me-who-am-i {
    grid-area: about-me-content1;
    background-color: white;
    padding: 15px;
    border: 3px solid #EF6F39;
}

.about-me-who-am-i h3 {
    font-size: 30px;
    margin-top: 0px;
    margin-bottom: 5px;
}

.about-me-who-am-i p {
    font-size: 20px;

}

.about-me-my-trips {
    grid-area: about-me-content3;
    background-color: white;
    padding: 15px;
    border: 3px solid #EF6F39;
}

.about-me-my-trips h3 {
    font-size: 30px;
    margin-top: 0px;
    margin-bottom: -5px;
}

.about-me-my-trips p {
    font-size: 20px;
}

.about-me-countries {
    grid-area: about-me-content2;
    background-color: white;
    border: 3px solid #EF6F39;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 20px;
}

.about-me-worldmap-icon {
    height: auto;
    width: 100px;
    margin-top: 20px;
}

.about-me-countries h3 {
    font-size: 40px;
    margin: 5px;
}

.about-me-countries p {
    font-size: 20px;
    margin: 20px;
}

.about-me-photographs {
    grid-area: about-me-content4;
    background-color: white;
    border: 3px solid #EF6F39;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-top: -20px;
}

.about-me-photographs h3 {
    font-size: 40px;
    margin-top: 10px;
}

.about-me-photographs p {
    font-size: 20px;
    margin-top: -20px;
}

.about-me-camera-icon {
    height: auto;
    width: 100px;
    margin-top: 20px;
}

.about-me-uni {
    grid-area: about-me-content5;
    background-color: white;
    border: 3px solid #EF6F39;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.about-me-uni h3 {
    font-size: 40px;
    margin-top: 10px;
}

.about-me-uni p {
    font-size: 20px;
    margin-top: -20px;
}

.about-me-laptop-icon {
    height: auto;
    width: 100px;
    margin-top: 20px;
}

.about-me-plan {
    grid-area: about-me-content6;
    background-color: white;
    border: 3px solid #EF6F39;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 20px;
    margin-top: -10px;

}

.about-me-plan p {
    margin-top: -10px;
    font-size: 16px;
}

.about-me-plan h3 {
    text-align: center;
}







/* CSS ---------- KONTAKTA MIG  SIDAN -------------------------------------------------------------------------- */

body.contact-body {
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 200px 1fr 1fr 200px;
    grid-template-rows: 50px auto min-content min-content min-content min-content auto;
    grid-template-areas:
        "nav nav nav nav"
        "contact-text contact-text contact-text contact-text"
        ". contact-mail contact-whatsapp ."
        ". contact-mail contact-about-me ."
        "footer footer footer footer";
    gap: 40px;
}

.contact-contact-me {
    grid-area: contact-text;
    text-align: center;
    margin-top: -30px;
    margin-bottom: -20px;
    font-family: Arial, sans-serif;
}

.contact-mail {
    grid-area: contact-mail;
    background-color: white;
    border: 3px solid #EF6F39;
    padding: 15px;
}

.contact-mail-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    margin-bottom: -20px;
    margin-top: -10px;
}

.contact-mail img {
    width: 30px;
}


.contact-whatsapp {
    grid-area: contact-whatsapp;
    background-color: white;
    border: 3px solid #EF6F39;
    padding-left: 35px;
}

.contact-whatsapp p {
    color: #959291ea;
}

.contact-whatsapp-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
}

.contact-whatsapp-title img {
    width: 30px;
}

.contact-whatsapp-link {
    display: block;
    width: 80%;
    background-color: #EF6F39;
    border: 2px dotted black;
    padding: 14px;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    text-align: center;
}

.contact-whatsapp-link:hover {
    background-color: rgba(199, 36, 199, 0.876);
}

.contact-about-me {
    grid-area: contact-about-me;
    background-color: white;
    border: 3px solid #EF6F39;
    padding: 15px;

}

.contact-about-me h3 {
    font-size: 20px;
    margin-top: -5px;
    margin-bottom: -5px;
}


/* CSS ---------- INLÄGG CSS FÖR ALLA INLÄGG (LÄS MER) -------------------------------------------------------------------------- */

body.read-more-posts {
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr minmax(300px, 900px) 1fr;
    grid-template-rows: auto min-content auto auto auto auto;
    grid-template-areas:
        "nav nav nav"
        ". read-more-back-to-posts1 ."
        ". read-more-photo ."
        ". read-more-content ."
        ". read-more-back-to-posts2 ."
        "footer footer footer";
    gap: 40px;
}

.read-more-back1 {
    grid-area: read-more-back-to-posts1;
    align-self: center;
    margin-bottom: -20px;

    width: 200px;
    height: 40px;
    display: flex;
    border: 2px solid rgba(0, 0, 0, 0);
    justify-content: center;
    align-items: center;


}

.read-more-back1 a {
    text-decoration: none;
    color: #333;
    font-size: 18px;


}

.read-more-back1:hover {
    width: 200px;
    height: 40px;
    border-radius: 15px;
    border: 2px solid rgba(199, 36, 199, 0.876);
    background-color: rgba(199, 36, 199, 0.876);
}

.read-more-back1 a:hover {
    color: white
}

.read-more-photo-and-text {
    grid-area: read-more-photo;
    align-self: center;
    text-align: center;
    height: 500px;
    margin-top: -10px;
    border-radius: 15px;
    position: relative;

}

.read-more-photo-and-text img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

.read-more-photo-overlay {
    position: absolute;
    display: flex;
    bottom: 0;
    left: 0;
    color: white;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;

}

.read-more-where-and-time {
    display: flex;
    justify-content: flex-start;
    gap: 50px;
    font-size: 14px;
    margin-bottom: -35px;
}

.read-more-photo-and-text h1 {
    font-size: 45px;
    margin-bottom: 0;
}

.read-more-mainp {
    grid-area: read-more-content;
    align-self: center;
    padding: 20px;
    border: 2px solid gray;
    border-radius: 15px;
}

.read-more-mainp h3 {
    text-align: center;
    font-size: 20px;
}


.read-more-back2 {
    grid-area: read-more-back-to-posts2;
    align-self: center;
    text-align: center;
    justify-self: center;


    background-color: #EF6F39;
    border: 2px solid #EF6F39;
    border-radius: 15px;
    width: 160px;
    padding: 15px;
}

.read-more-back2 a {
    text-decoration: none;
    color: white;
    font-size: 18px;
}

.read-more-back2:hover {
    background-color: #ef6f39e4;
    box-shadow: 0 4px 10px grey;
}

/* CSS ---------- WEBBTJÄNSTER SIDAN -------------------------------------------------------------------------- */

/* CSS ---------- WEBBTJÄNSTER SIDAN -------------------------------------------------------------------------- */

body.web-services-body {
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 100px repeat(3, 1fr) 100px;
    grid-template-rows: 60px auto auto auto auto;
    grid-template-areas:
    "nav nav nav nav nav"
    "services-hero services-hero services-hero services-hero services-hero"
    ". services-content services-content services-content ."
    ". travel-help travel-help travel-help ."
    ". services-cta services-cta services-cta ."
    ". why-me why-me why-me ."
    "footer footer footer footer footer";
    gap: 20px;
}

.services-hero {
    grid-area: services-hero;
    text-align: center;
    background-color: #EF6F39;
    color: white;
    padding:  20px;
}

.services-hero h1 {
    font-size: 30px;
    margin-bottom: 10px;
}

.services-hero h2 {
    font-size: 20px;
    font-weight: normal;
}

.services-content {
    grid-area: services-content;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.service-card {
    background-color: white;
    border: 3px solid #EF6F39;
    border-radius: 15px;
    padding: 25px;
}

.service-card h2 {
    color: #EF6F39;
    font-size: 28px;
}

.service-card p {
    font-size: 18px;
    font-weight: bold;
}

.service-card li {
    font-size: 16px;
    margin-bottom: 8px;
}

.services-cta {
    grid-area: services-cta;
    text-align: center;
    background-color: rgba(234, 236, 234, 0.551);
    padding: 50px 20px;
    border-radius: 15px;
}

.services-cta h2 {
    font-size: 36px;
    color: #EF6F39;
}

.services-cta p {
    font-size: 20px;
}

.why-me {
    grid-area: why-me;
    text-align: center;
    margin-bottom: 40px;
}

.why-me h2 {
    font-size: 36px;
}

.why-me-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.why-card {
    background-color: white;
    border: 3px solid #EF6F39;
    border-radius: 15px;
    padding: 25px;
}

.why-card h3 {
    background-color: #EF6F39;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-card h4 {
    font-size: 24px;
}

@media screen and (max-width: 900px) {
    body.web-services-body {
        grid-template-columns: 20px 1fr 20px;
        grid-template-areas:
            "nav nav nav"
            "services-hero services-hero services-hero"
            ". services-content ."
            ". services-cta ."
            ". why-me ."
            "footer footer footer";
    }

    .services-content,
    .why-me-boxes {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 600px) {
    .services-content,
    .why-me-boxes {
        grid-template-columns: 1fr;
    }

    .services-hero h1 {
        font-size: 42px;
    }

    .services-hero h2 {
        font-size: 18px;
    }
}

/* Resehjälp sektion */

.travel-help {
    grid-area: travel-help;
    text-align: center;
    background-color: white;
    padding: 40px 20px;
    border-radius: 15px;
}

.travel-help h2 {
    font-size: 36px;
    color: #EF6F39;
}

.travel-help p {
    font-size: 18px;
    margin-bottom: 30px;
}

.travel-help-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.travel-card {
    border: 2px solid #EF6F39;
    border-radius: 15px;
    padding: 20px;
}

.travel-card h3 {
    font-size: 22px;
    color: #EF6F39;
}


/* CSS ---------- MEDIA QUERIES () -------------------------------------------------------------------------- */



@media screen and (max-width: 1170px) {
    body {
        grid-template-rows: 60px 600px 80px minmax(0, auto) auto
    }

    header {
        background-size: cover;
        background-position: center;
    }

    .titel1 {
        font-size: 50px;
    }

    .titel2 {
        font-size: 50px;
    }

    .navigationslinks a {
        font-size: 16px;
        padding: 6px 20px;
    }

    body.contact-body {

        grid-template-columns: 50px 1fr 1fr 50px;

    }

    body.about-me-body {

        grid-template-columns: 50px 1fr 1fr 50px;

    }
}

@media screen and (max-width: 965px) {
    .undertitel {
        font-size: 18px;
    }

    .nav-left h1 {
        font-size: 20px;
    }

    .logo {
        width: 40px;
    }

    .location-icon {
        width: 16px;

    }

    .nuvarandeplats {

        font-size: 11px;
    }

    .navcity {
        margin: 0;
        font-size: 12px;

    }

    body.body-posts {

        grid-template-columns: 10px repeat(4, 1fr) 10px;

    }

    .posts-countrys {
        padding-left: 5px;
    }


    .posts-countrys img {
        height: 14px;
    }

    body {
        grid-template-columns: 5px repeat(4, 1fr) 5px;
    }

    body.body-posts {
        grid-template-columns: 5px repeat(4, 1fr) 5px;
    }

    .postbottom h3 {
        font-size: 11px;
    }
}



@media screen and (max-width: 830px) {

    body {

        grid-template-columns: 5px repeat(2, 1fr) 5px;
        grid-template-rows: 60px 500px 80px minmax(0, auto) minmax(0, auto) auto;
        grid-template-areas:
            "nav nav nav nav"
            "header header header header"
            "text text text text"
            ". content24 content23 ."
            ". content22 content21 ."
            "footer footer footer footer";
        gap: 0 20px;
    }

    .undertitel {
        font-size: 24px;
        margin-top: 10px;
        margin-bottom: 50px;
        margin-left: 50px;
        margin-right: 50px;
    }

    body.body-posts {
        grid-template-columns: 5px repeat(3, 1fr) 5px;
        grid-template-rows: 60px auto auto minmax(0, auto) auto auto auto auto auto auto auto auto;
        grid-template-areas:
            "nav nav nav nav nav "
            "sortera sortera sortera sortera sortera "
            "text text text text text "
            ". content24 content23 content22   ."
            ". content21 content20 content19 ."
            ". content18 content17 content16 ."
            ". content15 content14 content13 ."
            ". content12 content11 content10  ."
            ". content9 content8 content7 ."
            ". content6 content5 content4  ."
            ". content3 content2 content1 ."
            "footer footer footer footer footer ";
        gap: 0 20px;
    }

    .postbottom h4 {
        font-size: 14px;
    }

    .navlocation {
        display: none;
    }

    .posts-countrys {
        font-size: 16px;
    }

    .posts-sort-by-country h2 {
        font-size: 16px;
    }


    .posts-countrys img {
        height: 10px;
    }

    footer {
        gap: 10px;
    }

    footer div {
        gap: 0px;
    }

    #FootOmMig img {
        width: 70px;
    }

    .foot-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        color: #7a6352;
    }


    .foot-item img {
        width: 18px;

    }

    .foot-item h3 {
        font-size: 14px;
    }

}

footer a {
    font-size: 14px;
}


footer h2 {
    font-size: 18px;
}

footer h1 {
    font-size: 24px;
}

footer p {
    font-size: 12px;

}

body.contact-body {

    grid-template-columns: 5px 1fr 1fr 5px;

}

body.about-me-body {

    grid-template-columns: 5px 1fr 1fr 5px;
}

.foot-name {
    margin-left: 20px;
}




@media screen and (max-width: 636px) {

    .undertitel {
        font-size: 14px;
    }

    .nav-left h1 {
        font-size: 16px;
    }

    .logo {
        width: 30px;
    }

    .navcity {
        font-size: 12px;
    }

    .titel1 {
        font-size: 40px;
    }

    .titel2 {
        font-size: 40px;
    }

    .navigationslinks a {
        font-size: 14px;
        padding: 4px 10px;
    }

    body.body-posts {
        grid-template-columns: 5px repeat(2, 1fr) 5px;
        grid-template-rows: 60px auto auto minmax(0, auto) auto auto auto auto auto auto auto auto auto auto auto auto;
        grid-template-areas:
            "nav nav nav nav  "
            "sortera sortera sortera sortera  "
            "text text text text  "
            ". content24 content23 ."
            ". content22 content21 ."
            ". content20 content19 ."
            ". content18 content17 ."
            ". content16 content15 ."
            ". content14 content13 ."
            ". content12 content11  ."
            ". content10 content9  ."
            ". content8 content7 ."
            ". content6 content5 ."
            ". content4 content3 ."
            ". content2 content1 ."
            "footer footer footer footer  ";
    }


    .countrys-row {
        flex-direction: column;
        align-items: center;
    }

    .posts-countrys {
        justify-content: center;
        width: 80%;
    }

    body.about-me-body {
        gap: 30px
    }

    .about-me-who-am-i h3 {
        font-size: 20px;
    }

    .about-me-who-am-i p {
        font-size: 16px;

    }



    .about-me-my-trips h3 {
        font-size: 20px;
    }

    .about-me-my-trips p {
        font-size: 16px;
    }


    .about-me-worldmap-icon {

        width: 70px;

    }

    .about-me-countries h3 {
        font-size: 20px;
    }

    .about-me-countries p {
        font-size: 16px;
    }


    .about-me-photographs h3 {
        font-size: 20px;
    }

    .about-me-photographs p {
        font-size: 16px;
    }

    .about-me-camera-icon {
        width: 60px;
    }

    .about-me-uni h3 {
        font-size: 20px;
    }

    .about-me-uni p {
        font-size: 16px;
    }

    .about-me-laptop-icon {
        width: 70px;
    }

    .about-me-plan h3 {

        font-size: 20px;

    }

    .about-me-plan p {
        font-size: 16px;
    }


    body.contact-body {
        gap: 15px;
    }


    .contact-whatsapp {
        padding-left: 0px;
        padding: 5px;
    }
}

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

    .nav-left {
        gap: 0px;

    }

    .navigationslinks {
        gap: 5px;
        margin-right: 0px;
    }
}


@media screen and (max-width: 450px) {
    .nav-left {
        flex-direction: column;
    }

    .nav-left h1 {
        font-size: 14px;
    }




    #FootOmMig img {
        margin-top: 0px;
    }

    footer {
        gap: 10px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    footer div {

        gap: 0px;
    }

    .footericon {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        justify-content: center;

    }

    #Snabblänkar .foot-item {
        justify-content: center;
        gap: 10px;
    }

    footer p,
    footer h1,
    footer h2,
    footer h3 {
        margin: 5px 0;
    }

    .foot-name {
        margin-top: 10px;
    }


    body.about-me-body {
        grid-template-columns: 1fr;
        grid-template-rows: 50px min-content min-content min-content min-content min-content auto auto auto;
        grid-template-areas:
            "nav "
            "about-me-info"
            "about-me-content1"
            "about-me-content2"
            "about-me-content3"
            "about-me-content4"
            "about-me-content5"
            "about-me-content6"
            "footer ";
        gap: 40px;
    }

    body.contact-body {

        grid-template-columns: 1fr;
        grid-template-rows: 50px auto min-content min-content min-content min-content auto;
        grid-template-areas:
            "nav"
            "contact-text"
            "contact-mail"
            "contact-whatsapp"
            "contact-about-me"
            "footer ";
    }

    .contact-whatsapp-link {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-whatsapp p {
        text-align: center;
    }

    .contact-contact-me h1 {
        font-size: 24px;
        margin-top: 40px;
    }

    .contact-contact-me h2 {
        font-size: 20px;
    }

}
    @media screen and (max-width: 399px) {
        .nav-left h1 {
        font-size: 13px;
    }

    .logo {
        width: 25px;
    }

    .navigationslinks a {
        font-size: 13px;
        padding: 2px 5px;
    }
}