:root {
    --main-yellow: #ebeb3b;
    --main-green: #76DD85;
    --main-red: #DD4E4E;
    --main-blue: #3f80f8;

    --dot-bg: black;
    --dot-color: white;
    --dot-size: 1px;
    --dot-space: 22px;
}

h1,h2,h3,h4,h5,h5,p {
    margin: 0;
    padding: 0;
}

html {
    font-family: "Inter Display", "Inter";
    color: black;
}

body {
    margin: 0;
    padding: 0;
}

.circled-char {
    font-feature-settings: "ss05", "ss07";
}

h1 {
    font-weight: 500;
    font-size: 3rem;
}

main {
    height: 100vh;
    background:
    radial-gradient(ellipse 100% 110% at top, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.88), rgba(63, 190, 248, 0.78));
}

.blur-layer {
    width: 100%;
    height: 100vh;
    position: absolute; 
    z-index: 2;
    left: 0px;
    top: 0px;
    backdrop-filter: blur(120px);
}

.dot-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;

    background-image: radial-gradient(#00000020 1px, transparent 0);
    background-size: 20px 20px;
}

header {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 4;

    gap: 10px;

    display: flex;
    flex-direction: column;
    align-items: end;

    height: fit-content;

    user-select: none;
    -webkit-user-select: none;
}

.header-list-item {
    user-select: none;
    -webkit-user-select: none;

    padding: 10px;
    padding-right: 16px;
    color: black;

    border-radius: 40px;

    transition: 0.3s ease all;

    width: fit-content;
}

.header-list-item:hover {
    user-select: none;
    -webkit-user-select: none;

    padding: 10px;
    padding-right: 16px;
    background: black;
    color: white;

    border-radius: 40px;

    translate: -20px;

    cursor: pointer;
}

header:hover .header-list-item:not(:hover) {
    opacity: 0.4;
}

#mainTitle {
    position: absolute;
    bottom: 20px;
    left: 40px;

    z-index: 4;
}

#mainTitle > h1 {
    font-size: 12rem;
    letter-spacing: -0.25rem;
    line-height: 12rem;
    margin: 0;
}

#mainTitle > p {
    font-size: 2rem;
    line-height: 2.2rem;

    margin-bottom: 240px;
}

/* Recent work section */

.recent-work-section {
    height: 400px;

    background-image: radial-gradient(ellipse 100% 110% at bottom, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.88), rgba(63, 190, 248, 0.78));
}