:root {
    --color-dark: #2c2f33;
    --color-nearly-dark: #151515;
    --color-not-quite-dark: #23272a;
    --color-lighter-dark: #45494e;
    --color-even-lighter-dark: #a3a5a8;
    --color-green: #00ae7a;
}

@font-face {
    font-family: SF_Pro_Light;
    src: url(../fonts/SF-Pro-Text-Light.otf);
}

body {
    background: var(--color-dark);
    font-family: SF_Pro_Light;
    color: white;
	overflow-x: hidden;
}

nav {
    position: fixed;
    top: 0;
    bottom: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-left: 8px;
    margin-left: -8px;
    width: 100%;
	pointer-events: none;
}
nav::-webkit-scrollbar {
    display: none;
}

ul {
    /* filter: drop-shadow(0px -3px 8px var(--color-nearly-dark)); */
}

.squircles {
    background: var(--color-not-quite-dark);
    opacity: .8;
    list-style-image: none;
    list-style: none;
    list-style-type: none;
    margin-left: -0.5em;
    margin-top: -0em;
    min-height: 100vh;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transform-origin: left;
    position: absolute;
	box-sizing: border-box;
	pointer-events: auto;
}

.squircle {
    background: var(--color-lighter-dark);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: border-radius 256ms;
    display: flex;
    justify-content: center;
    align-items: center;
}
.squircle:hover {
    border-radius: 35%;
}
.squircle:hover::before {
    transform: translate(-100%, -50%) scale(.5);
}
.squircle:hover .popper {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.squircle::before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--color-even-lighter-dark);
    position: absolute;
    border-radius: 8px;
    top: 50%;
    transform: translate(-100%, -50%) scale(0);
    transition: transform 200ms;
}

.divider {
    width: 100%;
    background: white;
    height: 2px;
    border-radius: 2px;
    opacity: .2;
    transform: scale(0.75);
}

.popper {
    background-color: var(--color-nearly-dark);
    filter: drop-shadow(0px 0px 8px var(--color-dark));
    padding: 0.68rem 1rem;
    position: absolute;
    top: 50%;
    left: 170%;
    transform-origin: left;
    transform: translateY(-50%) scale(0.98);
    width: max-content;
    height: 1em;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 300ms;
    pointer-events: none;
}

.popper::before {
    content: '';
    background: var(--color-nearly-dark);
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    z-index: -1;
}

.popper-text {
    margin-top: -1px;
}

iframe {
    margin-top: -8px;
    margin-left: 74px;
    min-width: 96.2%;
    min-height: 98vh;
    border-width: 0px;
}

.icon {
    width: inherit;
    border-radius: 20%;
}

.home {
    transform: scale(0.75);
}

.hue1 {
    width: inherit;
    border-radius: 20%;
    transform: scale(0.65);
}

.hue2 {
    width: inherit;
    border-radius: 20%;
    transform: scale(0.6);
}

.hue4 {
    width: inherit;
    border-radius: 20%;
    transform: scale(0.55);
}

.hue5 {
    width: inherit;
    border-radius: 20%;
    transform: scale(0.55);
}

.hue6 {
    width: inherit;
    border-radius: 20%;
    transform: scale(0.55);
}

.javascript {
    width: inherit;
    border-radius: 20%;
    transform: translate(-4px, -6px) scale(0.75);
}

.weekend {
    width: inherit;
    border-radius: 20%;
    transform: scale(0.50);
}

.calculator {
    width: inherit;
    border-radius: 20%;
    transform: scale(0.40);
}

.todo {
	width: inherit;
    border-radius: 20%;
    transform: scale(0.40);
}

.github {
    width: inherit;
    border-radius: 20%;
    transform: scale(0.70);
}

.php {
    width: inherit;
    border-radius: 20%;
    transform: scale(0.70);
}

::-webkit-scrollbar {
    margin-left: 3px;
}

::-webkit-scrollbar-track {
    background-color: var(--color-dark);
}
 
::-webkit-scrollbar-thumb {
  background: rgb(128, 128, 128); 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(148, 148, 148); 
}