/* ALL */

    /* Scrollbar */

        /* Firefox */
        .the-cotainers-container.mainpage {
          scrollbar-width: none;
          scrollbar-color: #5e1812 #a0bbb2;
        }

        /* Chrome, Edge, and Safari */
        .the-cotainers-container.mainpage::-webkit-scrollbar {
          width: 15px;
        }

        .the-cotainers-container.mainpage::-webkit-scrollbar-track {
          background: #a0bbb2;
        }

        .the-cotainers-container.mainpage::-webkit-scrollbar-thumb {
          background-color: #5e1812;
          border-radius: 10px;
          border: 2px solid #a0bbb2;
        }
    
#songs-page, #l-l-l-page, #merch-page { 
    background-image: url(graphics/coming-soon-tile.png);
    background-repeat: repeat;
    background-size: 60%;
}


.the-cotainers-container {
  width: 100vw;
  height: 100vh;
  display: inline;
  flex-flow: column nowrap;
  overflow: auto;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: hidden;
}

.cameo {
  font-family: nitti-typewriter-cameo, sans-serif;
}
.underlined {
  font-family: nitti-typewriter-underlined, sans-serif;
}
.corrected {
  font-family: nitti-typewriter-corrected, sans-serif;
}

a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: inherit;
}

#back {
  filter: invert(11%) sepia(29%) saturate(6095%) hue-rotate(347deg) brightness(93%) contrast(95%);
  width: 5vw;
}

#back:hover {
  filter: invert(8%) sepia(32%) saturate(1799%) hue-rotate(324deg) brightness(93%) contrast(108%);
}

/* MAIN PAGE */
  
  body#main {background-color: #5E1712;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;}
  
  .the-cotainers-container.mainpage {
    background-color: #A0BBB2;
    width: calc(100vw - 1.5vw);
    height: calc(100vh - 1.5vw);
    display: flex;
    flex-flow: column nowrap;
    overflow: auto;
    align-items: center;
    justify-content: center;
  }

.main-container {
    display: grid;
    grid-template-rows: 3fr 82fr 160fr 226fr 167fr 10fr;
    grid-template-columns: 63fr 319fr 589fr 319fr 63fr;
    grid-template-areas:
        ".... .... presave .... ...."
        ".... .... myname .... ...."
        ".... songs india lll ...."
        ".... shows india merch ...."
        ".... lyrics india sayhi ...."
        ".... .... .... .... ....";
}
  
  .main-item:nth-child(1) {
    grid-area: songs;
  }
  .main-item:nth-child(2) {
    grid-area: lll;
  }
  .main-item:nth-child(3) {
    grid-area: shows;
  }
  .main-item:nth-child(4) {
    grid-area: merch;
  }
  .main-item:nth-child(5) {
    grid-area: lyrics;
  }
  .main-item:nth-child(6) {
    grid-area: sayhi;
  }

  .main-item:nth-child(7){
    grid-area: myname;
  }
  

  #main-title {
    color: #000000;
    grid-area: myname;
    font-family: campaign-serif, sans-serif;
    font-weight: 100;
    font-style: normal;
    text-align: center;
    font-size: 4vw;
    align-self: end; 
    z-index: 1;
    filter: invert(9%) sepia(36%) saturate(7307%) hue-rotate(353deg) brightness(83%) contrast(91%);
  }
  
  

  .main-item:nth-child(8) {
    grid-area: india;
    align-self: end;
  }
  
  #indiaimg {
    display: block;
    width: 88%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .main-item {
    font-size: 1.85vw;
    letter-spacing: .15vw;
    color: #000000;
    font-family: campaign-serif, sans-serif;
    font-weight: 100;
    font-style: normal;
    position: relative;
  }

.main-item.left:hover, .main-item.right:hover {
    filter: invert(8%) sepia(32%) saturate(1799%) hue-rotate(324deg) brightness(93%) contrast(108%);
  }
  
  .main-item.left {
    filter: invert(9%) sepia(36%) saturate(7307%) hue-rotate(353deg) brightness(83%) contrast(91%);
    text-align: right;
    align-self: end;
  }

  .row-1 {
    line-height: 2.3vw;
    margin-bottom: 2vw;
  }

  #merch,#shows {
    margin-bottom: 4.2vw;
  }

  #merch-match, #shows-match {
    position: absolute;
    bottom: 0;
    z-index: -1;
  }

  #shows-match {
    right: 0;
  }

  #shows {
    z-index: 1;
  }

  #merch-match {
    left: 0;
  }

  #merch {
    z-index: 1;
  }
                                              
  .main-item.left.row-3 {
    line-height: 1.4vw;
  }

  #say-hi {
    margin-bottom: 3.2vw;
    z-index: 1;
  }

  #say-hi-match {
    z-index: -1;
    position: absolute;
    bottom: 0;
  }

  .main-item.right {
    filter: invert(9%) sepia(36%) saturate(7307%) hue-rotate(353deg) brightness(83%) contrast(91%);
    text-align: left;
    align-self: end;
  }
  
  .main-matches {
    width: 85%;
    margin-bottom: 2vw;
  }

/* SHOWS */

body#shows {
  background-color: #A0BBB2;
}

.shows-container {
    display: grid;
    grid-template-rows: 1fr 2fr 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "showstitle"
        "list"
        "back";
    height: 100%;
}

.shows-item:nth-child(1) {
  grid-area: showstitle;
}
.shows-item:nth-child(2) {
  grid-area: list;
}
.shows-item:nth-child(3) {
  grid-area: back;
}

.shows-item:nth-child(4) {
  grid-area: leftside;
}

.shows-item:nth-child(5) {
  grid-area: rightside;
}

#tickets {
  background: url(graphics/tickets.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 68%;
}

#butterfly {
  background: url(graphics/butterfly.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 80%;
}

#shows-title {
  color: #0c2a2b;
  font-family: crayonette-djr, sans-serif;
  font-style: normal;
  text-align: center;
  font-size: 4.2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
#shows-list {
  grid-area: list;
  overflow: scroll;
}

.shows-item {
    font-size: 2vw;
    text-align: center;
    color: #0c2a2b;
    font-family: nitti-typewriter-normal, sans-serif;
    line-height: 4vw;
}

.press-item {
    font-size: 2vw;
    text-align: center;
    color: #0c2a2b;
    font-family: nitti-typewriter-normal, sans-serif;
}

.shows-item.back {
  align-self: center;
}

/* LYRICS */


body#lyrics-page {
  background-color: #A0BBB2;
}

.lyrics-container {
  display: grid;
  grid-template-rows: .75fr 2.25fr 1fr;
  grid-template-columns: 245fr 885fr 245fr;
  grid-template-areas: ".... .... ...."
                       "leftleaf   releases   rightleaf"
                       "....   back   ....";
                  height: 100%;

}

.lyrics-item:nth-child(1) {
  grid-area: releases;
}
.lyrics-item:nth-child(2) {
  grid-area: back;
}
.lyrics-item:nth-child(3) {
  grid-area: leftleaf;
}

.lyrics-item:nth-child(4) {
  grid-area: rightleaf;
}

.lyrics-item {
  font-size: 2vw;
  text-align: center;
  color: #0c2a2b;
  font-family: nitti-typewriter-normal, sans-serif;
  line-height: 4vw;

}

.lyrics-item.back {
  align-self: center;
}

#releases {
  line-height: 4vw;
  text-align: center;
  color: #0c2a2b;
  display: flex;
  align-items: center;
  justify-content: center;
}

#release-year {
  font-size: 4.2vw;
  font-family: crayonette-djr, sans-serif;
}

#release-title {
  font-size: 2vw;
  font-family: nitti-typewriter-cameo, sans-serif;
}

#release-songs {
  font-size: 2vw;
  font-family: nitti-typewriter-normal, sans-serif;
}

#leftleaf {
  background: url(graphics/leftleaf.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
}

#rightleaf {
  background: url(graphics/rightleaf.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 60%;
}

/* LYRICS - CLICK */



.click-lyrics-container {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
  grid-template-columns: 245fr 885fr 245fr;
  grid-template-areas: ".... lyricstitle ...."
                       "leftleaf   actualwords   rightleaf"
                       "....   back   ....";
                  height: 100%;

}

.click-lyrics-item:nth-child(1) {
  grid-area: lyricstitle;
}
.click-lyrics-item:nth-child(2) {
  grid-area: actualwords;
}
.click-lyrics-item:nth-child(3) {
  grid-area: back;
}

.click-lyrics-item:nth-child(4) {
  grid-area: leftleaf;
}

.click-lyrics-item:nth-child(5) {
  grid-area: rightleaf;
}

.click-lyrics-item {
  font-size: 2vw;
  text-align: center;
  color: #0c2a2b;
  font-family: nitti-typewriter-normal, sans-serif;
  line-height: 4vw;
}

.click-lyrics-item.back {
  align-self: center;
}

#lyrics-block {
  background-color: #f2ece3;
  box-shadow: 5px 5px 10px 1px rgba(12,42,43,0.51);
  margin-top: -3vw;
  margin-bottom: -3vw;
  overflow: scroll;
  padding: 1.5vw;
  font-size: 1.5vw;
  line-height: 2.2vw;
}

#leftleafbutton {
  background: url(graphics/leftleaf.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
}

#rightleafbutton {
  background: url(graphics/rightleaf.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 60%;
}

/* SAY HI */

#say-hi-page { 
  background-image: url(graphics/matchbox.png);
  background-color: #70998c;
  background-size: 45%;
  background-repeat: no-repeat;
  background-position: center;
}

#contact-info {
  text-align: center;
  line-height: 3vw;
  margin-left: -12vw;
  margin-top: 14vw;
}

#contact-name {
  font-size: 3vw;
  font-family: crayonette-djr, sans-serif;
  font-style: normal;
  line-height: 4vw;
}

#contact-details {
  font-size: 1.5vw;
  font-family: nitti-typewriter-normal, sans-serif;
  font-style: normal;
}

#contact-link1, #contact-link2 {
  font-size: 1.5vw;
  font-family: nitti-typewriter-underlined, sans-serif;
  font-style: normal;
}






/* responsive shiz */

@media (max-aspect-ratio: 13/6) and (orientation: landscape) {
      /* Scrollbar */ 
      body {
        overflow-y: hidden;
      }

      body::-webkit-scrollbar{
        display: none;
      }

      
      .the-cotainers-container::-webkit-scrollbar{
        display: none;
      }
}

@media (min-aspect-ratio: 13/6) and (orientation: landscape) {

  .the-cotainers-container.mainpage {
    display: inline;
  }

  body {
    overflow-y: visible;
  }

  }

@media (min-aspect-ratio: 494/831) and (max-aspect-ratio: 1/1) {
  .the-cotainers-container.mainpage {
    display: inline;
  }
}


/* tablets and phones in landscape */

@media (max-width: 1200px) and (orientation: landscape) {

  .main-item {
    font-size: 18px;
  }

  .row-1 {
    line-height: 25px;
  }

  .main-item.left.row-3 {
    line-height: 16px;
  }
}

/* phones in portrait */

  @media (orientation: portrait) {

    .main-container {
      display: grid;
      grid-template-rows: .01vw 10vw 85vw 1.3fr 1.3fr 1.3fr;
      grid-template-columns: 1fr 1fr;
      column-gap: 10vw;
      row-gap: 2vw;
      grid-template-areas: "....   ...."
                          "myname   myname"
                           "india   india"
                           "songs   lll"
                           "shows   merch"
                           "lyrics   sayhi";
    }

    #main-title {
      font-size: 8vw;
      margin-left: 7.5vw;
      margin-right: 7.5vw;
      align-self: center;
    }

    #indiaimg {
      margin-left: auto;
      margin-right: auto;
      width: auto;
      max-width: 85vw;
    }

    #shows-match, #merch-match {
      width: 35vw;
      display: none;
  }

  .main-item.left, .main-item.right {
    font-size: 6vw;
    line-height: 6vw;
    margin: 0vw;
    padding: 0vw;
    align-self: center;
    height: 8vw;
    text-decoration: underline;
  }

  .main-item.left {
    text-align: right;
  }

  .main-item.right {
    text-align: left;
  }

  .row-1 {
    margin-bottom: 0vw;
  }

  #say-hi, #lyrics {
    margin-bottom: 0vw;
    z-index: 1;
  }


  .main-matches {
    display: none;
  }
  
  .main-item.left.row-3 {
    line-height: 6vw;
}

.lyrics-container {
    grid-template-columns: 1fr;
    grid-template-areas:
        "...."
        "releases"
        "back";
}

#release-year, #shows-title {
    font-size: 12.6vw;
}
#release-title, #release-songs, #shows-list  {
    font-size: 6vw;
}
#releases, #shows-list {
    line-height: 12vw;
}
#back {
    width: 8vw;
}

.click-lyrics-container {
    display: grid;
    grid-template-rows: 1fr 2fr 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "lyricstitle"
        "actualwords"
        "back";
    height: 100%;
}

#lyrics-block {
    line-height: 6vw;
    font-size: 5vw;
}

/* tablets in portrait */


@media (min-aspect-ratio: 563/890) and (max-aspect-ratio: 596/762) { 
  
  .main-container {
  grid-template-rows: .01vw 10vw 50vw 1.3fr 1.3fr 1.3fr;
  }

  #indiaimg {
    max-width: 50vw;
  }
  
  .the-cotainers-container.mainpage {
    display: flex;
  }

  .main-item.left, .main-item.right {
    font-size: 5vw;
    align-self: auto;
  }
  



}