*{
    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;
    }
}

/* ------------------------ text ------------------------ */
.projectintro{
    height: auto;
    width: 60%;
    background-color: #ffffff;
    text-align: center;
    padding-top: 10%;
    margin-left: 20%;
    margin-bottom: 3%;
}

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

.projectintro a{
font-size: x-large;
color: #29282d;
}

.pic1 {
    height: auto;
    width: 42.5%;
    margin-left: 28.75%;
    margin-right: 28.75%;
    float: left;
    margin-bottom: 10%;
}

.pic1 img {
    height: 100%;
    width: 100%;  
    object-fit: cover;
    display: block;
}

.projecttechnologies{
    height: auto;
    width: 50%;
    background-color: #ffffff;
    text-align: justify;
    padding-top: 10%;
    width: 42.5%;
    margin-left: 28.75%;
    margin-bottom: 3%;

}

.keycontributors {
    height: auto;
    width: 42.5%;
    background-color: #ffffff;
    text-align: justify;
    margin-left: 28.75%;
    margin-bottom: 3%;
}






/* ------------------------ 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;
}