* {
    margin: 0;
    padding: 0;
    cursor: cell;


    -ms-overflow-style: none;
    scrollbar-width: none;
}

*::-webkit-scrollbar {
    display: none;
  }

html, body {
    font-size: 22px;

    overflow-x: hidden !important;
    width: 100vw;
}


@font-face {
    font-family: 'Ascentis';
    src: url(../resources/Ascentis-Regular.otf);
}

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300&display=swap');

:root {
    --black: #000000;
    --white: #ffffff;

    --light-grey: #f5f5f5;
    --mid-grey: #cacaca;
    --dark-grey: #2c2c2c;


    --sand: #f7dccc ;
    --ohasten: #b384f3;


    --margin-size-s: 1%;
    --margin-size-m: 6%;

    /* FONTS */
    --headline: 'Ascentis', sans-serif;
    --paragraph: 'Outfit', sans-serif;

    /* FONT SIZE*/
    --font-size-080: 0.8rem;
    --font-size-100: 1rem;
    --font-size-150: 1.5rem;
    --font-size-200: 2rem;
    --font-size-300: 3rem;
    --font-size-400: 4rem;
    --font-size-500: 5rem;
    --font-size-600: 6rem;
    --font-size-700: 7rem;
    --font-size-800: 8rem;
    --font-size-900: 9rem;
}

p {
    font-family: var(--paragraph);
}

h1, h2 {
    font-family: var(--headline);
}

h3, h4, h5 {
    font-family: var(--paragraph);
}

ul {
    font-family: var(--paragraph);
}

/* Square Generator */
#P0,#P1,#P2,#P3,#P4,#P5,#P6,#P7,#P8,#P9,#P10,#P11,#P12,#P13,#P14,#P15,#P16,#P17,#P18,#P19,#P20,#P21,#P22,#P23,#P24,#P25,#P26,#P27,#P28,#P29,#P30,#P31,#P32,#P33,#P34,#P35,#P36,#P37,#P38,#P39,#P40 {
    position: absolute;
}

::-moz-selection { /* Code for Firefox */
    background: var(--ohasten);
  }
  
  ::selection {
    background: var(--ohasten);
  }

@media (max-width: 1800px) {

    html, body {
        font-size: 20px;
    }

    :root {
        --margin-size-s: 3%;
        --margin-size-m: 6%;

        /* FONT SIZE*/
        --font-size-080: 0.8rem;
        --font-size-100: 1rem;
        --font-size-150: 1.25rem;
        --font-size-200: 1.5rem;
        --font-size-300: 2.5rem;
        --font-size-400: 3.5rem;
        --font-size-500: 4.5rem;
        --font-size-600: 5.5rem;
        --font-size-700: 6.5rem;
        --font-size-800: 7.5rem;
        --font-size-900: 8.5rem;
    }
    
}

@media (max-width: 1100px) {

    html, body {
        font-size: 16px;
    }

    :root {
        --margin-size-s: 3%;
        --margin-size-m: 6%;
    
        /* FONT SIZE*/
        --font-size-080: 0.9rem;
        --font-size-100: 1rem;
        --font-size-150: 1.25rem;
        --font-size-200: 1.5rem;
        --font-size-300: 2rem;
        --font-size-400: 3rem;
        --font-size-500: 4rem;
        --font-size-600: 5rem;
        --font-size-700: 6rem;
        --font-size-800: 7rem;
        --font-size-900: 8rem;
    }
}

@media (max-width: 415px) {

    html, body {
        font-size: 14px;
    }

    :root {
        --margin-size-s: 2.5%;
        --margin-size-m: 5%;
    
        /* FONT SIZE*/
        --font-size-080: 1rem;
        --font-size-100: 1rem;
        --font-size-150: 1.1rem;
        --font-size-200: 1.2rem;
        --font-size-300: 1.5rem;
        --font-size-400: 2.5rem;
        --font-size-500: 3rem;
        --font-size-600: 3.5rem;
        --font-size-700: 4.5rem;
        --font-size-800: 5rem;
        --font-size-900: 5.5rem;
    }

}