:root {
    --main-radius: 0px;
    --main-padding: 0.6rem;
    --big-padding: 2rem;
    --main-white: whitesmoke;
    --main-black: #05101D;
    --main-blue: #00FFB2;
  }

  
  @font-face {
    font-family: 'SpaceMono';
    src: url(assets/fonts/8a2aa304d0bd5e41d186.ttf);
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'SpaceMono';
    src: url(assets/fonts/056ac3ebe5f65cb5c4ac.ttf);
    font-weight: bold;
    font-style: normal;
  }
  @font-face {
    font-family: 'SpaceMono';
    src: url(assets/fonts/973410642f95c92e505b.ttf);
    font-weight: bold;
    font-style: italic;
  }
  @font-face {
    font-family: 'SpaceMono';
    src: url(assets/fonts/0daff04789950b311b31.ttf);
    font-weight: normal;
    font-style: italic;
  }
  @font-face {
    font-family: 'Mondwest';
    src: url(ce30e67f1fe842818af2.otf);
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'Terminal';
    src: url(assets/fonts/018d48adc1bc03eab7e4.ttf);
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'MisterPixel';
    src: url(6bc13daae188123cfec1.otf);
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'MisterPixel';
    src: url(assets/fonts/7418c28e11c9da6a455a.ttf);
    font-weight: bold;
    font-style: normal;
  }


  ::-moz-selection { /* Code for Firefox */
    color:  var(--main-black);
    background: var(--main-blue);
  }
  
  ::selection {
    color:  var(--main-black);
    background:  var(--main-blue);
  }

  
  html{
    background:  var(--main-black);                       
  }

  #html{

  }

  body{
    margin: 0;
    font-family: SpaceMono;
  }
  
  h1{
    font-family: Mondwest;
    font-size: 96px;
    font-weight: normal;
    margin: 0px;
    letter-spacing: 1px;
    position: relative;
    display: inline-block;
    transform: translatey(200px);
  }

  h2{
    font-family: Mondwest;
    font-size: 2.1vw;
    font-weight: 100;
    margin-top: var(--main-padding);
    margin-bottom: var(--main-padding);
    padding-top: var(--main-padding);
  }

  hr{
    margin-top: var(--main-padding);
    margin-bottom: var(--main-padding);
    border-top: 1px solid  var(--main-white);
    border-left: 0px solid  var(--main-black);
    border-right: 0px solid  var(--main-black);
    border-bottom: 0px solid  var(--main-black);
    
  }

  span {
    display: inline-block;
    overflow: hidden;
  }

  .Blue{
    color:  var(--main-blue);
  }


  #tagsWrapper{
    display: inline-block;
    overflow: hidden;
  }

  .projectTag{
    font-size: 22px;
    padding-left: var(--main-padding);
    padding-right: var(--main-padding);
    margin-top: var(--main-padding);
    margin-bottom: var(--main-padding);
    margin-right: var(--main-padding);
    border-radius:32px;
    font-family: SpaceMono;
    border: 1px solid  var(--main-white);
    display: inline-block;
    width: auto;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.1s;
  }


  @keyframes swift-text {
    from{
      transform: translatey(120px);
    }
    to {
      transform: translatey(0px);
    }
  }

  @keyframes swift-ptext {
    from{
      transform: translatey(70px);
      opacity: 0%;
    }
    to {
      transform: translatey(0px);
      opacity: 100%;
    }
  }

  @keyframes swift-box {
    from{
        opacity: 0;
      transform: translatey(220px);
    }
    to {
      opacity: 1;
      transform: translatey(0px);
    }
  }

  .Clickable{
    font-weight: normal;
    text-decoration-line: underline;
    text-decoration-thickness: 5px;
    text-decoration-color:  var(--main-blue);
    text-underline-offset: 10px;
    letter-spacing: 2px;
    display: inline-block;
    
  }

  #word12, #word13{
    font-size:32px;
  }



  .vl{
    position:fixed;
    border-left: 1px solid  var(--main-white);
    height: calc(100% + 48px + 9.6px);
    left: 58.41%;
    margin-left: -3px;
    top: 0;
    z-index: -10;
    
  }

  .Clickable:hover{
  }




  .Star{

    font-family: Terminal;  
    font-size: 104px;
    color:  var(--main-blue);
    display: inline-block;
    transform: translatey(100px);
  }

  .Star2{
    position:absolute;
    top: 105%;
    font-family: Terminal; 
    display: inline; 
    font-size: 104px;
    color:  var(--main-blue);
    
  }

  .Symbols{
    margin-top: 40px;
    margin-left: 10px;
    font-family: MisterPixel;
    font-size: 60px;
    letter-spacing: 35px;
    animation: 0.7s swift-text ease-in-out forwards 0.2s;
  }

  .Symbols-static{
    margin-top: 40px;
    top:-3px;
    right: -1px;
    font-family: MisterPixel;
    font-size: 52px;
    letter-spacing: 35px;
    transform: translatey(0px);
  }

  ul{
    list-style: none;
    font-size: 22px;
  }
  ul li::before{
    color:  var(--main-blue);
    content: "▪";
    display: inline-block; 
    width: 1em;
    margin-left: 5px;
    list-style-type: square;
  }



  h3{
    display: inline-block;
    top: calc(50%-28px);
    margin-left: 40px;
    margin-top: 28px;
    margin-bottom: 28px;
    font-family: SpaceMono;
    font-weight: bold;
    font-size: 28px;
    line-height: 32px;
  }
  p{
    font-family: SpaceMono;
    font-size: 32px;
    position: relative;
    top: 17%;

    display: inline-block;
    transform: translatey(100px);
  }
  a{
    font-family: SpaceMono;
    font-weight: normal;
    text-decoration: none;
    color:  var(--main-white);
    font-size: 20px;
  }

  a:visited{
    font-weight: bold;
    text-decoration: none;
    color:  var(--main-white);
  }

  a:hover{
    font-weight: bold;
    text-decoration: underline;
    color:  var(--main-blue);
  }


  .container {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr auto auto;
    grid-template-rows: 48px auto 128px auto auto 950px 64px; 
    grid-template-areas:
      "nav nav nav nav nav nav nav nav nav nav nav nav"
      "backButton projectName projectName projectName projectName projectName projectName projectName projectName projectName projectData projectData"
      ". tags tags tags tags tags tags tags tags tags projectData projectData"
      ". mainContent mainContent mainContent mainContent mainContent mainContent mainContent mainContent mainContent projectData projectData"
      ". section1 section1 section1 section1 section1 section1 section1 section1 section1 projectData projectData"
      "footer1 footer1 footer1 footer1 footer1 footer1 footer1 footer2 footer2 footer2 footer2 footer2"
      "footer footer footer footer footer footer footer footer3 footer3 footer3 footer3 footer3";
    grid-gap: 0px;
    color:  var(--main-white);
  }

  .smallLink{
    font-size: 16px;
    text-decoration: underline;
  }

  .video{
    position: relative;
    border: 0px;
    border-radius: 32px;
    width: calc(192vw / 4);
    height: calc(108vw / 4);
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.1s;
    border: 1px solid #05101D;
  }
  .videoSquare{
    position: relative;
    border: 0px;
    border-radius: 32px;
    width: calc(192vw / 4);
    height: calc(192vw / 4);
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.1s;
    border: 1px solid #05101D;
  }

  .video2{
    position: relative;
    border: 0px;
    border-radius: 16px;
    width: 96%;
    height: auto;
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.1s;
    border: 1px solid #05101D;
  }
  .video3{
    position: relative;
    border: 0px;
    border-radius: 16px;
    width: calc(192vw / 2.7);
    height: calc(108vw / 2.7);
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.1s;
    border: 1px solid #05101D;
  }

  .video4{
    position: relative;
    border: 0px;
    border-radius: 16px;
    width: calc(145vw / 2.7);
    height: calc(108vw / 2.7);
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.1s;
    border: 1px solid #05101D;
  }


  .img{
    display: inline-block;
    border-radius: 16px;
    margin: 1%;
    margin-top: 1vw;
    margin-bottom: 2vw;
    margin-left: 0;
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.4s;
    border: 1px solid #05101D;
  }

  .myImg{
    display: inline-block;
    float: right;
    border-radius: 16px;
    margin: 1%;
    margin-top: -8vw;
    margin-bottom: 2vw;
    margin-left: 0;
    margin-right: 4vw;
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.4s;
    border: 1px solid #05101D;
    width: 30.5%;
  }
  
  .w100{
    width: 96%;
  }
  .w50{
    width: 47%;
  }
  .w33{
    width: 30.5%;
  }

  .textWrapper{
    width: 800px;
    top: 0px;
    margin-top: 2vw;
    margin-bottom: 2vw;
    padding: 0px;
  }

  .textWrapperInline{
    display: inline-block;
    width: 800px;
    top: 0px;
    margin: 0;
    margin-top: 2vw;
    padding: 0;
    vertical-align: top;
  }

  .description{
    top: var(--main-padding);
    margin-top:0vw;
    font-size: 20px;
    opacity:0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.2s;

  }

  mark{
    background-color: var(--main-blue);
    color: var(--main-black);
    font-weight: bold;
  }

  #backButton {
    grid-area: backButton;
    padding: 1.5vw;
    padding-bottom: 0.2vw;
    padding-top: var(--main-padding);
  }

  #projectName {
    grid-area: projectName;
    padding-left: 0px;
    padding-right: var(--big-padding);
    padding-top: 2.5vw;
  }

  #projectNameText {
    animation: 0.7s swift-text ease-in-out forwards 0s;
  }

  #section1{
    grid-area: section1;
  }

  #tags {
    grid-area: tags;
    padding-right: var(--big-padding);
  }
  #projectData {
    grid-area: projectData;
    border-left: 1px solid var(--main-white);
    padding-left: var(--big-padding);
    padding-right: var(--big-padding);
    padding-top: var(--main-padding);
  }

  #mainContent{
    grid-area: mainContent;
  }

  #dataText{
    margin: 0px;
    padding-top: 64px;
    top: 0px;
    font-size: 16px;
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.4s;
  }


  .backButton{
    margin-top: 2.5vw;
    font-family: MisterPixel;
    width: 32px;
    height: 32px;
    font-size: 32px;
    border: 1px solid var(--main-white);
    color: var(--main-blue);
    border-radius: 100vw;
    font-weight: bold;
    padding: 1vw;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0s;
  }

  .backButton:hover{
    background-color: var(--main-white);
    color: var(--main-black);
  }


  li{
    margin: 8px;
    font-size: 24px;
    letter-spacing: 0px;
    line-height: 32px;
    padding-bottom: 6px;
  }
  ul{
    padding: 14px;
    padding-top: 2px;
  }

  #number{
    display: inline; 
    top:-1.6vw;
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.4s;
  }

  .button{
    border: 1px solid;
    border-radius: 32px;
    width: auto;
  }

  .button:hover{
    background-color: var(--main-white);
    color:  var(--main-black);
    transform: translatey(-32px);
    transition: 0.1s;
  }

  #word9{
    margin-top:100px;
  }

  nav {
    box-sizing: border-box;
    width:100%;
    height: 48px;
    background-color:  var(--main-black);
    grid-area: nav;
    padding-top: var(--main-padding);
    padding-left: var(--big-padding);
    padding-right: var(--big-padding);
    border-bottom: 1px solid;
    position: fixed;
    
  }



  #footer1 {
    background:  var(--main-black);
    grid-area: footer1;
    padding-left: var(--big-padding);
    padding-right: var(--big-padding);
    padding-top: var(--main-padding);
    border-top: 1px solid;
  }
  #footer2 {
    background:  var(--main-black);
    grid-area: footer2;
    padding-left: var(--big-padding);
    padding-right: var(--big-padding);
    padding-top: var(--main-padding);
    border-top: 1px solid;
    border-left: 1px solid;
  }

  footer {
    background:  var(--main-black);
    grid-area: footer;
    padding-left: var(--big-padding);
    padding-right: var(--big-padding);
    border-top: 1px solid;
  }

  #footer3 {
    background:  var(--main-black);
    grid-area: footer3;
    padding-left: var(--big-padding);
    padding-right: var(--big-padding);
    border-top: 1px solid;
  }

  #social{
    text-decoration:underline; 
    padding-right: 120px;
  }


/* small computer */
@media only screen and (max-width: 1600px) 
{

  .container {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr auto auto;
    grid-template-rows: 48px auto 128px auto auto 57vw 64px; 
    grid-template-areas:
      "nav nav nav nav nav nav nav nav nav nav nav nav"
      "backButton projectName projectName projectName projectName projectName projectName projectName projectName projectName projectData projectData"
      ". tags tags tags tags tags tags tags tags tags projectData projectData"
      ". mainContent mainContent mainContent mainContent mainContent mainContent mainContent mainContent mainContent projectData projectData"
      ". section1 section1 section1 section1 section1 section1 section1 section1 section1 projectData projectData"
      "footer1 footer1 footer1 footer1 footer1 footer1 footer1 footer2 footer2 footer2 footer2 footer2"
      "footer footer footer footer footer footer footer footer3 footer3 footer3 footer3 footer3";
    grid-gap: 0px;
    color:  var(--main-white);
  }

  #backButton {
    grid-area: backButton;
    padding: 1.5vw;
    padding-bottom: 0.2vw;
    padding-top: var(--main-padding);
  }

.textWrapper{
  width:96%
}
.textWrapperInline{
  width:96%
}

#word12, #word13 {font-size:2vw}




  .backButton{
    margin-top: 2.5vw;
    font-family: MisterPixel;
    width: 2vw;
    height: 2vw;
    font-size: 2vw;
    border: 1px solid var(--main-white);
    color: var(--main-blue);
    border-radius: 100vw;
    font-weight: bold;
    padding: 1vw;
  }

    h1{
        font-size: 5vw; 
    }

    .Star {font-size: 5.5vw}

    .Symbols {font-size: 3.5vw}

    p {font-size: 2vw}

    a{font-size: 1.5vw}

    h3 {
        font-size: 1.5vw;
        line-height: 2vw;
        margin-top: 2vw;
        margin-bottom: 2vw;
        margin-left: 3vw;
    }

    .Symbols-static{
        font-size: 3.5vw;
        top:-1.5vw;
        right: -2vw;
    }

    li {
        font-size: 1.3vw;
        margin:0;
        line-height: 2vw;
    }

    #word4{margin-left:-2vw}
    #word5{padding-top:7vw}


}

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

}



/* phones */
@media only screen and (max-width: 900px) 
{


  .container {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 48px auto 64px auto auto auto auto 80vw 64px; 
    grid-template-areas:
      "nav nav nav nav nav nav nav nav nav nav nav nav"
      "projectName projectName projectName projectName projectName projectName projectName projectName projectName projectName projectName projectName"
      "tags tags tags tags tags tags tags tags tags tags tags tags"
      "mainContent mainContent mainContent mainContent mainContent mainContent mainContent mainContent mainContent mainContent mainContent mainContent"
      "section1 section1 section1 section1 section1 section1 section1 section1 section1 section1 section1 section1"
      "projectData projectData projectData projectData projectData projectData projectData projectData projectData projectData projectData projectData"
      "footer1 footer1 footer1 footer1 footer1 footer1 footer1 footer1 footer1 footer1 footer1 footer1"
      "footer2 footer2 footer2 footer2 footer2 footer2 footer2 footer2 footer2 footer2 footer2 footer2"
      "footer footer footer footer footer footer footer footer3 footer3 footer3 footer3 footer3";
    grid-gap: 0px;
    color:  var(--main-white);
  }

  #projectData {
    grid-area: projectData;
    border: 0px solid var(--main-white);
    border-top: 1px solid var(--main-white);
    padding-left: var(--big-padding);
    padding-right: var(--big-padding);
    padding-top: var(--main-padding);
    
    /* display: none; */
  }
  #dataText{
    padding-top: 40px;
    padding-bottom: 20px;
    font-size: 3.2vw;
    line-height: 5vw;
  }

  .smallLink{
    font-size: 3.2vw;
    line-height: 6vw;
  }

  #backButton {
    display: none;
    position: absolute;
    grid-area: backButton;
    padding-left: var(--big-padding);
    padding-right: var(--big-padding);
    padding-top: var(--main-padding);
  }

  #tags{
    padding-right: 6vw;
    padding-left: 7vw;
  }


  hr{
    margin-top: calc(var(--main-padding)/1.3);
    margin-bottom: calc(var(--main-padding)/1.3);
  }
  #projectName{
    padding-top: 8.5vw;
    padding-left: 7vw;
  }
  #mainContent{
    padding-top: 2.5vw;
    padding-left: 7vw;
  }
  #section1{
    padding-left: 7vw;
  }

  .projectTag{
    font-size: calc(6vw / 1.3);
    padding-left: var(--main-padding);
    padding-right: var(--main-padding);
    margin-bottom: calc(var(--main-padding)*5);
    margin-right: var(--main-padding);
    border-radius:32px;
    font-family: SpaceMono;
    border: 1px solid  var(--main-white);
    display: inline-block;
    width: auto;
  }

  .video{
    position: relative;
    border: 0px;
    border-radius: 16px;
    width: 92%;
    height: auto;
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.1s;
    border: 1px solid #05101D;
  }

  .videoSquare{
    position: relative;
    border: 0px;
    border-radius: 32px;
    width: 92%;
    height: auto;
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.1s;
    border: 1px solid #05101D;
  }

  .video2{
    position: relative;
    border: 0px;
    border-radius: 16px;
    width: 92%;
    height: auto;
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.1s;
    border: 1px solid #05101D;
  }
  .video3{
    position: relative;
    border: 0px;
    border-radius: 16px;
    width: 92%;
    height: auto;
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.1s;
    border: 1px solid #05101D;
  }

  .video4{
    position: relative;
    border: 0px;
    border-radius: 16px;
    width: 92%;
    height: auto;
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.1s;
    border: 1px solid #05101D;
  }

  .img{
    display: inline-block;
    border-radius: 16px;
    margin: 1%;
    margin-top: 1vw;
    margin-bottom: 2vw;
    margin-left: 0;
    opacity: 0;
    transform: translatey(1000px);
    animation: 0.7s swift-box ease-in-out forwards 0.4s;
    border: 1px solid #05101D;
  }
  
  .w100{
    width: 92%;
  }
  .w50{
    width: 92%;
  }
  .w33{
    width: 92%;
  }

  .textWrapper{
    width: 92%;
  }

  .textWrapperInline{
    width: 92%;
  }

  .description{
    line-height: 5.5vw;
    font-size: 3.2vw;
  }
  

  h2{
    font-size: 8.7vw;
  }


#navElements{
    font-weight: bold;
}

h1{
    font-size: 8.5vw; 
}

#word12, #word13 {font-size:3.5vw}

.Star {font-size: 11vw}

.Symbols {
    font-size: 7.5vw;
    letter-spacing: 8vw;
    margin-top: 3vw;
}

p {
    font-size: 3.5vw;
    line-height: 1.5vw;
    
}

a{font-size: 3vw}

.vl{
    border-left: 0px solid  var(--main-white);
}

h3 {
    font-size: 4.5vw;
    line-height: 6vw;
    margin-top: 4vw;
    margin-bottom: 4vw;
    margin-left: 6vw;
}

.Symbols-static{
    font-size: 7vw;
    top:-4.5vw;
    right: -2vw;
}

li {
    font-size: 3.5vw;
    margin:0;
    line-height: 6vw;
}


  #number{
    top:-3.8vw;
    font-size:3vw;
  }


#word4{margin-left:-6vw}
#word5{padding-top:7vw}

#footer2 {

    border-top: 0px solid;
    border-left: 0px solid;
  }
  #word9{
    margin-top: 5vw;
  }

  #social{
    text-decoration:underline; 
    padding-right: 2vw;
  }
  #footer3{
    font-size:2vw;
  }


}
/* 
    This CSS file was created by OwL for use by pointer.js, 
     witch can be found on https://seattleowl.com. 
*/

#pointer-dot {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border: 0px solid white;
    position: fixed;
    border-radius: 0px;
    z-index: 101;
    pointer-events: none;
}

#pointer-ring {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    padding: 15px;
    border: 2px solid #750c7e;
    background-color: #fff;
    mix-blend-mode: difference;
    position: fixed;
    border-radius: 100px;
    z-index: 102;
    pointer-events: none;
    
}

html {
    cursor: none;
}

a {
    cursor: none;
}

@media only screen and (max-width: 900px) 
{
    #pointer-dot {
        border: 0px solid white;
    }
    
    #pointer-ring {
        border: 0px solid #750c7e;
        background-color: #ffffff00;
        border-radius: 0px;
        padding: 0px;
    } 

    html {
        cursor: auto;
    }
    
    a {
        cursor: auto;
    }

}


/*# sourceMappingURL=pastachute.css.map*/