:root {
    --medium: clamp(14px, 2.5vmin, 18px);
    --large: clamp(18px, 3vmin, 24px);
    --larger: clamp(21px, 3.5vmin, 28px);
    --x-large: clamp(24px, 4vmin, 32px);
    --xx-large: clamp(32px, 5vmin, 48px);
}


body {
    background-color: #1e1e21;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    height: 200vh;
}

span, p, pre {
    font-family: sans-serif;
    margin: 0;
    color: #ffffff;
    font-size: var(--medium);
}

.title {
    text-align: center;
    color: #daddfc;
    font-weight: bolder;
    font-size: var(--xx-large);
    text-decoration: underline;
}

.heading {
    color: #ffffff;
    font-weight: bolder;
    font-size: var(--x-large);
}

.heading-ish {
    color: #ffffff;
    font-weight: bolder;
    font-size: var(--large);
}

.main-div {
    margin-top: clamp(18px, 6vmin, 853px);
    width: clamp(400px, 80%, 4000px);
    transform: translate(-50%);
    left: 50%;
    position: relative;
    display: inline-flex;
    gap: clamp(10px, 2.3vmax, 2000px);
    flex-wrap: wrap;
    max-width: 100vw;
}

.about, .projects {
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    border-radius: 1vw 1vw;
    background-color: rgb(36, 36, 52);
    border: clamp(5px, .5vmax, 1000px) solid rgb(36, 36, 52);

}

.about:hover, .projects:hover {
    transform: scale(110%);
    z-index: 99;
}

.social-icons {
    width: clamp(400px, 80%, 4000px);
    position: relative;
    display: inline-flex;
    gap: clamp(10px, 1vmax, 2000px);
    justify-content: center;
    margin-top: .4rem;
}

.projects {
    position: relative;
}

.projects-list {
    margin-top: clamp(2px, 0.75vmin, 200px);
    padding: clamp(3px, 1vh, 200px);
    padding-left: 0;
    display: flex;
    justify-content: left;
}

.project {
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    width: clamp(8px, 12vmax, 1600px);
    border-radius: 1vw;
    z-index: auto;
    transform-origin: left top;
}

.about-bulletpoints {
    margin-top: clamp(2px, 0.75vmin, 200px);
}

.top-bar {
    position: relative;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: clamp(50px, 22vmin, 2560px);
    background-color: #2617581f;
}

.social-icon {
    width: clamp(2px, 4vmax, 1000px);
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.social-icon:hover, .project:hover {
    cursor: pointer;
    transform: scale(110%);
    z-index: 99;
}

.divider {
    margin-top: clamp(18px, 6vmin, 853px);
    width: 100%;
    align-self: center;
    max-width: 100vw;
    border: none;
    background: #FFF;
    height: clamp(2px, .1vmin, 100px);
}