/* lato-100 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/lato-v25-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-100italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: italic;
  font-weight: 100;
  src: url('fonts/lato-v25-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-300 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/lato-v25-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-300italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/lato-v25-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/lato-v25-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lato-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-700italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/lato-v25-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-900 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/lato-v25-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-900italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: italic;
  font-weight: 900;
  src: url('fonts/lato-v25-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* unifrakturcook-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'UnifrakturCook';
  font-style: normal;
  font-weight: 700;
  src: url("fonts/unifrakturcook-v25-latin-700.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* almendra-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Almendra';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/almendra-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* almendra-italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Almendra';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/almendra-v28-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* almendra-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Almendra';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/almendra-v28-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* almendra-700italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Almendra';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/almendra-v28-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
  height: 100%;
  width: 100%;
  margin:0;
  padding:0;

  scroll-timeline: --page-scroll;
}

body{
  background:#070000;
  margin:0;
  padding:0;
  width:100vw;
  overflow-x:hidden;

  font-family: "Lato", sans-serif;
  color:white;
  animation-timeline: --page-scroll;

  background-image:url(images/starminmin.png);
  background-repeat:repeat;
  background-size:20vw;
}
.fixed{
  background-attachment: fixed;
}

.nav{
  width:92vw;
  height:8vh; 
  font-style: normal; 
  padding: 0 4vw;

  font-weight: 700;
  font-style: normal;
}

.nav a {
  display:flex;
  align-items: center;
  vertical-align: center;
  text-align: center;
  font-size: 1.25vw;
  height:8vh;
  float:right;
  padding-left: 10vh;
  font-weight:500;
  text-shadow:0px 0px 5px #090101;
  transition: color 0.5s; 
  color:white;
  text-decoration: none;
  font-weight:800;
}

.nav a:hover{
  color:rgb(133, 133, 133);
}
#home{
  float:left;
  padding:0;
}
#fullscreen{
  display:block; 
  height:72vh;
  margin:0;
  padding:0;
}
#title{
  position: absolute;
  top:18vh;
  left:39vw;
  font-size: 2.91vw;
  text-shadow:0px 0px 2px #ffffff, 0px 0px 40px #0000005d;
  transform:rotate(-3deg);
  font-family: "UnifrakturCook", sans-serif;

}
#title div{
  position:absolute;
}

.H{
  transform:rotate(36deg);
  top:-0.9vw;
  left:1.4vw;
}
.e{
  transform:rotate(40deg);
  top:1.75vw;
  left:5.1vw;
}
.l{
  transform:rotate(43deg);
  top:3.8vw;
  left:8.5vw;
}
.l2{
  transform:rotate(45.5deg);
  top:5.2vw;
  left:9.9vw;
}
.o{
  transform:rotate(47.5deg);
  top:7.5vw;
  left:11vw;
}
.h2{
  transform:rotate(51deg);
  top:9.75vw;
  left:14.05vw;
}
.W{
  transform:rotate(59deg);
  top:14.84vw;
  left:15.3vw;
}
.o2{
  transform:rotate(70deg);
  top:19.6vw;
  left:18.9vw;
}
.r{
  transform:rotate(71deg);
  top:23vw;
  left:20.8vw;
}
.l3{
  transform:rotate(75deg);
  top:25.4vw;
  left:22vw;
}
.d{
  transform:rotate(80deg);
  top:28.6vw;
  left:21.5vw;
}
.h3{
  transform:rotate(85deg);
  top:31.6vw;
  left:23.15vw;
}

@keyframes biobox {
  0% {}
  84%{background:#09010100;text-shadow:0px 0px 10px rgba(40, 151, 255, 0), 0px 0px 5px #09010184;}
  85% {background:#09010100;text-shadow:0px 0px 10px rgba(40, 151, 255, 0), 0px 0px 5px #090101;}
  100% {background:#09010100;text-shadow:0px 0px 10px rgba(40, 151, 255, 0), 0px 0px 5px #090101;}
}
#biobox{
  margin: 50vh 0 40vh 53vw;

  width:20vw;
  text-shadow:0px 0px 10px rgba(40, 151, 255, 0), 0px 0px 5px rgba(0, 0, 0, 0.839);
  background:#09010100;
  height:15vh;

  animation: biobox auto linear;
	animation-timeline: --page-scroll;

}
#biobox img{
  height:1vw;
  margin: 0vw 0 0 0;
}
#biobox a{
  color:white;
  text-decoration: none;
  line-height:1vw;
  vertical-align: top;
  font-weight: 700;
}
h3{
  font-size: 2.5vw;
  text-wrap: wrap;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.839);
  font-family: "Almendra", serif;
  margin:0;
  padding:0;

}
h4{
  font-size: 1.2vw;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.839);
  margin:0;
  padding:0;
}

.footer{
  height:7vh;
  padding: 0 4vw;
  margin:0;
  font-size: 2vh;
  background:linear-gradient( transparent, #09010170);
}

h5{
  display:inline-block;
  font-weight:700;
  margin:0;
  height:7vh;
  line-height: 7vh;
  font-size:2vh;
  padding:0;
}
.sitemap{
  display:inline-block;
  float:right;
  color:white;
  height:7vh;
  line-height: 7vh;
  margin:0;
  padding:0;
}
.sitemap a{
  margin: 0 0 0 2vw;
  color:white;
  font-weight:700;
  text-decoration: none;
}

.scrollbox{
  position:absolute;
  z-index:10;
  width:100vw;
  padding:0;
  margin:0;
  
}

.stage{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;

  overflow-x:hidden;
}

@keyframes earth {
  0% {left:-24vw; top:23vh;transform:rotate(20deg);}
  0%{left:-24vw; top:23vh ; transform:rotate(20deg);}
  90% {left:-47vw; top:calc(50vw - 65vw);transform:scale(1.25) rotate(20deg);}
  100% {left:-47vw; top:calc(50vw - 65vw);transform:scale(1.25) rotate(20deg);}
}
.earth{
  position:absolute; 
  top:24vh;
  left:-20vw;
  width:84vw;
  height:84vw;
  z-index:3;
  animation: earth auto linear;
	animation-timeline: --page-scroll;
}
.earth div{
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:84vw;
  height:84vw;
  border-radius:100vw;
  transform-origin: 50% 50%;
}

#eback-1{
  box-shadow:0px 0px 1vw #afe5f2;
  top:0.28vw;
  left:0.28vw;
  display:block;
  width:83.16vw;
  height:83.16vw;
}
#eback{
  background:  radial-gradient(at 50% 30%,#080c1b,#0e1530, 40%, #99afb8,90%,rgb(207, 218, 223));
  box-shadow:0px 0px 1vw #afe5f2;
  mask-image: radial-gradient(black, 70%,black, transparent,71%, transparent); 
}
#eimage{
  background-image:url(images/earth.png);
  background-position: -0% -0%;
  background-size:100%;
  opacity:0.8;
  top:-3vw;
  left:-3vw;
  display:block;
  width:90vw;
  height:90vw;

}

#atmodiv{
  top:-1.4vw;
  left:-1.4vw;
  width:86.8vw;
  height:86.8vw;
}
#eatmo{
  top:1vw;
  left:0.7vw;
  width:85vw;
  height:85vw;
  background-image:url(images/atmo.png);
  background-position: -0% -0%;
  background-size:100%;
  opacity:1;
  transform: rotate(95deg);
  mask-image: radial-gradient( rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95));
}

#eatmo2{
  top:1vw;
  left:0.7vw;
  width:85vw;
  height:85vw;
  background-image:url(images/eatmo2.png);
  background-size:99%;
  opacity:1;
  transform: rotate(95deg);
}

@keyframes sun {
  0%{top:22vh; transform:scale(2.4)translate(-5vw, -5vw);}
  90% { top:-27vw;transform:scale(2.5)translate(-5vw, -5vw);}
  100% {top:-27vw;transform:scale(2.5)translate(-5vw, -5vw);}
}
.sun{
  position:absolute; 
  transform:scale(2.4) translate(-5vw, -5vw);
  z-index:2;
  top:22vh;
  left: 80vw;

 animation: sun auto linear;
  animation-timeline: --page-scroll;
}
.sun div{
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:10vw;
  height:10vw;
}

#sgradient{
  background:radial-gradient(#fffce9,4%,#fffd89, 7%,#fffd89, 7.5%,rgba(227, 119, 52, 0), 9%, rgba(227, 119, 52, 0), transparent,40%,  transparent);
  top:-10vw;
  left:-10vw;
  width:30vw;
  height:30vw;
}
#simage{
  background-image:url(images/sun.svg);
  background-position: 49.85% 50.95%;
  background-size:39.7%;
  background-repeat:no-repeat;
  opacity:0.6;
}
#satmo{
  top:-6.76vw;
  left:-7.25vw;
  width:24vw;
  height:24vw;
  background-image:url(images/satmo.svg);
  background-position: -0% -0%;
  transform:rotate(-25deg);
  background-size:100%;
  -webkit-filter: drop-shadow(0vw -0vw 0.2vw rgba(255, 0, 0,0.5));
  animation: satmo 15s infinite;*/
}

@keyframes satmo3 {
  0% {opacity:0;}
  50% {opacity:0;}
  90% {opacity:1;}
  100% {opacity:1;}
}
#satmo3{
  top:-3vh;
  left:-16.5vw;
  width:36vw;
  height:30vw;
  background-image:url(images/satmo3.svg);
  background-size:100%;
  -webkit-filter: drop-shadow(0vw -0vw 0.2vw rgba(255, 0, 0,0.5));
  animation: satmo3 auto linear;
	animation-timeline: --page-scroll;
}



@keyframes starkey {
  0%{transform:translateY(87vh); }
  90% {transform:translateY(0vh);}
  100% {transform:translateY(0vh);}
}

.workpage{
  margin: 10vh 10vw 0 10vw; 
  width:80vw;
  display:grid;
  grid-template-columns:  19.25vw 19.25vw 19.25vw 19.25vw;
  column-gap: 1vw;
  row-gap: 1vw;
}
h2{
  display:block;
  font-size: 4vw;
  line-height:7.5vw;
  height:fit-content;
  text-shadow: 0px 0px 20px #000000bc;
  margin:0;
  padding:0;
  font-family: "Almendra", serif;
}
h2 img{
  margin: 6vh 0 0 0;
  height:2vw;
}
h3 img{
  margin: 6vh 0 0 0;
  height:2vw;
}
.titleart{
  grid-column: 3 / 5;
  margin:0;
  padding:0 0 0 0vw;
  height:7.5vw;
  line-height:7.5vw;
}

.titleweb{
  grid-column: 1 / 3;
  margin:0;
  padding:0;
}
.titleweb2{
  grid-column: 3 / 5;
  margin:0;
  padding:0;
  text-align:right;
  height:28vh;
  overflow:hidden;
  display:flex;
  align-items: flex-end; 
}
.titlebio{
  margin: 7vw 0 0 0;
  padding:0;
}


.artitem{
  width:100%;
  overflow:hidden;
  position:relative;
  background:white;
}

.halfitem{
  position:relative;
  display:flex;

}
.halfitem div{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
@keyframes halfitem{
  0%{clip-path: polygon(-100% -100%, 200% -100%, 50% 200%);}
  30%{clip-path: polygon(-100% -100%, 200% -100%, 50% 200%);}
  70%{clip-path: polygon(200% -100%, 200% -100%, 50% 200%);}
  100%{clip-path: polygon(200% -100%, 200% -100%, 50% 200%);}
}
.halfitemitem{
  z-index:6;

  animation: 5s halfitem infinite alternate linear;

}


.artitem:hover .artcover{
  opacity:1;
}
.artcover{
  display: flex;
  align-items: center;
  position:absolute;
  top:0;
  left:0;
  height:calc(100% - 0.4vw);
  width:calc(100% - 0.4vw);
  border:white solid 0.2vw;
  background:#090101ba;
  font-family: "UnifrakturCook", cursive;
  text-align: center;
  opacity:0;
  transition: 0.1s opacity;
  color:white;
}
.halfitem div .artcover{
  height:calc(100% - 0.4vw);
  width:calc(100% - 0.4vw);
}
.artcover h3{
  text-align:center;
  width:100%;
  font-size: 300%;
  font-family: "UnifrakturCook", cursive;
}
.artitem img{
  max-height:100%;
}
.multim img{
  max-height:none;
  max-width:100%;
}
.mainart{
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  height:calc(22.4vw + 1vw);
}
.mainart img{
  width:100%;
  max-height:none;
}
.secondart{
  height:14.9vw;
}

.tallart{
  grid-row: 2 / 4;
  height:calc(29.9vw + 1vw);
}
.tallart img{
  height:100%;
}
.tallart2{
  grid-row: 4 / 6;
  height:calc(29.9vw + 1vw);
}
.tallart2 img{
  height:100%;
}
.artnine{
  grid-column: 4;
}
#art1{
  position:relative;
  left: -1vw;
}
#art2{
  position:relative;
  top: -5.5vw;
  transform: scaleX(-1);
  max-height:none;
  max-width:100%;
}
#art4{
  position:relative;
  left: -0.5vw;
}
#art5{
  position:relative;
  left: -0.5vw;
}
#art6{
  position:relative;
  left: -3vw;
}
#art7{
  position:relative;
  left: -3.5vw;
}
#art8{
  position:relative;
  left: -1.5vw;
}
#art9{
  position:relative;
  top: -4vw;
  left:3vw;
  max-height:none;
  max-width:100%;
  transform:scale(2);
}
#art10{
  position:relative;
  left:-2vw;
}

.bottomline img{
  margin: 0;
  height:2vw;
}
.bottomline{
  height:2vw;
  margin: 2vh 10vw 10vh 10vw; 
  width:80vw;
  display:inline-block;
  overflow:hidden;
}

.starline img{
  margin: 0;
  height:2vw;
}
.starline{
  height:2vw;
  margin:0; 
  width:100%;
  display:inline-block;
  overflow:hidden;
}




.secondweb{
  height:28vh;
}
.secondweb img{
  transform:translate(-50%);
  position:relative;
  left:50%;
}
.mainweb img{
  transform:translate(-50%);
  position:relative;
  left:50%;
  height:calc(43vh + 1vw);
}
.mainweb{
  grid-column: 3 / 5;
  grid-row: 1 / 3;
  height:calc(43vh + 1vw);
}

.biopage{
  margin: 10vh 20vw; 
  width:60vw;
  display:grid;
  grid-template-columns: auto auto;
  column-gap: 3vw;
  height:73vh;

}
#elevate{
  position:relative;
  z-index: 5;
}
#me{
  height:70vh;
  position:relative;
  z-index:3;
}
.rel{
  position:relative;
}
.abtswirl{
  position:absolute;
  top:-3vw;
  left:-2vw;
  width:64vw;
}
#swirl1{
  z-index:4;
}
#swirl3{
  top:calc(70vh - 9.03vw);
}


.artpage{
  margin:2.5vh 5vw;
  display:grid;
  grid-template-columns: 60vw 30vw;
}
.artscroll img{
  max-height:79vh;
  height:79vh;
  display:inline-block;
}
.artscroll video{
  max-height:79vh;
  height:79vh;
  display:inline-block;
}
.artscroll{
  max-height:79vh;
  max-width:60vw;
  overflow-x: scroll;
  overflow-y:hidden;
  white-space: nowrap;
  position:relative;
}
.artscroll h4{
  position:absolute;
  height:5vh;
  top:calc(100% - 5vh);
  left:1vw;
  z-index:10;
  color:black;
  width:fit-content;
  color:black;
  text-shadow:none;
  display:flex;
  font-size: 3vh;
  line-height: 5vh;
}
.artscroll h4 img{
  height:5vh;
  margin-left:1vh;
}
.artdesc{
  margin: 7vh 0 0 2vw;
  text-align:left;
  text-wrap: wrap;
  white-space: normal;
}
.artdesc h3{
  text-wrap: wrap;
  white-space: normal;
  font-family: "Almendra", serif;
  letter-spacing: 500%;
  font-size:3vw;
  padding:0;
  margin:0;
}
.webpage{
  margin:5vh 5vw;
  display:grid;
  grid-template-columns: 70vw 20vw;
}
.artscroll{
  width:70vw;
}
.webvid video{
  width:100%;
}

#indstar{
  margin: 0 auto;
  display:none;
}
#abtstar{
  display:none;
}

.award{
  display:grid;
  grid-template-columns: auto auto;
  margin-top:5vh;
}
.award img{
  height:4vw;
}
.award h4{
  font-size: 1.2vw;
}
.altcolor{
  display:grid;
  grid-template-columns: auto auto;
  margin-top:5vh;
  column-gap:1vw;
  text-decoration:none;
}
.altcolor img{
  height:3vw;
}
.altcolor h4{
  font-size: 1.2vw;
  text-decoration: none;
  color:white;
}
.noline{
  text-decoration: none;
}







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

  .nav{
    display:flex;
    width:96vw;
    height:8vh; 
    overflow:scroll;
    font-style: normal; 
    padding: 0 2vw;
    margin:0;
  }
  .nav a {
    display:inline-block;
    height:4vh;
    line-height:4vh;
    float:none;
    white-space:nowrap;
    word-break: keep-all;
    padding:2vh;
    margin:0;
    font-size: 2.5vh;
  }

  #home{
    float:none;
    padding:2vh 6vh 2vh 2vh;
  }



  #title{
    transform:scale(2.5);
    top:  20vh;
    left:25vw;
    font-size: 3vw;
    margin:0;
    padding:0;
    text-shadow: 0.2vw 0.2vw 0 #700200, 0.4vw 0.4vw 0 #700200, 0 0 0.5vw #070000;
      font-family: "UnifrakturCook", cursive;

  }
  #fullscreen{
    height: 20vh;
  }
  .earth{
    transform:scale(2.5);
    top:20vh;
    left:-143vw;
    transform-origin: 0% 0%;
    animation: none;
  }
  #eatmo{
    transform: rotate(72deg);
  }
  #eatmo2{
    transform: rotate(72deg);
  }




  .stage{
    position:absolute;
    height:calc(40vh + 330vw);
    overflow-x: hidden;
    overflow-y: visible;
    width:100vw;
  }
  body{
    background-attachment:scroll;
    background-size:60vw;

  }
  #atmodiv{
    animation: none;
    transform:rotate(70deg);
  }
  .sun{
    left:-7.5vw;
    top:calc(20vh + 305vw);
    animation: none;
  }
  .sun div{
    width:30vw;
    height:30vw;
  }

  #sgradient{
    top:-30vw;
    left:-30vw;
    width:90vw;
    height:90vw;
    box-shadow: none;
    text-shadow: none;
  }

  #satmo{
    top:-20.28vw;
    left:-21.75vw;
    width:72vw;
    height:72vw;
    transform:rotate(22deg);
    -webkit-filter:none;
    box-shadow: none;
    text-shadow: none;
  }
  #satmo3{
    top:-135vw;
    left:-7vw;
    height:230vw;
    width:100vw;
    background-image:url(images/working-mobile-background.svg);
    animation: none;
    background-size: 70vw;
    -webkit-filter: drop-shadow(0vw -0vw 0.4vw rgba(255, 0, 0,0.5));
  }

  .moon{
    left:50vw;
    top:calc(20vh + 180vw);
    animation: none;
  }
  .moon div{
    display:block;
    position:absolute;
    height: 120vw;
    width:120vw;
    border-radius:100%;
    overflow:hidden;
    
    animation: moonkey 120s linear;
    animation-iteration-count:infinite;
  }


  #biobox{
    padding: 180vw 0 60vw 30vw;
    margin:0;

    width:60vw;
    height:fit-content;
    text-align:right;

    animation: none;

  }
  #biobox a{
    color:#700200;
    line-height:8vw;
    display:block;
    background:white;
    padding:0 2vw;
    width:50vw;
    margin-left:10vw;
    text-shadow: none;
    text-align: left;
    box-shadow: 0.2vw 0.2vw 0 #700200, 0.4vw 0.4vw 0 #700200, 0 0 0.5vw #070000;

  }
  h4{
    font-size:4vw;
  }
  #biobox h4{
    
    text-shadow: 0.2vw 0.2vw 0 #700200, 0.4vw 0.4vw 0 #700200, 0 0 0.5vw #070000;
  }
  #biobox h3{
    font-size: 10vw;
    font-family: "UnifrakturCook", cursive;
    text-shadow: 0.2vw 0.2vw 0 #700200, 0.4vw 0.4vw 0 #700200, 0 0 0.5vw #070000;
  }




  .workpage{
    margin: 1vh 4vw 0 4vw; 
    width:92vw;
    grid-template-columns: 44vw 44vw;
    display:grid;
    row-gap:4vw;
    column-gap:4vw;
  }
  #webworkpage{
    grid-template-columns: 100%;
    row-gap:4vw;
  }


  .mainweb{
    grid-column: inherit;
    grid-row: 2;
    height:46vw;
    width:92vw;
  }
  .secondweb{
    width:92vw;
    height:46vw;
  }
  h2{
    display:block;
    font-size: 8vw;
    line-height:15vw;
    height:15vw;
  }
  h3{
    font-size: 6vw;
    color:white;
    opacity:1;
  }
  h2 img{
    margin: 6vw 0 0 0;
    height:4vw;
  }
  h3 img{
    margin: 0vh 0 0 0;
    height:4vw;
  }
  .titleweb{
    grid-column: inherit;
    grid-row: 1;
    margin-top:5vw;
    
  }
  .titleweb2{
    grid-column:inherit;
    height:40vw;
  }
  .secondweb img{
    width:92vw;
  }
  .mainweb img{
    width:92vw;
    height:fit-content;
  }

  .webpage{
    margin:5vh 5vw 5vh 5vw;
    display:block;
    min-height:65vh;
    width:90vw;
    grid-template-columns: 90vw;
  }
  .webpage video{
    width:90vw;
  }
  .artdesc{
    margin: 0vh 0 0 2vw;
  }
  .artdesc h3{
    font-size:12vw;
  }
  .artpage{
    margin:5vh 1vw;
    display:grid;
    grid-template-columns: 98vw;
  }
  .artscroll img{
    height:65vh;
  }
  .artscroll video{
    height:65vh;
  }
  .artscroll{
    height:65vh;
    max-width:98vw;
    width:98vw;
    margin-bottom:2vw;
  }


  .titleart{
    grid-row: 2;
    grid-column: 2 / 3;
    height:29.9vw;
    line-height:7.5vw;
    width:44vw;
    overflow:hidden;
  }
  .artcover{
    display:none;
  }
  .artitem img{
    max-height:none;
    width:100%;
  }
  .mainart{
    grid-column:  1 / 3;
    grid-row: 1;
    height:fit-content;
    width:92vw;
  }
  .secondart{
    height:29.9vw;
    width:44vw;
  }

  .tallart{
    height:calc(59.9vw + 4vw);
    width:44vw;
  }
  .tallart img{
    height:calc(59.9vw + 4vw);
    width:auto;;
  }
  .tallart2{
    grid-column: inherit;
    grid-row: span 2;
    height:calc(59.9vw + 4vw);
    width:44vw;
  }
  .tallart2 img{
    height:calc(59.9vw + 4vw);
    width:auto;
  }
  .artnine{
    grid-column: inherit;
    grid-row: inherit;
  }
  #art1{
    position:relative;
    left: -1vw;
  }
  #art2{
    position:relative;
    top: -20vw;
    transform: scaleX(-1);
    max-height:none;
    max-width:100%;
  }
  #art3{
    transform: scaleX(-1);
  }
  #art4{
    position:relative;
    left: -0.5vw;
    transform: scaleX(-1);
  }
  #art5{
    position:relative;
    left: -0.5vw;
    transform: scaleX(-1);
  }
  #art6{
    position:relative;
    left: -0vw;
    transform: scaleX(-1);
  }
  #art7{
    position:relative;
    left: -3.5vw;
  }
  #art8{
    position:relative;
    left: -1.5vw;
    transform: scale(1.5);
  }
  #art9{
    position:relative;
    top: -10vw;
    left:-3vw;
    max-height:none;
    max-width:100%;
    transform: scale(-2, 2);
  }
  #art10{
    position:relative;
    left:-2vw;
  }

  .starline img{
    height:4vw;
  }
  .starline{
    height:3.5vw;
    padding-bottom: 2vw;
  }

  .footer{
    height:fit-content;
    padding: 0 4vw;
    margin:0;
    font-size: 2vh;
    background:transparent;
    overflow:hidden;
  }
  .indfooter{
    text-shadow: 0.2vw 0.2vw 0 #700200, 0.4vw 0.4vw 0 #700200, 0 0 0.5vw #070000;
  }

  h5{
    display:block;
    width:100%;
    text-align: center;
    height:fit-content;
    line-height: 3vh;
  }
  .sitemap{
    display:block;
    float:none;
    text-align: center;
    height:5vh;
    line-height: 5vh;
    margin:0 0 3vh 0;
  }
  .bottomline img{
    margin: 0;
    height:4vw;
  }
  .bottomline{
    height:5vw;
    margin: 2vh 10vw 5vh 10vw; 
    width:80vw;
    display:inline-block;
    overflow:hidden;
  }
  #indstar{
    display:block;
    margin-left:3vw;
    
  }
  .indindstar{
    -webkit-filter: drop-shadow(.2vw 0.2vw 0 #700200) drop-shadow(.4vw 0.4vw 0 #700200) drop-shadow(0 0 0.5vw #07000046);
  }

  .biopage{
    margin: 2vw 5vw 10vh 5vw; 
    width:90vw;
    display:grid;
    grid-template-columns: auto;
    height:fit-content;

  }
  .titlebio{
    margin: 2vh 0 0 0;
    padding:0;
    text-align: center;
    font-size: 8vw;
    
  }
  .biopage h4{
    text-align: center;
  }
  #me{
    position:absolute;
    left:-25vw;
    top:-30vw;
    width:150%;
    height:fit-content;
  }
  #mewind{
    position:relative;
    width:89vw;
    height:89vw;
    border:white 0.5vw solid;
    overflow:hidden;
  }
  #abtstar{
    width:89vw;
    position:absolute;
    height:10vw;
    padding-left:3vw;
    top:84.5vw;
    display:inherit;
    z-index:4;
  }
  #abtstar img{
    height:10vw;
  }
  .rel{
    position:relative;
  }

  .award img{
    height:12vw;
  }
  .award h4{
    font-size: 4vw;
  }
  .altcolor{
    column-gap:4vw;
  }
  .altcolor img{
    height:10vw;
  }
  .altcolor h4{
    font-size: 4vw;
  }
  .abtswirl{
    display:none;
  }
}