@import "chota.min.css";
@import "custom.css";


:root {
    /* this has to be set to switch between light or dark */
    color-scheme: light dark;
  
    --light-bg:#f1e4ee;
    --light-hbg: #0e3b3925;
    --light-qbg: #ffdb002e;
    --light-tb: #ecf1efc5;
    --light-color: #360000;
    --light-h:  #894f7d;
    --light-h1: #0e4067;
    --light-figtext:  #ff00f7b9;
    --light-shadow:  #857c467c;
    --light-a: #216590;
    --light-menu: rgb(206, 170, 187);
  
    --dark-bg: #2a3034;
    --light-hbg: #f5c7d900;
    --dark-qbg: #6f55835d;
    --dark-tb: #252425c5;
    --dark-color: #e5daff;
    --dark-h: #e680c4;
    --dark-h1: #5a6f78;
    --dark-shadow:  #02131a;
    --dark-figtext:  #02131a9d;
    --dark-a: #c593a6;
    --dark-menu: #45434d;

    --font-family-sans: 'Inter', sans-serif;
    font-weight: 300;
  }


@font-face {
  font-family: CS;
  src: url(../fonts/CsModenaPixel.otf);
}
@font-face {
  font-family: diskopiaLines;
  src: url(../fonts/DiskopiaLines.ttf);
}





h1  {
    display: block;
    position: relative;
    z-index: 0;
    font-size: 20rem;
    line-height: 20rem;
    font-family: CS;
    color: light-dark(var(--light-h1), var(--dark-h1));
}


h1 a {
        color: light-dark(var(--light-h1), var(--dark-h1));

}

h2 {
    font-size: 6rem;
}


@media screen and (max-width: 800px) {

        h1 {
                font-size: 10rem; 
                line-height: 7rem;
                hyphens: auto;

        }
}

.line {
    height: 10rem;
      background-image: linear-gradient(#bb86a9, #bb86a9);
  background-size: 0.5rem 100%;
  background-repeat: no-repeat;
  background-position: center center;
}