* {
    padding: 0;
    margin: 0;
}

:root {
    --clr-0: #e4eef7;
    --clr-1: #F5EFE6;
    --clr-2: #303030;
    --clr-3: #AEBDCA;
    --clr-4: #7895B2;

    --clr-10: #c5bbac;
    --clr-11: #656363;

    --clr-pale: #ddd;

    --fs-xl: 5rem; --ts-xl: 0.25rem;
    --fs-l: 3.5rem; --ts-l: 0.1rem;
    --fs-m: 3rem; --ts-m: 0.16rem;
    --fs-850: 2.5rem; --ts-850: 0.1rem;
    --fs-800: 2rem; --ts-800: 0.08rem;
    --fs-750: 1.875rem; --ts-750: 0.06rem;
    --fs-700: 1.75rem; --ts-700: 0.06rem;
    --fs-600: 1.5rem; --ts-600: 0.025rem;
    --fs-500: 1.25rem; --ts-500: 0.0125rem;
    --fs-450: 1.15rem; --ts-400: 0.001rem;
    --fs-400: 1.1rem; --ts-400: 0.001rem;
    --fs-350: 1rem; --ts-350: 0.001rem;
    --fs-300: 0.875rem; --ts-300: 0.001rem;
    --fs-200: 0.8rem; --ts-300: 0.001rem;
}
/* 
:root {
    --clr-0: #768089;
    --clr-1: #8b9ead38;
    --clr-2: #576372;
    --clr-3: #AEBDCA;
    --clr-4: #7895B2;

} */


@media (max-width: 50em) {
    :root {
        --fs-xl: 3.3rem; --ts-xl: 0.08rem;
        --fs-l: 3rem; --ts-l: 0.05rem;
        --fs-m: 2.2rem; --ts-m: 0.04rem;
        --fs-850: 2rem; --ts-850: 0.03rem;
        --fs-800: 1.7rem; --ts-800: 0.028rem;
        --fs-750: 1.5rem; --ts-750: 0.025rem;
        --fs-700: 1.45rem; --ts-700: 0.02rem;
        --fs-600: 1.4rem; --ts-600: 0.003rem;
        --fs-500: 1.25rem; --ts-500: 0.0125rem;
        --fs-400: 1rem; --ts-400: 0.001rem;
        --fs-350: 0.875rem; --ts-350: 0.001rem;
        --fs-300: 0.75rem; --ts-300: 0.001rem;
        --fs-200: 0.6rem; --ts-300: 0.001rem;
    }
}

.body {
    
    padding: 10em 0;
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    opacity: 0.5;
    background-image: url('../../assets/background.png');
    background-repeat: no-repeat;
    background-size: cover;

}

.projects h1 {
    font-size: 3em;
    text-shadow:
         0 0 20px white;
}

.projects {
    margin: auto;
    width: 80vw;
}

.project-element {
    margin-top: 4em;
    background-color: var(--clr-10);
    padding: 1em;
    border-radius: 1.5em;
    border-style: solid;
    border-color: black;
    border-width: 0.2em;
}

.project-element h2 {
    font-size: 1.5em
}
.project-element p {
    font-size: 1em;
    line-height: 1.3em;
    margin-bottom: 1.5em;
}

.project-element button {
    padding: 0.4em;
    border-radius: 0.75em;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    background-color: #cecece;
}
.project-element button:hover {
    padding: 0.4em;
    border-radius: 0.75em;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    background-color: #bbb;
}

.project-element a {
    transition: ease-in-out 0.3s;
    color: rgb(53, 147, 161);
    
}

.project-element a:hover {
    text-shadow:
         0 0 20px white,
         0 0 20px white,
         0 0 20px white,
         0 0 20px white;
}

.project-element a.button:hover {
    
    box-shadow:
    0 0 20px white,
    0 0 20px white;

}

.body p.text-shadow {
    text-shadow:
         0 0 20px white,
         0 0 20px white,
         0 0 20px white,
         0 0 20px white;
    font-weight: 600;

}