*{
    margin: 0;
    padding: 0;
    /* box-sizing: border-box;
    font-family: 'Poppins', sans-serif; */
}
body, html {
    height:100%;
    width: 100%;
    background-color: rgb(255, 255, 255);
}
:root{
    --text: #29282d;
    --background: #fbf9f1;
    --primary: #404c89;
    --secondary: #7b95dc;
    --accent: #121152;
}


.libre-baskerville-regular {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: normal;
}

.libre-baskerville-bold {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-style: normal;
}

.libre-baskerville-regular-italic {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: italic;
}


/* ------------------------- navbar ------------------------- */

nav {
    background-color: white;
    /* border-bottom: 1px solid black; */
}

nav ul{
    list-style: none;
    display: flex;
}

nav .home-li{
    margin-right: auto;
}
nav li{
    display: flex;
}
nav a{
    display: flex;
    text-decoration: none;
    color: rgb(79, 73, 107);
    padding: 1em 2em;
    /* font-weight: 600; */
}

nav a:hover{
    background-color: rgb(242, 244, 244);
}

/* nav a.active-link{
    border-bottom: 2px solid rgb(103, 92, 94);
} */

/* 
nav a.accent-link{
    background-color: 2px solid pink;
} */

#open-sidebar-button {
    display: none;
    background: none;
    border: none;
    padding: 1em;
    margin-left: auto;
    cursor: pointer;
}

#close-side-button {
    display: none;
    background: none;
    border: none;
    padding: 1em;
    cursor: pointer;
}

#overlay{
    background: rgba( 0, 0, 0, 0.5);
    position: fixed;
    inset: 0;
    z-index: 9;
    display: none;
}

@media screen and (max-width:700px){
#open-sidebar-button, #close-side-button{
    display:block;
}  
    nav{
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: min(15em, 100%);
        z-index: 10;
        border-left: 1-x solid (blue);
        transition: right 300ms ease-out;
    }

    nav.show{
        right:0;
    }

    nav.show ~ #overlay{
        display: block;
    }

    nav ul{
        width: 100%;
        flex-direction: column;
    }

    nav a{
        width:100%;
        padding-left: 2.5em;
    }
}

/* ------------------------- rest ------------------------- */

.quote {
    height: auto;
    width: 50%;
    background-color: #ffffff;
    padding: 5%;
    margin-bottom: 5%;
    font-size: x-large;
}

/* ------------------------ 1st view picture ------------------------ */

/* for whatever reason is fine without the height and width in %
it just changes in scale, without the percentages it just shows whole picture on all websites damentions */
.vision {
    /* height: 60%;
    width: 90%; */
    background-color: #ffffff;
    object-fit: contain;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;
    margin-bottom: 5%;
}

.vision img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

/* .vision:hover img {
    transform: scale(1.05);
}

.overlay {
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    background: rgba(0,0,0,0.2);
    opacity: 0;
} */

/* ------------------------ text ------------------------ */


.path{
    height: auto;
    width: 50%;
    background-color: rgb(222, 224, 236, 0.15);
    padding: 5%;
    margin-left: 20%;
    margin-top: 10%;
    text-align: center;
    margin-bottom: 10%;
}

.recent{
    height: auto;
    width: 50%;
    background-color: #ffffff;
    width: 90%;
    margin-left: 5%;
    margin-bottom: 3%;
}

.aboutmetext{
    height: auto;
    width: 50%;
    background-color: #ffffff;
    padding-top: 10%;
    width: 90%;
    margin-left: 5%;
    margin-bottom: 3%;
}

.contacttext{
    height: auto;
    width: 50%;
    background-color: #ffffff;
    text-align: center;
    padding-top: 10%;
    width: 90%;
    margin-left: 5%;
    margin-bottom: 3%;
}

.contacttext p{
font-size: xxx-large;
color: #29282d;
}

.contacttext a{
font-size: xx-large;
color: #29282d;
}



/* ------------------------ projects ------------------------ */



.sp1 {
    height: auto;
    width: 42.5%;
    margin-left: 5%;
    margin-right: 2.5%;
    float: left;
    margin-bottom: 10%;
}

.sp1 img {
    height: 100%;
    width: 100%;  
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.sp1:hover img {
    transform: scale(1.05);
}

.overlay {
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    background: rgba(0,0,0,0.2);
    opacity: 0;
}

.sp1:hover .overlay {
    opacity:1;
}

.sp2 {
    height: auto;
    width: 42.5%;
    margin-left: 2.5%;
    margin-right: 5%;
    float: left;
    margin-bottom: 10%;
}

.sp2 img {
    height: 100%;
    width: 100%;  
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.sp2:hover img {
    transform: scale(1.05);
}

.overlay {
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    background: rgba(0,0,0,0.2);
    opacity: 0;
}

.sp2:hover .overlay {
    opacity:1;
}






/* make each picture container act as positioning context */
.sp1,
.sp2 {
  position: relative;
  overflow: hidden; /* so caption stays clipped inside */
}

/* blur the image on hover */
.sp1:hover img,
.sp2:hover img {
  filter: blur(3px);            /* <— the blur */
  transform: scale(1.05);       /* keep your existing zoom */
  transition: transform 0.6s ease, filter 0.3s ease;
}

/* hidden caption by default */
.caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* so clicks still go to the link */
}

/* show caption on hover */
.sp1:hover .caption,
.sp2:hover .caption {
  opacity: 1;
}








/* ------------------------ sm ------------------------ */
.sm{
    /* padding: 6%; */
    height: 30%;
    margin-bottom: 15px;
    text-align: center;
    background-color: #ffffff;
}

.sm a{
    display: inline-block;
    margin: 0 10px;
}
.sm img{
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
}

.img img:hover {
    transform: scale(1.1);
}











/* ------------------------ footer ------------------------ */

.footer {
  clear: both;
  background-color: #ffffff; /* soft grey background */
  text-align: center;
  padding: 30px 20px;
}

.footer .social-icons {
  margin-bottom: 15px;
}

.footer .social-icons a {
  display: inline-block;
  margin: 0 10px;
}

.footer .social-icons img {
  width: 25px;
  height: 25px;
  transition: transform 0.3s ease;
}

.footer .social-icons img:hover {
  transform: scale(1.1);
}

.footer p {
  font-size: 14px;
  color: #29282d;
  margin-top: 10px;
}