@font-face {
  font-family: Ortica-Bold;
  src: url(images/Ortica-Bold.woff);
}


body{
    background-color: #FFFFFF;
    font-family: 'Courier New', Courier, monospace;
    color: black;
    border: 1px dashed #000;
    margin: 0;
    font-family: Ortica-Bold;
    overflow: hidden!important;
    background-color: blue;
}


/* #mobileOverFlow{
  overflow: hidden;
  height: 100vh;
  width: 100vh;
} */


p{
  font-size: 5vw;
line-height: 1.7rem;
color: white;
margin: 0rem;
padding: 2em;
background: blue;
letter-spacing: 0.3vw;
}

a{
  color:rgb(251, 116, 244);
  text-decoration: underline 2px rgb(251, 116, 244) dotted ;
}

#canvas{
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 10px 10px  black;
  z-index: -1;
}

  h1 {
      font-weight: bold;
  }

  #haikuContainer{
    width: 84vw;
    position: absolute;
    top: 0;
    left:6vw;
  }

  h2{
    z-index: 30000;
    margin: 0;
    /* font-style: italic; */
    /* text-decoration: underline; */
    color: white;
    /* text-shadow: h-shadow v-shadow blur-radius color; */
    text-shadow: 1px 1px 20px blue;
    animation: shadow 8s infinite alternate;
    font-size: 8vw;

    /* -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-last: always;
    -webkit-hyphenate-limit-zone: 8%;     -moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 3 3;
    -moz-hyphenate-limit-lines: 2;
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;     -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 3 3;
    -ms-hyphenate-limit-lines: 2;
    -ms-hyphenate-limit-last: always;
    -ms-hyphenate-limit-zone: 8%;     hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%; */
  }

  #lineOne, #lineTwo, #lineThree{
    margin-bottom: 20vh;
  }

  #lineOne{
    margin-top: 3vh;
  }


  @keyframes shadow {
    0%{text-shadow: 1px 1px 20px blue;}
    0%{text-shadow: 1px 1px 20px black;}
  }

  #circle {
    width: 50px;
    height: 50px;
    background: blue;
    border-radius: 50%;
    z-index: 500000000;
    border: .5px solid black;
    box-shadow: 1px 1px 6px rgba(0,0,0,.7);
      /* offset-x | offset-y | blur-radius | spread-radius | color */
    position: absolute;
    top: 13px;
    right: 23px;
    font-size: 18px;
  }
  #circle:hover {
    background: #FFFFFF;
  }

  #modal{
    width: 90vw;
    z-index: 4000;
    border: .5px solid black;
    box-shadow: 1px 1px 6px rgba(0,0,0,.7);
    position: absolute;
    top: 25vw;
    right: 4.5vw;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    display: none;
    font-family: Arial, Helvetica, sans-serif;
    height: 80vh;
}



  #ladder{
    width: 30vw;
    height: 100vh;
    /* z-index: 5000; */
    background-image: url("images/ladderRungBlack.gif");
    background-repeat: repeat-y;
    z-index: 2000;
    position: absolute;
    top: 0;
    right: 10vw;
  }

  #guy{
    position: absolute;
    right: -27vw;
    z-index: 3000;
    animation: up 30s linear infinite alternate;
    
  }

  @keyframes up{
    0%{top: 76vh;}
    100%{top: -40vh;}
  }


  #guy img{
    width: 96vw;
    height: 89vw;
  }


  video{
    top: 0vh;
    left: -90vw;
    z-index: -5;
    width: 366vw;
    height: 100vh;
    width: 395vw;
    box-shadow: 1px 1px 400px black inset;
    position: absolute;
  }


  #castle{
    background-image: url('images/jillsCastlebNW1.png');
    width: 100vw;
    height: 100vh;
    position: absolute;
    top:0;
    left:0;
    /* mix-blend-mode: difference; */
    
    opacity: 0.3;
    z-index: -2;
  }

  #vin{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top:0;
    left:0;
    z-index: -2;
    box-shadow: 1px 1px 50px black inset;
  }



  /* heart animations */
  /* delays */

  .blueHeartFour{
    background-image: url('images/heart-pink.gif');
    width: 2vw;
    height: 2vh;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: pinkHeartTwo 40s 1 10s forwards;
    left: 50vw;
    bottom: 100vh;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  }

  .blueHeartOne{
    background-image: url('images/heart-blue.gif');
    width: 5vw;
    height: 5vh;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: 2vw;
    bottom: 100vh;
    animation: blueHeart 920s 1 5s forwards;
  }

  .blueHeartThree{
    background-image: url('images/heart-blue.gif');
    width: 11vw;
    height: 11vh;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: blueHeart 920s 1 10s forwards;
    left: 50vw;
    bottom: 100vh;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  }





  .blueHeartTwo{
    background-image: url('images/heart-blue.gif');
    width: 5vw;
    height: 5vh;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: blueHeart 875s 1 forwards;
    bottom: 100vh;
    left: 20vw;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  }

  .redHeartOne{
    background-image: url('images/heart-pink.gif');
    width: 7vw;
    height: 7vh;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: redHeart 700s 1 5s forwards;
    left: 36vw;
    bottom: 100vh;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  }

  .redHeartTwo{
    background-image: url('images/heart-pink.gif');
    width: 10vw;
    height: 10vh;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: redHeartTwo 900s 1 10s forwards;
    left: 84vw;
    bottom: 100vh;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  }

  .redHeartThree{
    background-image: url('images/heart-blue.gif');
    width: 5vw;
    height: 5vh;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: redHeartTwo 20s 1 30s forwards;
    left: 72vw;
    bottom: 100vh;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  }

  .redHeartFour{
    background-image: url('images/heart-blue.gif');
    width: 7vw;
    height: 7vh;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: redHeartTwo 1000s 1 500s forwards;
    left: 92vw;
    bottom: 100vh;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  }


  .pinkHeartOne{
    background-image: url('images/heart-pink.gif');
    width: 5vw;
    height: 5vh;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: 2vw;
    bottom: 100vh;
    animation: pinkHeart 850s 1 300s forwards;
  }


  .blueHeartFour{
    background-image: url('images/heart-blue.gif');
    width: 2vw;
    height: 2vh;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: blueHeartTwo 500s 1 forwards;
    left: 50vw;
    bottom: 100vh;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  }

  

    .pinkHeartTwo{
      background-image: url('images/heart-pink.gif');
      width: 5vw;
      height: 5vh;
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      animation: pinkHeart 130s 1 forwards;
      bottom: 100vh;
      left: 20vw;
      /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    }
  
    .blueHeartThree{
      background-image: url('images/heart-pink.gif');
      width: 11vw;
      height: 11vh;
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      animation: pinkHeart 120s 1 10s forwards;
      left: 50vw;
      bottom: 100vh;
      /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    }
  
    
  



    @keyframes blueHeart{
      0%{bottom: 100vh;}
      100%{bottom: 0vh;}
    }
  
    @keyframes blueHeartTwo{
      0%{bottom: 100vh;}
      100%{bottom: 2vh;}
    }

    @keyframes redHeart{
      0%{bottom: 100vh;}
      100%{bottom: 6vh;}
    }
    @keyframes redHeartTwo{
      0%{bottom: 100vh;}
      100%{bottom: 0vh;}
    }

    @keyframes pinkHeart{
      0%{bottom: 100vh;}
      100%{bottom: 10vh;}
    }
  
    @keyframes pinkHeartTwo{
      0%{bottom: 100vh;}
      100%{bottom: 7vh;}
    }

    /* #vidContainer {
      margin: 0px auto;
      width: 60vw;
      height: 60vh;
    } */

    #videoElement {
      width: 332vw;
      height: 116vh;
      background-color: blue;
      position: absolute;
      top: -3vh;
      left: -143vw;
      display: none;
    }

    #dayVideosWrapper{
      position: relative;
      overflow: hidden;
      height: 100vh;
      width: 100vw;
      margin: 0;
    }


    @media screen and (min-width: 600px) {
      video { 
        position: absolute;
        top: -8vh;
        left: -10vw;
        z-index: -5;
        width: 260vw;
        height: 115vh;
        box-shadow: 1px 1px 400px black inset;
      }

      h2{
        font-size: 8vw;
      }

      #lineOne, #lineTwo, #lineThree {
        margin-bottom: 13vh;
    }

      p {
        font-size: 3vw;
        line-height: 4vw;
      }
    }




    @media screen and (min-width: 992px) {
      
      h2{
        font-size: 6vw;
      }

      p{
        font-size: 2vw;
        line-height: 2rem;
        letter-spacing: 0.3vw;
      }

      #modal{
        width: 90vw;
        z-index: 4000;
        top: 10vw;
        right: 4.5vw;
        font-family: Arial, Helvetica, sans-serif;
        height: 70vh;
    }

      #lineOne, #lineTwo, #lineThree{
        margin-bottom: 5vh;
      }      

      #ladder{
        width: 10vw;
      }

      #guy img{
        width: 30vw;
        height: 32vw;
      }

      #guy{ 
        right: 0vw;
      }

      video {
        position: absolute;
        top: -8vh;
        left: 0vw;
        z-index: -5;
        width: 100vw;
        height: 116vh;
        box-shadow: 1px 1px 400px black inset;
      }

      /* #videoElement {
        width: 125vw;
        height: 146vh;
        top: 0;
        left: -17vw;
        
      } */

      @media screen and (min-width: 1920px) {
        p {
          font-size: 2vw;
          line-height: 4.5vh;
          letter-spacing: 0.3vw;
      }
      }


    }