:root {
    --c1: #744c3c;
    --c2: rgb(82, 53, 42);
    --c3: #ffffff;
    --c4: #F2CCBD;
    --c5: #d6e2fd;
    --c6: #92b4af;
    --c7: #888baa;
    --c8: #733C53;
    --c9: #d6a7bb;
    --c10: #B2BCD2;
    --m1: #8c739e;
    --m2:  #6c619c;
    --g1: #C0E4EB;
    --g2: #517b83;
    --s1: rgba(0, 0, 0, 0.062);
    --p: 1ch;
  }

.flex-container {
    display: flex;
    justify-content: center;

}

.bg-custom
{
    background-image: linear-gradient(var(--c1),var(--c2));
}

body { 
    
    /*background-image: url(img/Skryabin-752x440.jpg) no-repeat center center fixed;
    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: fixed;*/
    background-image: linear-gradient(var(--g1),var(--m1));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.navbar-brand{
  font-size: 2.5vh;
}

.collapseBar{
  height: 2.5vh;
}

.dropBar{
  position: absolute;
}


.nav-link{
  
  font-size: 2vh;
}

nav {
  
  text-align: center;
  margin-bottom: 1%;
  font-size: 2vh;
}


hr {
    display: none;
}
button {
    border-color: rgba(0, 0, 0, 0);
    border-radius: 25px;  
}
button:hover 
{
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0, 0, 0, 0.521);
    transition-duration: 0.4s;
}

  .a-container {
    padding: 1%;
    margin: auto;
    margin-bottom: 0.5%;
    border: 1px solid linear-gradient(var(--c1),var(--c2));
    background: linear-gradient(var(--c1),var(--c2));
    border-radius: 25px;  
    width: 80%;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    flex: 0 0 auto;
    box-shadow: 5px 5px var(--s1);
  }

  .am-container {
    padding: 1%;
    margin: auto;
    margin-bottom: 0.5%;
    border: 1px solid linear-gradient(var(--c1),var(--c2));
    background: linear-gradient(var(--c9),var(--c8));
    border-radius: 25px;  
    width: 80%;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap-reverse;
    flex: 0 0 auto;
    box-shadow: 5px 5px var(--s1);
    
    
    
    /*display: table;*/
  }

  .ag-container {
    padding: 1%;
    margin: auto;
    margin-bottom: 0.5%;
    border: 1px solid linear-gradient(var(--c1),var(--c2));
    background: linear-gradient(var(--c6),var(--c7));
    border-radius: 25px;  
    width: 80%;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    flex: 0 0 auto;
    box-shadow: 5px 5px var(--s1);
    
  }

  .amt-container {
    padding: 1% 5%;
    margin: auto;
    margin-bottom: 0.5%;
    border: 1px solid linear-gradient(var(--c1),var(--c2));
    background: linear-gradient(var(--c9),var(--c8));
    border-radius: 25px;  
    width: 50%;
    list-style: none;
    display: table;
    flex-direction: column;
    flex-wrap:wrap-reverse;
    flex:50%;
    box-shadow: 5px 5px var(--s1);
    text-align: center;
    align-items: center;
    content: "";
    clear:both;
    /*display: table;*/
  }

  
  
  .b-container {
    padding: 1%;
    margin: auto;
    margin-bottom: 0.5%;
    border: 1px solid linear-gradient(var(--c1),var(--c2));
    background: linear-gradient(var(--c1),var(--c2));
    border-radius: 25px;  
    width: 80%;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    flex: 0 0 auto;
    box-shadow: 5px 5px var(--s1);
    padding: 1%;
    margin: auto;
    margin-bottom: 2.5%;
    
    
  }

  
  .s-container {
    padding: 1%;
    margin: auto;
    margin-bottom: 1%;
    border: 1px solid linear-gradient(var(--c1),var(--c2));
    background: linear-gradient(var(--c1),var(--c2));
    border-radius: 25px;  
    width: 40%;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 0 auto;
    box-shadow: 5px 5px var(--s1);
  }

  .g-container {
    padding: 1%;
    margin: auto;
    margin-bottom: 1%;
    border: 1px solid linear-gradient(var(--c1),var(--c2));
    background: linear-gradient(var(--c6),var(--c7));
    border-radius: 25px;  
    height:20vh;
    width: 40vh;
    list-style: none;
    display:block;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 0 auto;
    box-shadow: 5px 5px var(--s1);
  }

  .m-container {
    padding: 1%;
    margin: auto;
    margin-bottom: 1%;
    border: 1px solid linear-gradient(var(--c1),var(--c2));
    background: linear-gradient(var(--c9),var(--c8));
    border-radius: 25px;  
    height:20vh;
    width: 40vh;
    list-style: none;
    display:block;
    flex-direction: row;
    flex-wrap: wrap;
    flex: auto;
    box-shadow: 5px 5px var(--s1);
  }
  .p-container {
    width: 100%;
    background-color: var(--s1);
  }

  
  .fontSize1{
    font-size:3.5vh; 
    
    text-shadow:0.25vh 0.25vh #00000092;
  }

  .fontSize2{
    font-size:2.5vh; 
      text-shadow:0.25vh 0.25vh #00000092;
  }

  .fontSize3{
    font-size: 2.25vh; 
    text-shadow:0.25vh 0.25vh #00000092;
    /*text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; */ 
  }

  .fontSize4{
    font-size: 2vh; 
    text-shadow:0.25vh 0.25vh #00000092;
    /*text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; */ 
  }

  .link{
    font-size:2.5vh; 
    
}



  footer{
      margin-top: auto;
  }
  h1 {
    font-size: 4.5em;
    width: 60%;
  }
  
  h2 {
    font-size: 3.5vh;
    margin-bottom: 5%;
    color: var(--c3);
    text-shadow:0.25vh 0.25vh #00000092;
  }
  
  h5 {
    text-shadow: 2px 2px var(--s1);
    color: var(--c3);
  }
  
  p {
    font-size: 1em;
    color:var(--c3);
  }
  /* a display property of "none" makes the project1 container invisible at load */

  img{
    display: flex;
  }
  #chromesthesia-container {
    display: flex;
  }
  
  #source-container {
    display: flex;
  }
  
  .item {
    flex: 1;
    /*background: linear-gradient(var(--c1),var(--c2));*/
    
    padding: var(--p);
    min-height: 4rem;
  }

  .video {
    align-items: flex-end;
    width: 50%;
    padding: 100%;
  }
  .about-header{
    font-size:3vh;
    text-align: center;
    align-items: center;
  }
  
  #about-image {
    max-width: 100%;
    height: auto;
    box-shadow: 3px 3px var(--s1);
    margin-bottom: 2%;
    border-radius: 25px;  
  }
  
  #chromesthesia-image {
    max-width: 100%;
    height: auto;
    box-shadow: 3px 3px var(--s1);
    margin-bottom: 2%;
  }
  
  .angry-grid {
    display: grid; 
 
    grid-template-rows: 1fr;
    
    
    gap: 0px;
    height: 100%;
 
    
  }
   
  #item-0 {
      grid-row-start: 1;
      grid-column-start: 1;
  
      grid-row-end: 2;
      grid-column-end: 4;
  }
  #item-1 { 
      grid-row-start: 2;
      grid-column-start: 1;
  
      grid-row-end: 3;
      grid-column-end: 2;
  }
  #item-2 {
      grid-row-start: 2;
      grid-column-start: 3;
  
      grid-row-end: 3;
      grid-column-end: 4;
  }
  /*Page Transition effect*/
  @keyframes fadein
  {
      0% 
      {
          opacity: 0;
          
      }
      100%
      {
          opacity: 1;
      
      }
  }
  
  #fadein p, .a-container, .am-container, .ag-container, .amt-container, .c-container, .s-container
  {
    animation-duration: 3s;
      animation-name: fadein;
      animation-iteration-count: 1;
      animation-direction: alternate;
  }
  
  @media screen and (max-width: 1200px) {
    
    .container, .a-container, .c-container, .s-container {
      padding: 10%;
      padding-right: 10%;
      margin: auto;
      margin-bottom: 2.5%;
      border: none;
      background: linear-gradient(var(--c1),var(--c2));
      width: 100%;
      list-style: none;
      display: table;
      flex-direction: column;
      flex-wrap: wrap;
      flex: auto;
      box-shadow: none;
   
    }

    .m-container, .g-container{
      width: 100%;
      text-align: center;
      align-items: center;
      padding-bottom: 10%;
    }
    

    .am-container, .amt-container{
      
      padding: 5%;
      margin: auto;
      margin-bottom: 2.5%;
      border: 1px solid linear-gradient(var(--c1),var(--c2));
      background: linear-gradient(var(--c9),var(--c8)); 
      width: 100%;
      list-style: none;
      display:table;
      flex-direction:row;
      flex-wrap:wrap;
      text-align: center;
      flex:auto;
      align-items: center;  
      box-shadow: 5px 5px var(--s1);
      font-size:x-small;
      
    }

    .b-container{
      padding: 5%;
      margin: auto;
      margin-bottom: 2.5%;
      border: 1px solid linear-gradient(var(--c1),var(--c2));
      background: linear-gradient(var(--c1),var(--c2));
      width: 100%;
      list-style: none;
      display:table;
      flex-direction:row;
      flex-wrap:wrap;
      text-align: center;
      flex:auto;
      align-items: center;  
      box-shadow: 5px 5px var(--s1);
      font-size:x-small;

    }
    

    .refImage{
      width: 100%;
    }

    .collapseBar{
      height: auto;
    }
    
    .dropBar{
      position: relative;
    }

    .ag-container{
      
      padding: 5%;
      margin: auto;
      margin-bottom: 2.5%;
      border: 1px solid linear-gradient(var(--c1),var(--c2));
      background: linear-gradient(var(--c6),var(--c7));
      width: 100%;
      list-style: none;
      display:table;
      flex-direction:row;
      flex-wrap:wrap;
      text-align: center;
      flex:auto;
      align-items: center;  
      box-shadow: 5px 5px var(--s1);
      font-size:x-small;
      
    }

    .fontSize1{
      font-size:4vh; 
     
    }
  
    .fontSize2{
      font-size:3.75vh; 
    
    }
  
    .fontSize3{
      font-size: 3.25vh; 
   
    }

    .fontSize4{
      font-size: 3vh; 
   
    }


    .video{
      display: table;
      flex-direction:column;
      flex-wrap:wrap;
      flex: auto;
      align-items:center;
      width: 100%;
      /*height: 180px;*/
      padding: 10%;
      /*overflow: hidden;*/
    }

    #p5-canvas {
        height:100%;
    }

    .s-container {
        margin-bottom: 66%;
    }


    #keyC, #keyCS, #keyD, #keyDS, #keyE, #keyF, #keyFS, #keyG, #keyGS, #keyA, #keyAS, #keyB{
        display: none;
    }

  }

  #keyC:hover, #keyCS:hover, #keyD:hover, #keyDS:hover, #keyE:hover, #keyF:hover, #keyFS:hover, #keyG:hover, #keyGS:hover, #keyA:hover, #keyAS:hover, #keyB:hover{
      opacity: 1;
  }
  #keyC {
    position: absolute;
    left: 26%;
    width: 6%;
    height: 30%;
    border-radius: .5rem;
    margin-top: 100%;
    background: white;
    color: #eee;
    opacity: 0.25;
    bottom: 0;
    z-index: 0;
  }

  #keyCS {
    position: absolute;
    left: 30.75%;
    width: 3%;
    height: 15%;
    border-radius: .5rem;
    background: #000;
    color: #eee;
    opacity: 0.25;
    bottom: 15%;
    z-index: 1;
  }

  #keyD {
    position: absolute;
    left: 32.5%;;
    width: 6%;
    height: 30%;
    border-radius: .5rem;
    background: white;
    color: #eee;
    bottom: 0;
    opacity: 0.25;
    z-index: 0;
    margin-top: 1%;
  }

  #keyDS {
    position: absolute;
    left: 37.25%;
    width: 3%;
    height: 15%;
    border-radius: .5rem;
    background: #000;
    color: #eee;
    opacity: 0.25;
    bottom: 15%;
    z-index: 1;
  }

  #keyE {
    position: absolute;
    left: 39%;
    width: 6%;
    height: 30%;
    border-radius: .5rem;
    background: white;
    color: #eee;
    opacity: 0.25;
    bottom: 0;
    z-index: 0;
  }

  #keyF {
    position: absolute;
    left: 45.5%;
    width: 6%;
    height: 30%;
    border-radius: .5rem;
    background: white;
    color: #eee;
    opacity: 0.25;
    bottom: 0;
    z-index: 0;
  }

  #keyFS {
    position: absolute;
    left: 50.25%;
    width: 3%;
    height: 15%;
    border-radius: .5rem;
    background: #000;
    color: #eee;
    opacity: 0.25;
    bottom: 15%;
    z-index: 1;
  }
  #keyG {
    position: absolute;
    left: 52%;
    width: 6%;
    height: 30%;
    border-radius: .5rem;
    background: white;
    color: #eee;
    opacity: 0.25;
    bottom: 0;
    z-index: 0;
  }

  #keyGS {
    position: absolute;
    left: 56.75%;
    width: 3%;
    height: 15%;
    border-radius: .5rem;
    background: #000;
    color: #eee;
    opacity: 0.25;
    bottom: 15%;
    z-index: 1;
  }
  #keyA {
    position: absolute;
    left: 58.5%;
    width: 6%;
    height: 30%;
    border-radius: .5rem;
    background: white;
    color: #eee;
    opacity: 0.25;
    bottom: 0;
    z-index: 0;
  }

  #keyAS {
    position: absolute;
    left: 63.25%;
    width: 3%;
    height: 15%;
    border-radius: .5rem;
    border-color: none;
    background: #000;
    color: #eee;
    opacity: 0.25;
    bottom: 15%;
    z-index: 1;
  }

  #keyB {
    position: absolute;
    left: 65%;
    width: 6%;
    height: 30%;
    border-radius: .5rem;
    background: white;
    color: #eee;
    opacity: 0.25;
    bottom: 0;
    z-index: 0;
  }