/* COLOR CHANGE */

.header{
  background: var(--color-background-two);
  /* border-bottom: 2px solid var(--color-code-yellow); */
}

#logo {
  color:var( --color-text-two);
}

.issue-description > p{
  background: var(--color-background-two);
  color:var( --color-text-two);
  /* border:3px solid var(--color-background); */
}

.issue-title{ 
  background: var(--color-background-two);
  color: var( --color-text-two);
  /* border:3px solid var(--color-background); */
}

.issue-two-poem{
  color: var(--color-background-two) !important;
  background:var( --color-text-two) !important;
}


.example-name{
  color: var( --color-text-two);
}

.source-text {
  color: var(--color-background-two);
  background:var( --color-text-two);
}

.primary-text{
  color: var(--color-background-two);
  background:var( --color-text-two) !important;
}


.primary-text-two {
  background: var(--color-background-two);
  color:var( --color-text-two) !important;
}


.primary-tex-two {
  color: var(--color-background-two);
  background:var( --color-text-two);
}

.read-more{
  color: var(--color-background-two);
  background: var( --color-text-two);
}

.about-text p{
  color:var( --color-text-two);
}

body::-webkit-scrollbar {
  background: var(--color-code-forest);
}

body::-webkit-scrollbar-thumb {
  background: var( --color-text-two);
}

#nav-icon span {
  background: var( --color-text-two);
}

.read-more:hover{
  color:  var( --color-text-two);
  background:  var(--color-background-two);
}

/* COLOR CHANGE */


.home-grid {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  list-style: none;
  grid-gap: 0rem;
  line-height: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  background:transparent;
}

.main{
  position: relative;
  width: 100%;
  margin: auto;
  top: 62px;
}


.gallery-slider {
  display: block;
}


.scroll-read{
  display: block;
  margin: 0px 0px;
  margin-left: 30px;
  font-size: 1.45rem;
  padding: 25px 6px;
  padding-top: 30px;
  height: 0px;
  display: block;
  width: fit-content;
  font-family: var(--font-family-regular);
  font-size: 2.7rem;
  background: var(--color-text-two);
  color: var(--color-background-two);
}

.scroll-read{
  display: none;
}



.home-grid li {
  position: relative;
  --cols: 1;
  --rows: 1;
  background: transparent;
  line-height: 0;
  /* border:5px solid tomato; */
  margin: 30px 10px;
}


.home-grid li:first-child {
  grid-column: 1 / span 1;
  grid-row: 1 / 4;
}



.home-grid li:nth-child(2) {
  grid-column: 2 / span 2;
  grid-row: 1;
}

.home-grid li:nth-child(3) {
  grid-column: 3 / span 1;
  grid-row: 2;
}

.home-grid li:nth-child(4) {
  grid-column: 1 / span 1;
  grid-row: 2;
}

.home-grid li:nth-child(5) {
  grid-column: 2 / span 2;
  grid-row: 3;
}

.home-grid li:nth-child(6) {
  grid-column: 1 / span 1;
  grid-row: 4;
}

.home-grid li:nth-child(7) {
  grid-column: 2 / span 1;
  grid-row: 4;
}

.home-grid li:nth-child(8) {
  grid-column: 1 / span 2;
  grid-row: 6;
}

.home-grid li:nth-child(9) {
  grid-column: 2 / span 2;
  grid-row: 7;
}

.home-grid li:nth-child(10) {
  grid-column: 1 / span 1;
  grid-row: 8;
}


.home-grid li:nth-child(11) {
  grid-column: 2 / span 2;
  grid-row: 8;
}

.home-grid li:nth-child(12) {
  grid-column: 2 / span 1;
  grid-row: 9;
}

.home-grid li:nth-child(13) {
  grid-column: 1 / span 2;
  grid-row: 10;
}


.home-grid li:nth-child(14) {
  grid-column: 2 / span 2;
  grid-row:11;
}

.home-grid li:nth-child(15) {
  grid-column: 1 / span 1;
  grid-row: 12;
}

.home-grid li:nth-child(16) {
  grid-column: 2 / span 2;
  grid-row: 12;
}

.home-grid a {
  display: block;
  /* height:fit-content; */
}

.home-grid img {
  position: relative;
  width:90%;
  margin: 0px;
  background: transparent;
  transition: all .3s;
  transition: 0s;
  cursor: default;
  /* outline: 8px solid white;
  outline-offset: -8px; */
  /* background: var(--color-box);  */
}

.home-grid figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  color: #fff;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 1;
  text-align: center;
  background: rgba(0,0,0, .5);
}

@media screen and (max-width: 1300px) {
  .home-grid {
    width: 98%;
    grid-template-columns: repeat(3, 1fr);
  }

  .scroll-read {
  margin-left: 20px;
  }

  .home-grid img {
    width:100%;
  }

.home-grid li:first-child {
  grid-column: 1 / span 2;
  grid-row: 1;
}



.home-grid li:nth-child(2) {
  grid-column: 3 / span 1;
  grid-row: 1;
}

.home-grid li:nth-child(3) {
  grid-column: 2 / span 1;
  grid-row: 2;
}

.home-grid li:nth-child(4) {
  grid-column: 1 / span 1;
  grid-row: 2;
}

.home-grid li:nth-child(5) {
  grid-column: 2 / span 1;
  grid-row: 3;
}

.home-grid li:nth-child(6) {
  grid-column: 1 / span 1;
  grid-row: 4;
}

.home-grid li:nth-child(7) {
  grid-column: 2 / span 2;
  grid-row: 5;
}

.home-grid li:nth-child(8) {
  grid-column: 1 / span 2;
  grid-row: 6;
}

.home-grid li:nth-child(9) {
  grid-column: 2 / span 2;
  grid-row: 7;
}

.home-grid li:nth-child(10) {
  grid-column: 1 / span 1;
  grid-row: 8;
}


.home-grid li:nth-child(11) {
  grid-column: 2 / span 2;
  grid-row: 8;
}

.home-grid li:nth-child(12) {
  grid-column: 2 / span 1;
  grid-row: 9;
}

.home-grid li:nth-child(13) {
  grid-column: 1 / span 2;
  grid-row: 10;
}


.home-grid li:nth-child(14) {
  grid-column: 3 / span 1;
  grid-row:11;
}

.home-grid li:nth-child(15) {
  grid-column: 1 / span 1;
  grid-row: 12;
}

.home-grid li:nth-child(16) {
  grid-column: 2 / span 2;
  grid-row: 12;
}
}


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

  .scroll-read{
    display: block;
    margin: 0px 0px;
    font-size: 1.45rem;
    padding: 15px 10px;
    padding-top:17px;
    height: 0px;
    display: block;
    width: fit-content;
    font-family: var(--font-family-regular);
    font-size: 1.3rem;
    color: var(--color-text-two);
    background:var(--color-background-two);
  }

    .home-grid {
      width: 98%;
      display: block;
      padding-bottom:100px;
    }
    .home-grid li {
      margin: 20px 10px;
      margin-top: 0px;
  }

    .home-grid img {
      width:100%;
    }

    .clock-circle {
      position: fixed;
      bottom: 31px;
      right: 0;
      height: 18px;
      padding: 2px 0px;
      padding-left: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--color-background-two);
      background: var(--color-text-two);
      font-family: var(--font-family-regular);
      font-size: 1.5rem;
    }

    #utk-circle{
      text-decoration: none;
      padding: 0px 6px;
      height: 22px;
      font-size: 19px;
      margin-left: 7px;
      background: var(--color-background-two);
      color: var(--color-text-two);
    }



.main {
  position: relative;
  top: 100px;
  width: 100%;

}


.gallery-slider {
  position: relative;
 
  margin:0 auto;
  }

  img {
    width:100%;
    height:auto;
    transform: none;
    cursor: default;
  }
  
  img:hover {
    transform: none;
  }

  h3.gallery{
  padding-left:2rem;
  font-size: 60px;

  }

  .gallery-slide{
  display: grid;
  grid-template-columns: 1fr 1fr;
  }

  .grid {
    --columns: 12;
    --gutter: 0rem;
    display: grid;
    grid-gap: var(--gutter);
    grid-template-columns: 1fr 1fr;
    margin-bottom:4rem;
    
  }
  .grid > .column {
    --gutter: 4rem;
    margin-bottom: var(--gutter);
  
  }

  .album-gallery{
    padding-left:4rem;
    padding-right:1rem;
  }

  .column > h1{
    font-family:var(--font-family-regular);
    width: fit-content;
    font-size:40px;
    color:var(--color-background);
    padding:5px;
    background: var(--color-header-background);
  }

  .column > p{
    font-family:var(--font-family-regular);
    width: fit-content;
    font-size:20px;
    color: var(--color-text);
    padding:5px;
    margin-top:0px;
    background: var(--color-background);
    margin-bottom:0px;
  }


  .gallery-slide{
    padding-left:4rem;
    padding-right:1rem;
  }


  .title{
    color:silver;
    
  }

  .textblock{
      margin-top:30px
  }

  .text {
    width:70%;
    /* background:var(--color-box); */
    font-size:16px;
    line-height: 1.3;
    color: var(--color-header);
    /* border:2px solid var(--color-header); */
    font-family:var(--font-family-sans);
    text-transform: none;
    word-spacing: 0px;
    padding: 10px 0px;
    hyphens: auto;
  }



  .paginator-center{
  position: fixed;
  z-index: 10;
  right: 400px;
  top: 70px;
  }

li.prev {

  position: relative;
  float: left;
  cursor: pointer;
  font-size:1.5rem;
  display: block;
  height: 48px;
  width: fit-content;
  padding-right:5px;
  font-family: "Diatype Regular";
  /* box-shadow: 8px 8px 12px 0 rgb(255 255 255 / 30%) inset, -4px -4px 8px 0 rgb(0 0 0 / 25%) inset; */
}

li.pagingInfo {
font-family: "Diatype Regular";
position: relative;
float: left;
cursor: pointer;
font-size:1.3rem;
display: block;
width: fit-content;
padding-right:5px;
/* box-shadow: 8px 8px 12px 0 rgb(255 255 255 / 30%) inset, -4px -4px 8px 0 rgb(0 0 0 / 25%) inset; */
}


li.next {
  position: relative;
  float: left;
  font-size:1.3rem;
  display: block;
  cursor: pointer;
  height: 48px;
  width: fit-content;
  font-family: "Diatype Regular";
  color:black;
}

li.next:hover {
color:grey;
}


.tagcaption {
display: inline-block;
font-size: 19px;
line-height: 1.3;
width: fit-content;
height:18px;
margin: 1px;
/* color: var(--color-code-purple); */
word-spacing: 0px;
font-family: "Life";
/* text-decoration: underline;
text-decoration-style: dotted; */
text-transform: capitalize;
background: transparent;
}

.main {
  top: 70px !important;
}

.grid {
  --columns: 12;
  --gutter: 4rem;
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
}

.text {
  width: 95%;
}

.album-gallery {
  padding-left: 0;
  padding-right: 0;
}

.grid > .column {
  --gutter: 0rem;
  margin-bottom: var(--gutter);
}

.issue-description::-webkit-scrollbar {
  width:1em;
  /* border-left:5px solid black; */
  /* background-image:
  linear-gradient(45deg, var(--color-code-orange) 25%, transparent 25%), 
  linear-gradient(135deg, var(--color-code-orange) 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, var(--color-code-orange) 75%),
  linear-gradient(135deg, white 75%, var(--color-code-orange) 75%); */
background-size:10px 10px; /* Must be a square */
 background-position:0 0, 5px 0, 5px -5px, 0px 5px; 
background: transparent;
}

.issue-description::-webkit-scrollbar-thumb {
  /* background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, #ffffff 3px, #ffffff 6px);
  background-color: #000000; */
  background: var(--color-background-two);
}


}