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

@font-face {
    font-family: 'kolta';
    src: url(../fonts/kolta.regular.woff) format('woff');
}


:root {
  /* this has to be set to switch between light or dark */
  color-scheme: light dark;

  --light-bg: #f3e4cf;
  --light-bg-bottom: #f3e4cf;
  --light-qbg: #a6594c20;
  --light-tb: #b941310a;
  --light-color: #202c31;
  --light-h: #5500ff;
  --light-a: #755131;
  --light-menu: #a6594c;
  --light-menu-hover: #b94031;
  --light-foot: #f3e4cfaa;

  --dark-bg: #0c1b30;
  --dark-bg-bottom: #0c1b30;
  --dark-qbg: #59a6b335;
  --dark-tb: #46bece1c;
  --dark-color: #dfd3ce;
  --dark-h: #aaff00;
  --dark-a: #8aaece;
  --dark-menu: #59a6b3;
  --dark-menu-hover: #46bfce;
  --dark-foot: #0c1b30aa;
}
body {
  background: unset;
  background-color: light-dark(white, black);
  background-image: linear-gradient(to top, transparent 50%, light-dark(var(--light-bg), var(--dark-bg)) 100% );
  
}

html {
  height: auto;
    /* background-color: light-dark(white, black);

    background-image: linear-gradient(to top, transparent 50%, light-dark(var(--light-bg), var(--dark-bg)) 100% );

  background-size: cover; */
}


h1, h2 {
    font-family: kolta;

  /* color: white;
  mix-blend-mode: difference; */
    -webkit-text-stroke: 1rem light-dark(var(--light-bg), var(--dark-bg));
    
    paint-order: stroke fill;
}



.content
{
  margin-top: 0rem;
}


#wide-header {
  /* body{ */
  background-image: url("/images/metatheory/ExamplesChinese00Jone_0115-edit.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  /* background-position-y: -30rem; */
  background-position: bottom;
  background-size: cover;
  background-size: 100%;
  width: 100%;
  height: 60rem;
  position: absolute;
  /* z-index: -1; */
}

h1  {
  position: relative;
  font-size: 20rem;
  line-height: 20rem;
  padding-top: 20rem;
  padding-bottom: 20rem;
}
.paragraph {
padding-top: 2.5rem;
}
h2 {

  /* font-family: var(--font-family-mono); */
  font-size: 6rem;
  line-height: 7rem;
  font-weight: 500;
  padding-right: 2rem;
}
@media screen and (max-width: 900px) {

  h1 {
    font-size: 15rem; 
    line-height: 15rem;
    hyphens: auto;
    padding-top: 10rem;
    padding-bottom: 15rem;
  }
  #wide-header {
    height: 40rem;
  }

  .paragraph {
padding-top:0rem;
}
}

@media screen and (max-width: 550px) {
  h1 {
    font-size: 8rem; 
    line-height: 8rem;
    hyphens: auto;
    padding-bottom: 6rem;
  }
  h2 {
    /* font-size: 3rem; */
  }
  #wide-header {
    height: 25rem;
  }
}

@media screen and (max-width: 350px) {
  h1 {
    font-size: 6rem; 
    line-height: 6rem;
    hyphens: auto;
    padding-bottom: 2.5rem;
  }
  #wide-header {
    height: 20rem;
  }
}

.dark #wide-header {
      filter: invert(100%);
}

.row.remaining {    top:-45rem;
}


#navbar a{
  color: light-dark(var(--light-bg), var(--dark-bg));
}

.line {
  height: 10rem;
  background-image: linear-gradient(#bb86a9, #bb86a9);
  background-size: 0.3rem 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.figure svg, .figure img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  filter: none;
  opacity: 1;
}

#hexagon {
  display: block;
  margin: auto;
  width: 60%;
  padding-bottom: 1rem;
}
#guest2024fig1 {
  display: block;
  margin: auto;
  width: 80%;
  padding-bottom: 1rem;
}

 .dark .invert {
    filter: invert(1);
}

#navbar a:hover{
    background-color: light-dark(var(--light-menu-hover), var(--dark-menu-hover));
}

#thought {
  width:85%;
  margin: auto;
}
#dialogue {
  width:90%;
  margin: auto;
}

#magnifyingglass {
  width:77%;
  margin: auto;
}

#earthcare {
  width:80%;
  margin: auto;
}


.light .preview {
filter: hue-rotate(45deg);
}

 .dark .preview {
filter:hue-rotate(50deg) invert(1) grayscale(0.55);
}