*{
margin:0;
padding:0;
box-sizing:border-box;
}


body{

background:black;
color:white;

font-family: "Titillium Web", sans-serif;

scroll-snap-type:y mandatory;

overflow-y:scroll;

}


section{

    scroll-snap-align:start;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:10px;

    text-align:center;

}

.home-section{

    min-height:55vh;
    padding-top:200px;
    padding-left: 20px;
    padding-right: 20px;

}

.about-section{

    padding-top:40px;
    padding: 20px;
    gap:0;

}

.home-section img{

width:100%;
}


.home-section h1{

  font-weight: 700;
  font-style: normal;

     font-size: clamp(1.6rem, 6vw, 2.1rem);

  line-height: 1.1;
  letter-spacing: 1.5px;

margin-top:20px;
margin-bottom: 10px;

}


.home-section p{

font-size: clamp(1rem, 4vw, 1.2rem);

margin-top:0px;

}


.about-section p{

font-family: "Titillium Web", sans-serif;

 font-size: clamp(0.95rem, 3.8vw, 1.15rem);
letter-spacing: 0.01rem;

 color: rgba(255, 255, 255, 0.5);
    margin-bottom:20px;
}


.about-section img{

    display: none;


}

.mobile-map{

    position:relative;

    width:100%;

    height:950px;

    margin-top:80px;

    margin:0;

    z-index: 1;

}

.mobile-column{

    position:absolute;

    display:flex;

    gap:25px;

    align-items:flex-start;

}

.mobile-label{

    width:75px;

    text-align:right;

    font-family:"Titillium Web", sans-serif;

    font-size: clamp(0.85rem, 3.2vw, 1rem);

    letter-spacing:.18em;

    color:rgba(255,255,255,.45);

    margin-top:5px;

     white-space: normal;

}

.mobile-column ul{

    list-style:none;

    padding:0;

    margin:0;

    min-width:170px;

}

.mobile-column li{

    font-family:"Titillium Web", sans-serif;

    text-align: left;

    font-weight:200;

    font-size: clamp(0.8rem, 3.5vw, 1.15rem);

    line-height:1.15;

    color:white;

    opacity:.25;

    filter:blur(4px);

    transition:
        opacity .3s linear,
        filter .3s linear;

}

.design{
    left: 2.67vw; 
    top:0;
}

.skills{
    right: 0.53vw;
    top:140px;
}

.digital{
    left: 6vw;
    top:320px;
}

.education{
    right:0;
    top:480px;
    left: 5.33vw;

    padding-right: 20px;
}

.inspired{
    left: 26.67vw;
    top:650px;
}

.mobile-links{

    flex-direction:row;

    display:flex;

    z-index:10;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:nowrap;

    padding-bottom: 80px;

    position: relative;
    z-index: 20;

}
.mobile-links a,
.mobile-links span{

    white-space:nowrap;

    flex-shrink:0;

}
.mobile-links a{

    text-decoration:none;

    color:white;

    font-family:"Titillium Web", sans-serif;

    font-size: clamp(1rem, 4vw, 1.15rem);

    font-weight:200;

    letter-spacing:.08em;

    transition:.3s ease;

}

.mobile-links span{

    color:rgba(255,255,255,.35);

    font-size: clamp(1.1rem, 4vw, 1.25rem);

}

.mobile-links a:hover{

    opacity:.5;

}

.projects-section{

    height:auto;

    min-height:0;

    justify-content:flex-start;

    align-items:flex-end;

    padding:0px 30px 80px;

     margin-top:-150px;

}

.projects-link{

    color:white;

    text-decoration:none;

    font-family:"Titillium Web", sans-serif;

     font-size: clamp(1rem, 4vw, 1.15rem);

    font-weight:200;

    letter-spacing:.12em;

    text-transform:uppercase;

    border-bottom:0.5px solid white;

    padding-bottom:2px;

}

.about-section,
.projects-section,
.projects-link {
    position:relative;
    z-index:10;
}


@media (max-width: 380px) {

    .home-section {
        padding-top: 140px;
    }

}

@media (orientation: landscape) and (max-width: 1000px) {

    body{
        scroll-snap-type: none;
        overflow-y: auto;
    }

    section{
        min-height: auto !important;
    }

    .home-section{
        padding-top: 60px;
        min-height: auto !important;
    }
    .home-section img{

width:70%;
}
    .about-section{
        margin-top: 0;
    }

    .mobile-map{
        height: 900px !important;
        position: relative;
        padding: 0 40px;
    }

      .mobile-map .mobile-column{
        gap: 45px;
    }

    .mobile-map .mobile-column,
    .mobile-map .design,
    .mobile-map .skills,
    .mobile-map .digital,
    .mobile-map .education,
    .mobile-map .inspired{
        position: absolute !important;
    }

    .design{
        left: 80px !important;
        top: 0px !important;
        right: auto !important;
    }

    .skills{
        left: 350px !important;
        top: 200px !important;
        right: auto !important;
    }

    .digital{
        left: 60px !important;
        top: 400px !important;
        right: auto !important;
    }

    .education{
        left: 40px !important;
        top: 600px !important;
        right: auto !important;
    }

    .inspired{
        left: 400px !important;
        top: 750px !important;
        right: auto !important;
    }

    .projects-section{
        margin-top: 0 !important;
    }

}