body {
background-color: white;
}

#header_grid{
  display:grid;
  grid-template-columns: repeat(12,1Fr);
  grid-template-rows:repeat(3, auto);
  grid-gap: 20px;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  background: white;
  z-index: 3;
}


#title {
  grid-column: 1/13;
  grid-row:1/2;
  font-family: 'Roboto Slab', serif;
  font-size: 5.2vw;
  font-weight:900;

  filter:blur(7px);
  text-decoration:none;
  text-align: center;
  transition:filter 2s;
}

#title:visited {
  color:#B4FC6C;
  text-decoration: none;
    
}
#title:hover{
  filter: blur(0px);
}
#title:active{
  filter: blur(0px);

}

#w {

  grid-column:4/6;
  grid-row: 2/3;
  height: 50px;
  font-family: 'Roboto Slab', serif;
  font-size: 17px;
  font-weight: 100;
  text-align: center;
  padding-top:40px;
  color: black;
  text-decoration:none;
  background-image: url("pics/works.png");
  background-size: 200px 100px;
  background-repeat: no-repeat;
  background-position: top;
  filter:blur(0px);
  
}

     #w:visited {
        color:black;
        filter:blur(0px);
        text-decoration: none;
      }


#ex {
  grid-column: 6/8;
  grid-row: 2/3;
  height: 50px;
  font-family: 'Roboto Slab', serif;
  font-size: 17px;
  font-weight: 100;
  padding-top: 40px;
  text-align:center;
  text-decoration:none;
  filter:blur(2px);
  transition:filter 0.2s;
  color: black;
}

      #ex:hover {
        filter:blur(0px);
        background-image: url("pics/Exh2.png");
        background-size: 200px 100px;
        background-repeat: no-repeat;
        background-position: top;

      }

      #ex:visited {
        color:black;
        text-decoration: none;

      }


    #ab{
      grid-column: 8/10;
      grid-row: 2/3;
      height: 50px;
      font-family: 'Roboto Slab', serif;
      font-size: 17px;
      font-weight: 100;
      padding-top: 40px;
      text-align:center;
      text-decoration:none;
      filter:blur(2px);
      transition:filter 0.2s;
      color: black;


    }

        #ab:hover {
          filter:blur(0px);
          background-image: url("pics/Abt2.png");
          background-size: 200px 100px;
          background-repeat: no-repeat;
          background-position: top;
        }

        #ab:visited {
          color: black;
          text-decoration: none;

        }


#main_grid{
  display: grid;
  grid-template-columns:repeat(12,1Fr);
  grid-template-rows:repeat(24, auto);
  grid-gap: 5px;
  margin-top: 250px;

  }

    .workArea{

      font-family:'Roboto Slab', sans-sans-serif;

    }

    .workTitleArea{
      grid-column: 2/8;
      grid-row: 3/4;
      font-family:'Roboto Slab', sans-sans-serif;
    }


         
          #workTitle{
            font-size:36px;
            font-weight:normal;
            margin-bottom:0px;


          }

          #workType{
            font-size:14px;
            font-weight:lighter;
            color: grey;
            margin-top:0px;

          }

          #workSub{
            font-size:17px;
            font-weight: 400;
            text-align: left;
            font-family:'Roboto Slab',sans-serif;
            font-style: oblique;

          }



    .Abstract{
      grid-column: 2/9;
      grid-row: 4/5;
      font-size:14px;
      font-family:'Roboto Slab', sans-sans-serif;
      font-weight:normal;

    }

    .Abstract p{
      margin-top: 0px;
    }

    .workContent{
      grid-column: 4/12;
      grid-row: 5/20;
      font-size:14px;
      font-family:'Roboto Slab', sans-sans-serif;
      font-weight:normal;

    }

    div.video-container {
        position:relative;

        height: auto;
        padding-top: 0px;
        padding-bottom: 15px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        border: 1px #aaaaaa solid;

      }

              [style*="--aspect-ratio"] > :first-child {
          width: 100%;
        }
        [style*="--aspect-ratio"] > img {
          height: auto;
        }
        @supports (--custom:property) {
          [style*="--aspect-ratio"] {
            position: relative;
          }
          [style*="--aspect-ratio"]::before {
            content: "";
            display: block;
            padding-bottom: calc(100% / (var(--aspect-ratio)));
          }
          [style*="--aspect-ratio"] > :first-child {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
          }
        }

      img.gallery-fullsize {
        position:absolute;
        top: 0px;
        left: 0;
        display: none;
        max-width:100%;
        max-height:auto;
        text-align:left;
        margin-left: 0px;
      }

      div.gallery-item {
        display: inline-block;
        max-width:10%;
        max-height:auto;

      }

      img.gallery-preview {
        max-width:80%;
        max-height:auto;

      }




      img.gallery-preview:hover ~ img.gallery-fullsize {
        display: block;

      }

    /*.workContent div {
      display: grid;
      grid-template-columns:repeat(1,1Fr);
      grid-template-rows:repeat(1,1Fr);
      grid-gap:0;
    }*/

    /* GRID NESTING GRID EXP/*.workContent p{

      display: grid;
      grid-template-columns:repeat(3,1Fr);
      grid-template-rows:repeat(3, 1Fr);
      grid-gap: 5px;
      font-size:14px;
      font-family:'Roboto Slab', sans-sans-serif;
      font-weight:normal;

    }*/