@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:#efecdd;
    --light-hbg: #0e3b3925;
    --light-qbg: #ffdb002e;
    --light-tb: #ecf1efc5;
    --light-color: #360000;
    --light-h:  #de86e8;
    --light-h1: #857c46;
    --light-figtext:  #e8e5d5b9;
    --light-shadow:  #857c467c;
    --light-a: #aa4735;
    --light-menu: #e0dbc1;
  
    --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: diskopiaFlat;
  src: url(../fonts/DiskopiaFlat.ttf);
}
@font-face {
  font-family: diskopiaLines;
  src: url(../fonts/DiskopiaLines.ttf);
}





h1
 {
  display: block;
  position: relative;
  z-index: 0;


        /* padding-top: 30rem; */
        font-size: 16rem;
        line-height: 10rem;
        font-family: diskopiaFlat;
        /* padding-top: 2rem; */

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

        /* -webkit-text-stroke: 0.2rem light-dark(var(--light-color), var(--dark-color)); */

        /* text-shadow:
                light-dark(var(--light-h1-shadow), var(--dark-h1)) 0rem 1rem 0rem,
                light-dark(var(--light-h1-shadow), var(--dark-h1)) 0rem 3rem 0rem,
                light-dark(var(--light-h1-shadow), var(--dark-h1)) 0rem 5rem 0rem,
                light-dark(var(--light-h1-shadow), var(--dark-h1)) 0rem 7rem 0rem;
        paint-order: stroke fill; 
        */


}



h1 a {
        color: light-dark(var(--light-h1), var(--dark-h1));
          /* text-shadow:0 0 2rem light-dark(white, black); */

}


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

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

        }
}






/* .col-12 { background-color: #cccccccc;     
           box-shadow: -10px 10px light-dark(var(--light-color), var(--dark-color));}
 */

li {
        text-align: left;
}

h3 {
        padding-top: 0.5rem;
        line-height: normal;

}
/* h2#activism, h2#allies, h2#cail */
h2
{
    font-family: 'diskopiaLines', serif;
    font-size: 10rem;
    line-height: 7rem;
                    hyphens: auto;

          /* text-shadow:0 0 2rem light-dark(white, black); */

    /* margin-bottom: 2rem; */
    /* display: inline-block;
    hyphens: none; */

}



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

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





:target {
    padding-top: 0rem;
}



#smoke {
        background-size: cover;
        position: relative;
        min-height: 40rem; 
        padding-right:3rem;    
        margin-bottom: 1rem;
        min-width: 100%;
        background-image: url("../images/smoke.jpg");
        background-position: top;
        box-shadow: 1rem 1rem light-dark(var(--light-shadow), var(--dark-shadow));
}






img.figure
{
        padding: 0;
        /* margin-bottom: 3.5rem; */
        width: 100%
}

img.figure:hover
{
}

img.figure.left {  
        box-shadow: -1.5rem 1.5rem light-dark(var(--light-shadow), var(--dark-shadow));

}

/* img.figure.left:hover {  
        box-shadow: -3rem 3rem light-dark(var(--light-shadow), var(--dark-shadow));

} */


img.figure.right
{     

        box-shadow: 1.5rem 1.5rem light-dark(var(--light-shadow), var(--dark-shadow));
        
}
/* img.figure.right:hover
{     

        box-shadow: 3rem 3rem light-dark(var(--light-shadow), var(--dark-shadow));
} */

.container-img {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  /* transition: .5s ease; */
  /* background-color:light-dark(var(--light-bg), var(--dark-shadow)); */
}

.container-img:hover .overlay {
  /* opacity: 0.5; */
  opacity: 1;
}

.text {
  /* /* color: white; */
  color: light-dark(var(--light-color), var(--dark-color));
  font-size: 20px; 
  position: absolute;
  font-size: small;
  font-weight: 300;
  width: 100%;
  /* top: 100%;
  left: 10%; */
  /* -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); */
  /* text-align: center; */
  padding: 1rem;
  background-color:  light-dark(var(--light-figtext), var(--dark-figtext)); 
  /* opacity: 1 !important; */
}

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


        .right-row {
                flex-direction: column-reverse

        }


}

.header-row
{padding-bottom: 2rem;}

#cails {
        display: block;
        margin: auto;
        width: 90%;
        padding-bottom: 1rem;
        /* position:fixed; */
}

.figure svg 
{

    left: 0;
    top: 0;
    width: 100%;
    height: 100%;}