*,*:focus,*:hover{
    outline:none;
}

body {
    background-color: #fcf9f4;
    margin:0px;
    padding:0px;
}

@font-face {
  font-family:  'VT323-Regular';
  src: url('VT323-Regular.ttf');
}

@font-face {
    font-family: 'GreenstoneDA-Regular'; 
    src: url('GreenstoneDA-Regular.otf');
}

@font-face {
    font-family: 'RobotoMedium'; 
    src: url('RobotoMono-Medium.ttf');
}

@font-face {
    font-family: 'RobotoLight'; 
    src: url('RobotoMono-Light.ttf');
}

.city {
    font-size:15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    color: #4949d8;
}

.text_blurb {
  font-family: GreenstoneDA-Regular;
} 

.svg_text {
  color:red !important;
  font: italic 13px sans-serif;
}

.fadeIn {
  opacity: 0;

}

.loadFader {
  opacity: 1;
      -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#title_div {
  z-index: 999;
  position: fixed;
  transform: translate(2vw,12vh) scale(1);
  display: flex;
  flex-direction: column;
}

#terrains_title {
  /*951 x 130*/
  max-height: 50vh !important;
  height: 50vh;
  width: calc(50vh * 0.136);
  z-index: 999;

}

#zoom_percent {
    font-family: 'VT323-Regular';
    margin-top:calc(5vh - 20px);
    z-index:999;
    color: blue;
    font-size: 24px;
    /*font-size: calc(0.6vw + 1.2vh);*/
    /*margin-bottom: 20px;*/
    text-align: right;   
}

#zoom_percent text {
  margin-left: auto !important;
  fill: blue;
}

#terrains_subtitle_text {
    /*font-family: 'RobotoLight';*/
    font-family: 'VT323-Regular';
    font-size: calc(50vh * 0.136 / 4 );
    line-height: 0.9;
    position: absolute;
    transform-origin: bottom left;
    transform: rotate(90deg);
    bottom: 0px;
    padding-left: calc(5vh - 20px);
    padding-bottom: calc(0.3 * 50vh * 0.136 / 4 );
}

#terrains_subtitle {

  height: 20vh;
  max-width: 10vw;
  z-index: 999;
  
}

.zoom_image_div {
    width:100vw;
    height:100vh;
}

#random_1 {
    position: fixed;
    bottom:10%;
    left:40%;
    z-index:101;
}

@media (max-width:400px) {
  #title_div {
    transform: translate(2vw,0vh) scale(1);
  }
  
  #title_div {
    max-height: 35vh !important;
    height: 35vh;
    width: calc(35vh * 0.136);
    top: calc(50vh - 30vh);
  }
  
  #terrains_title {
    /*951 x 130*/
    max-height: 35vh !important;
    height: 35vh;
    width: calc(35vh * 0.136);
    z-index: 999;
  }
  
  #zoom_percent {
    margin-top:0px;
    font-size: 24px;
  }
  
  #terrains_subtitle_text {
    /*font-family: 'RobotoLight';*/
    font-family: 'VT323-Regular';
    font-size: calc(35vh * 0.136 / 4 );
    line-height: 0.9;
    position: absolute;
    transform-origin: bottom left;
    transform: rotate(90deg);
    bottom: 0px;
    padding-left: 35px;
    padding-bottom: calc(0.3 * 35vh * 0.136 / 4 );
  }
}

/* Creating an Arc path
M start-x, start-y A radius-x, radius-y, x-axis-rotation,
large-arc-flag, sweep-flag, end-x, end-y */
#wavy,
#wavy_contact,
#wavy_production,
#wavy_about {
  stroke:none;
  stroke-width:0.003;
  fill:none;
/*   d: path('M .85,.600 A .200,.200, 0, 0, 0 .150,.300'); */
}

.wavy_text {
/*   font-size:0.02px !important; */
  font-style:italic;
  fill:#4949d8 !important;

}

#about1_blurb {
  transform: translate(.36px, calc(.57px - .001vh)) scale(0.00003);
}
#about2_blurb {
  transform: translate(.40px, .585px) scale(0.00003);
}
#about3_blurb {
  transform: translate(calc(.40px + .002vw), calc(.60px + .0005vh)) scale(0.00003);
}
#about4_blurb {
  transform: translate(.405px, .625px) scale(0.00003);
}



#about_trail {
  transform: translate(.33px, .51px) scale(0.0005);
  stroke:red;
  stroke-width:0.2px;
  stroke-dasharray:4px;
  fill: none;
}

#headshot {
/*   transform: translate(-350px, 450px) scale(0.5) */
}

#test_g {
/*   border:1px red solid; */
}
#production_footer,
#production_header,
#production_sider,
#management_header {
  font-family: GreenstoneDA-Regular;
}

#production_footer,
#management_footer {
  position:fixed;
  bottom:0px;
  left:0px;
  height:auto !important;
}

.wrapper {
  max-width: 100%;
  overflow: hidden;
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: marquee 30s linear infinite;
}

.marquee p {
  display: inline-block;
  font-size:44px;
  margin-block-end:0px;
  margin-block-start:0px;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

#production_header {
  position:fixed;
  top:0px;
  right:1.2vw;
  height:25px !important;
  max-height: 10vh;
  max-width: 100vw !important;
  text-align:right;
}

#production_sider {
  position:fixed;
  height:25px !important;
  width:auto !important;
/*   width:100%; */
  transform-origin: top left;
  transform:  translate(100%, 2vw) rotate(90deg);
  top:0px;
  right:0px;
/*   border:green 1px solid; */
  margin-top:10px;
}

#production_header,
#production_sider {
  font-size:calc(5px + 2.5vh);
  white-space: nowrap;
}

#management_header {
  position:fixed;
  top:0px;
  right:0px;
  text-align: justify;
  text-align-last: justify;
  text-justify:inter-word;
  font-size:calc(8px + 1.5vw);
}

#contact_info {
  font-size:20px;
  color:#4949d8;
  transform: skew(15deg, 5deg);
}