body {
    background-image: radial-gradient(
        circle at 60%,
        hsl(0, 0%, 9%),
        hsl(0, 0%, 15%) 20%,
        hsl(0, 0%, 35%) 60%,
        hsl(0, 0%, 35%) 80%,
        hsl(0, 0%, 53%) 99%
    );
}

h1,h2,h3,h4,p,div {
    font-family: "Bricolage Grotesque";
}

#Topbar {
    background-color: black;
    display: flex;
    position: fixed;
    width: 100%;
    height: 8%;
    top:0%;
    justify-content: left;
    align-items: center;
    border-bottom-left-radius: 2vh;
}

#Title {
    background: linear-gradient(to left, rgb(81, 81, 81), rgb(118, 118, 118));
    -webkit-background-clip: text; /* for ze apple enthusiats */
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-left: 1%;
    font-size: 3vh;
}  

#Projects {
    display: flex;
    width: 50%;
    height: 40%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2vh;
    background: radial-gradient(circle, rgb(18, 18, 18), rgb(64, 64, 64));
    border: black 5px solid;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    overflow: auto;
    padding: 1%;
    box-sizing: border-box;
    scrollbar-width: none;
}

#ProjectsTitle {
    margin-top: 1%;
    margin-left: 1%;
    margin-right: 999%;
    margin-bottom: 2%;
}

.Project {
    aspect-ratio: 1 / 1;
    height: 15vh;
    width: 15vh;
    padding: 2%;
    margin: 2%;
    box-sizing: border-box;
    border-radius: 1vh;
    border: none;
    overflow: hidden;
}

.ContentIcon {
    width: 75%;
    border-radius: 1vh;
}

.ContentName {
    margin-top: 2%;
    font-size: 2vh;
}