/* General Styling */
*{
    margin: 0px;
    padding: 0px;
    scrollbar-width: thin;
    font-family: 'Roboto', sans-serif;
}

html{
    /* Was : max-height: 100vw; TODO: Test the difference between the two */
    max-width: 100%;
    /* overflow-y: hidden; */
    overflow-x: hidden;
}

:root{
    --12px: 0.75rem;
    --16px: 1rem;
    --24px: 1.5rem;
    --32px: 2rem;
    --52px: 3.25rem;
    --300px: 18.75rem;
    --500px: 31.25rem;
}
/* 
:root {
    --step--2: clamp(1.13rem, calc(0.44rem + 0.97vw), 0.63rem);
    --step--1: clamp(1.35rem, calc(0.64rem + 1.00vw), 0.84rem);
    --step-0: clamp(1.13rem, calc(0.93rem + 0.98vw), 1.63rem);
    --step-1: clamp(1.50rem, calc(1.32rem + 0.88vw), 1.95rem);
    --step-2: clamp(2.00rem, calc(1.87rem + 0.67vw), 2.34rem);
    --step-3: clamp(2.66rem, calc(2.61rem + 0.28vw), 2.81rem);
    --step-4: clamp(3.55rem, calc(3.62rem + -0.36vw), 3.37rem);
    --step-5: clamp(4.74rem, calc(5.00rem + -1.35vw), 4.04rem);
    --three-quarter: calc(var(--step--1) * 0.75);
    --extra-small: calc(var(--step--1) / 2);
}

h1 {
    font-size: var(--step-5);
}
h2 {
    font-size: var(--step-4);
}
h3 {
    font-size: var(--step-3);
}
h4 {
    font-size: var(--step-2);
}
h5 {
    font-size: var(--step-1);
}
h6 {
    font-size: var(--step-0);
}
p {
    font-size: var(--step-0);
}
small {
    font-size: var(--step--1);
}
.three-quarter { 
    font-size: var(--three-quarter);
}
.extra-small { 
    font-size: var(--extra-small);
} */

h1{
    font-size: var(--52px);
}

small {
    font-size: var(--12px);
}

body {
    font-family: 'Roboto', sans-serif;
    scrollbar-width: thin !important;
    width: 100vw;

    background-image: url('../res/index-bg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /* margin-top: 6vh; */
    /* margin-bottom: 15vh; */
}

.underline-on-hover {
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    color: #fff;
}
  
.underline-on-hover::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
  
.underline-on-hover:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* underline-on-hover-secondary */

.underline-on-hover-secondary {
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    color: #fff;
}
  
.underline-on-hover-secondary::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #00b2e2;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
  
.underline-on-hover-secondary:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* hide when screen size is greater than 950px */
.hide-on-desktop {
    display: none !important;
}

/* hide when screen size is less than 950px */
@media screen and (max-width: 950px) {
    .hide-on-mobile {
        display: none !important;
    }

    .hide-on-desktop {
        display: flex !important;
    }
}