* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gellix Mega', sans-serif;
    transition: .25s ease;
}


html {
    font-size: var(--default-unit);
}

body {
    background: var(--background);
    overflow-x: hidden;
    padding: 0 var(--page-padding);

    /* For testing */
    min-height: 300vh;
}



:root {
    /* Necessary colouring variables that'll be used through out the website */
    --text: white;
    --text-desc: rgba(255, 255, 255, 0.698);

    --background: black;
    --background-secondary: rgb(40, 40, 40);

    --background-light: rgb(10, 10, 10);

    --shadow-hard: rgb(61, 61, 61);
    --shadow: rgb(36, 36, 36);
    --shadow-light: white;

    --main: #3d9b1b;
    --main-secondary: #21560c;

    --gradient: linear-gradient(90deg, var(--main) 0%, rgb(20, 159, 150) 100%);

    --gradient-light: linear-gradient(90deg, rgb(39, 201, 17) 0%, rgb(27, 212, 200) 80%);

    --gradient-dark: linear-gradient(90deg, rgb(27, 145, 11) 0%, rgb(44, 121, 11) 100%);

    --border: 2rem;


    /* Sizing and styling */
    --page-padding: 5rem;

    --h1: 4.25rem;
    --h2: 3.45rem;
    --h3: 1.75rem;
    --h4: 1.5rem;

    --line-height-multiplier: 1.1;
    --p: 1.35rem;

    --default-unit: 16px;
    

}



@media screen and (max-width: 1000px){
    :root {
        --page-padding: 2rem;
    }
    
}

@media screen and (max-width: 800px){
    :root {
        --page-padding: 1rem;
    }
    html {
        font-size: 12px;
    }

    #beats {
        margin-top: 10rem;
    }
    
}

#header a {
    text-decoration: none;
}
a {
    color: var(--text);
}
h1 {
    font-size: var(--h1);
    line-height: calc(var(--h1) * var(--line-height-multiplier));
    color: var(--text);
    font-family: Gellix Mega;
    font-weight: 700;
}

h1.big {
    --size: 20vw;
    font-size: var(--size);
    line-height: calc(var(--size));

    font-family: Gellix Mega;
    background: linear-gradient(180deg, rgb(72, 112, 92) 40%, rgb(57, 78, 87) 50%, rgb(0, 0, 0) 80%);
    -webkit-background-clip: text;
    background-clip: text;

    color: transparent !important;
    z-index: -1;

    left: 0;
    right: 0;

}

h2 {
    font-size: var(--h2);
    line-height: calc(var(--h2) * var(--line-height-multiplier));
    color: var(--text);
    font-family: Gellix Mega;
    font-weight: 700;
}

h3 {
    font-size: var(--h3);
    color: var(--text);
    font-family: Gellix Mega;
    font-weight: 700;
}

h4 {
    font-size: var(--h4);
    color: var(--text);
    font-family: Gellix Mega;
    font-weight: 700;
}

p {
    font-size: var(--p);
    color: var(--text-desc);
    font-family: Gellix Normal;
    font-weight: 400;
}


h1.center, h2.center, h3.center, p.center {
    text-align: center;
}






/* Flex-styled element constructors */

.flex {
    display: flex;
    flex-direction: row;
}

.flex.v {
    flex-direction: column;
}

.flex.v.center, .flex.center {
    align-items: center;
    justify-content: center;
}

.fkex.v.nocenter, .flex.nocenter {
    align-items: flex-start;
    justify-content: flex-start;
}

.flex.v.vcenter, .flex.vcenter {
    align-items: center;
}

.flex.v.hcenter, .flex.hcenter {
    justify-content: center;
}

.flex.spacebetween {
    justify-content: space-between;
}

.flex.spacearound {
    justify-content: space-around;
}

.flex.v.spacebetween {
    align-items: space-between;
}

.flex.v.spacearound {
    align-items: space-around;
}



/* Default buttons and stuff' */

button {
    border: none;
    padding: 1rem 2.25rem;
    font-size: calc(1 * var(--p));
    color: var(--background);
    background: var(--text);
    cursor: pointer;
}

button.big {
    padding: 1.25rem 2.75rem;
    font-size: calc(1.05 * var(--p));
}

button.rounded {
    border-radius: 3rem;
}

button.flex {
    gap: 1rem;
}

button span {
    transform: translateY(-.15rem);
}

button.flex i {
    font-size: calc(1.1 * var(--p));
}

button.flex img {
    --multiplier: 1.5;
    width: calc(var(--multiplier) * var(--p)) !important;
    height: calc(var(--multiplier) * var(--p)) !important;
    border-radius: 50%;
}

button.flex.big i {
    font-size: calc(2 * var(--p));
}




/* Some very beautiful code properties */

.width100 {
    width: 100%;
}



.height100 {
    height: 100%;
}

.maxcontent {
    width: max-content;
}




/* Selections */

::selection {
    background: var(--main);
    color: var(--text);
}


/* Scroller object configuration */
.scroller::-webkit-scrollbar-thumb
{
    background: var(--text);
    background-size: cover;
    background-position: center,center;
}

.scroller::-webkit-scrollbar-thumb:hover
{
    background-size: cover;
    cursor: pointer;
}


.scroller::-webkit-scrollbar {
    width: .5rem;
}



.scroller::-webkit-scrollbar-track {
    transition: all .5s;
    background-color: var(--background);
    background-size: cover;
    background-position: center,center;
}



.gap2 {
    gap: 2rem !important;
}

.gap1 {
    gap: 1rem !important;
}

.gap05 {
    gap: .5rem !important;
}

.gap025 {
    gap: .25rem !important;
}

.gap0 {
    gap: 0 !important;
}






/* positions */

.relative {
    position: relative;
}
 
.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}