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


@font-face {
    font-family: 'RetraConsole';
    src: url(../fonts/RetraConsole.ttf) format('woff2');
}

:root {
    /* this has to be set to switch between light or dark */
    color-scheme: light dark;
  
    --light-bg:#f9f1e6;
    --light-bg-bottom:#eee9cb;
    --light-hbg: #0e3b3925;
    --light-qbg: #ff00d013;
    --light-tb: #ecf1efc5;
    --light-color: #360000;
    --light-h:  #e600ff;
    --light-cog: #b388b1;
    --light-figtext:  #e8e2d5b9;
    --light-shadow:  #857c467c;
    --light-a: #a61557;
    --light-menu: #e0cfc1;
    --light-row-bg: #eee9cbb4;
    --light-foot: #ffffffa3;
  
    --dark-bg: #42001b;
    --dark-bg-bottom: #202528;
    --light-hbg: #f5c7d900;
    --dark-qbg: #ff00f21e;
    --dark-tb: #252425c5;
    --dark-color: #f9f1e6;
    --dark-h:  #e600ff;
    --dark-cog: #b388b1;
    --dark-shadow:  #02131a;
    --dark-figtext:  #02131a9d;
    --dark-a: #c57b97;
    --dark-menu: #310014;
    --dark-row-bg: #2c3236;
    --dark-foot: #000000a3;


  }

  body {
        background:  light-dark(var(--light-bg), var(--dark-bg));

  }

  #wide-header {
  /* body{ */
  background-image: url("/images/image-from-rawpixel-id-12241526-edited.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center;
  background-size: cover;
  background-size: 100%;
  width: 100%;
  height: 160rem;
  position: absolute;
  top: -30rem;
  z-index: -1;

  background-image:  linear-gradient(to bottom,
                               transparent 50%,
                                light-dark(var(--light-bg), var(--dark-bg)) 85%),
                  url("/images/image-from-rawpixel-id-12241526-edited.png");

}

  h1, h2 {
    font-family: RetraConsole, 'Courier New', Courier, monospace;
  }
  h1 {  
    font-size: 9.5rem;
    line-height: 9.5rem;
    padding-top: 11rem;
    padding-bottom: 60rem;
    text-align: center;
    -webkit-text-stroke: 0.3rem light-dark(var(--light-h), var(--dark-h));

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

  }
  h1 a:hover {
    opacity: 1 !important;
    color: #ffffff00 !important;
    /* -webkit-text-stroke: 0.3rem light-dark(var(--light-a), var(--dark-a)); */

  }
  h2 {

    font-size: 4rem;
    line-height: 4rem;
  }

  /* #cog {
    color: light-dark(var(--light-cog), var(--dark-cog));
  }
  #sci {
    color: light-dark(var(--light-sci), var(--dark-sci));


  } */

.break {
    display: none;
}
  @media screen and (max-width: 1250px) {
  #wide-header {
  background-position: top;

    height: 160rem;

  }
}
  @media screen and (max-width: 1150px) {
  #wide-header {
    height: 120rem;
  top: -10rem;

  }
  h1 {  
    font-size: 8rem;
    padding-bottom: 50rem;
  }
}
  @media screen and (max-width: 900px) {
  #wide-header {
    height: 120rem;
  top: -10rem;

  }
  h1 {  
    font-size: 5rem;
    line-height: 5rem;
  }


date {
  opacity: 0.7;
}



.byline {
  /* padding-bottom: 2rem; */
      /* color: light-dark(var(--light-h), var(--dark-h)); */

}
}

  @media screen and (max-width: 860px) {
  #wide-header {
    height: 100rem;
  top: -20rem;

  }
  h1 {  
            padding-top: 3rem;

        padding-bottom: 30rem;

    /* font-size: 5rem; */
  }
}
  @media screen and (max-width: 710px) {
  #wide-header {
    height: 80rem;



  }
  h1 {  
                padding-top: 0rem;

        padding-bottom: 20rem;

    /* font-size: 5rem; */
  }
}
  /* @media screen and (max-width: 590px) {
  #wide-header {
    height: 70rem;

  }

  .break {
      display: unset;
  }
  h1 {
          padding-bottom: 10rem;

  }
} */
  @media screen and (max-width: 590px) {
  #wide-header {
    height: 80rem;
      background-position: bottom;


  }

  .break {
      display: unset;
  }
    h1 {
          padding-bottom: 15rem;

  }
}
  @media screen and (max-width: 460px) {
  #wide-header {
    height: 65rem;
      background-position: 80%;


  }
  .break {
      display: unset;
  }

    h2 {

    font-size: 3rem;
    line-height: 3.2rem;
  }
    h1 {  

                padding-bottom: 5rem;

    }
}


  @media screen and (max-width: 400px) {
      #wide-header {
        height: 50rem;
          background-position: center;
      top: -10rem;


      }
        h1 {  
                    padding-bottom: 1rem;

        }

           h2 {

    font-size: 2.5rem;
    line-height: 2.8rem;
  }
}
.light img {
  filter: unset;
  opacity: 0.7;
}

.dark img {
  /* this is a placeholder because eventually
  this has to be manually flipped/saved within css*/
  
  opacity: 0.7;
}


#typewriter {
  width: 60%;
}
#cabinet {
  width: 80%;
}

#woman {
  width: 80%;
}


img.preview {
filter:  sepia(1) hue-rotate(300deg);
}



.shadow-text {
    text-shadow: 0px 0px 0.1rem light-dark(var(--light-foot), var(--dark-foot)),
     0px 0px 1rem light-dark(var(--light-bg), var(--dark-bg)),
     0px 0px 0.5rem light-dark(var(--light-foot), var(--dark-foot));
}


blockquote > p:last-child {

  margin-block-end: 0;
}