@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@100&family=Roboto:ital,wght@0,100;0,300;0,500;1,100&display=swap');
:root{
    --main-bg-dark: #01171F;
    --color-text-dark: #D6D0C9;
    --color-100-dark: #01202B;
    --color-300-dark: #01394A;
    --color-600-dark: #034861;

    --main-bg-light: #efefef;
    --color-text-light: #01171F;
    --color-100-light: #ebebeb;
    --color-300-light: #d0d0d0;
    --color-600-light: #afafaf;



    --main-bg: var(--main-bg-dark);
    --color-text: var(--color-text-dark); 
    --color-100: var(--color-100-dark);
    --color-300: var(--color-300-dark);
    --color-600: var(--color-600-dark);
    --active-theme-color: #C4B818;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button{
    all: unset;
}

ul{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 1rem;
    padding: 1rem;
    width: clamp(20rem, 90vw, 60rem);
    place-items: center;
    place-content: center;
}

a{
    all: unset;
    color: var(--color-text);
    cursor: pointer;
    padding: 0.4rem;
}

li{
    all: unset;
    max-width: 20rem;
    padding: 1rem;
    background-color: var(--color-100);
    border-radius: 0.4rem;
    filter: drop-shadow(1px 1px 5px var(--color-100));
    height: 10rem;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 4fr;
    hyphens: auto;
    word-break: auto;
}
li p:nth-child(2){
    font-weight: 500;
    text-align: end;
    font-size: 0.6rem;
}
.project-title{
    all: unset;
    position: relative;
    cursor: pointer;
}
.project-title svg{
    position: absolute;
    top: -0.8rem;
    left: -1rem;
    z-index: -1;
    width: 2rem;
}

li a{
    position: absolute;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    padding: 0;
    bottom: -0.4rem;
    right: -0.4rem;
}
li a:hover path{
    fill: var(--color-text);
}

li path{
    transition: all 0.4s ease-out;
    fill: var(--color-300);
}

li p:nth-child(3){
    font-weight: 300;
    font-size: 1rem;
    grid-column: 1/3;
}

li h4{
    font-size: 1.2rem;
}

h1,h2,h3,h4{
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

h1{
    font-size: min(6vw, 4rem);
}

h1 span{
    margin-right: 0.4rem;
    font-size: 0.8rem;
}

svg{
    width: 100%;
    height: 100%;
}

h1{
    display: grid;
}

body{
    color: var(--color-text);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    background-color: var(--main-bg);
    position: relative;
    width: 100%;
    display: grid;
    justify-items: center;
    padding-bottom: 12rem;
}
img{
    z-index: -1;
    opacity: 0.6;
    position: fixed;
    height: clamp(20rem, 20vw, 40rem);
    filter: drop-shadow(5px 10px 4px var(--color-100));
    bottom: 0;
    left: 0;
}
g{
    stroke: var(--color-text)
}
.landing{
    height: 100vh;
    display: grid;
    padding: 1rem;
    align-content: center;
}
.landing p{
    font-style: italic;
    font-size: 1.2rem;
}
.landing h1{
    font-size: 4rem;
    margin-bottom: 2rem;
    font-family: 'Josefin Slab', serif;
}
.projects{
    width: 100%;
    display: grid;
    position: relative;
    place-content: center;
}
.inactive{
    fill: transparent;
    transition: all 0.4s ease-out;
}

.active{
    transition: all 0.4s ease-out;
    fill: var(--active-theme-color);
    filter: drop-shadow(5px 3px 5px var(--active-theme-color));
}
.selector{
    height: 20%;
    width: 30%;
    border-radius: 2rem;
    background-color: var(--color-100);
    position: absolute;
    padding: 0.4rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    right: 0rem;
}
.selector-svg{
    overflow: visible;
}
.selector:hover .active{
    filter: none;
    fill: transparent;
}
.selector:hover .inactive{
    fill: var(--active-theme-color);
    filter: drop-shadow(5px 3px 5px var(--active-theme-color));
}

.logo{
    padding: 1rem;
    max-width: min(30vw, 10rem);
    border-radius: 0.4rem;
    position: relative;
}
.nav{
    width: 100%;
    opacity: 0.9;
    z-index: 1;
    position: fixed;
    bottom: 0rem;
    background-color: var(--main-bg);
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    justify-content: center;
}
.nav a{
    padding: 0.4rem;
    border-radius: 0.4rem;
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
    margin: 2rem;
    border: 1px solid var(--color-100);
    font-weight: 300;
}
.nav a:nth-child(1){
    justify-self: end;
    align-self: center;
}
.nav a:nth-child(3){
    justify-self: start;
    align-self: center;
}