*, *::before, *::after{
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

:root{
    --main-color: #1ce7a6;
    --background-color: #14001a;
    --text-color: #ffeee1;
    --subheading-color: #ffeee1b6;
    --outline-color: #D5C7BC;
    /* header */
    --header-background-color: #1d0027dc;
    --menu-background-color: #23002fa8;
    /* online */
    --online-pulse-color: #ea9bfe;
    --online-pulse-background: #5e3d66;
    --online-standby-color: #a570af;
    /* scrollbar */
    --scrollbar-background: #1d0027;
    --scrollbar-color: #5e3d66;
    /* hero */
    --hero-color: #00ffae;
    /* background pattern */
    --honeyColor: #14001a;
    --honeyBorderColor: #1b0023;
    --size: 120px;
    /* article */
    --article-background: #231926;
    --article-link-background: #1a131d;
}

html{
    font-family: "Figtree", sans-serif;
    font-optical-sizing: auto;
    scrollbar-color: var(--scrollbar-color) var(--scrollbar-background);
    scrollbar-width: thin;
    overflow-y: scroll;
    overflow-x: hidden;
}

header{
    display: none;
}

body{
    background:
        radial-gradient(circle farthest-side at 0% 50%, var(--honeyColor) 23.5%,transparent 0)calc(var(--size)*0.7) var(--size),
        radial-gradient(circle farthest-side at 0% 50%,var(--honeyBorderColor) 24%,transparent 0)calc(var(--size)*19/30) var(--size),
        linear-gradient(var(--honeyColor) 14%,transparent 0, transparent 85%, var(--honeyColor) 0)0 0,
        linear-gradient(150deg, var(--honeyColor) 24%,var(--honeyBorderColor) 0,var(--honeyBorderColor) 26%,transparent 0,transparent 74%,var(--honeyBorderColor) 0,var(--honeyBorderColor) 76%, var(--honeyColor) 0)0 0,
        linear-gradient(30deg, var(--honeyColor) 24%,var(--honeyBorderColor) 0,var(--honeyBorderColor) 26%,transparent 0,transparent 74%,var(--honeyBorderColor) 0,var(--honeyBorderColor) 76%, var(--honeyColor) 0)0 0,
        linear-gradient(90deg,var(--honeyBorderColor) 2%, var(--honeyColor) 0, var(--honeyColor) 98%,var(--honeyBorderColor) 0%)0 0 var(--honeyColor);
    background-size:calc(var(--size)*4/3) calc(var(--size)*2);
    overflow: auto;
}

main{
    overflow-y: hidden;
}

/* elements */
h1, h2, h3, h4, p, span{
    color: var(--text-color);
}

a{
    font-size: 28px;
}

@media(max-width:750px){
    a{
        font-size: 42px;
    }
}

a, a:visited, a:active{
    text-decoration: underline;
    text-decoration-color: transparent;
    color: var(--main-color);
    transition: text-decoration-color 0.25s ease;
    -moz-transition: text-decoration-color 0.25s ease;
    -o-transition: text-decoration-color 0.25s ease;
    -webkit-transition: text-decoration-color 0.25s ease;
}

h1{
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.2;
}

h2{
    font-size: 2.25rem;
    font-weight: 300;
}

h3{
    font-size: 1.5rem;
    font-weight: 300;
}

p{
    font-size: 1.5rem;
}

.sub-heading{
    color: var(--subheading-color);
}

/* pfp */
.pfp{
    display: block;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    outline: 6px solid transparent;
    transition: outline-color 0.5s ease, transform 4s ease-in-out;
    -moz-transition: outline-color 0.5s ease, transform 4s ease-in-out;
    -o-transition: outline-color 0.5s ease, transform 4s ease-in-out;
    -webkit-transition: outline-color 0.5s ease, transform 4s ease-in-out;
    cursor: pointer;
}

@media(min-width:900px){
    .pfp{
        height: 400px;
        width: 400px;
    }
}

.spin{
    transform: rotate(calc(360deg*20));
}

/* online indicator */
.online{
    height: 18px;
    width: 18px;
    border: 4.8px solid var(--background-color);;
    display: inline-block;
    border-radius: 50%;
    animation: pulse 5s ease infinite;
    -webkit-animation: pulse 5s ease infinite;
    -o-animation: pulse 5s ease infinite;
    -moz-animation: pulse 5s ease infinite;
    margin-right: 8px;
}

@media (hover: hover){  
    a:hover{
        text-decoration-color:  var(--main-color);
    }
    .pfp:hover{
        outline-color: var(--outline-color);
    }
}