body {
  background-image: linear-gradient(to right, #999999, #bbbbbb);
}

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.25;
  z-index: -1;
}

h1 {
  text-align : center;
  font-family : "Lucida Console", Monaco, monospace;
  font-size : xx-large;
}

h1 .title1 {
  color : #686868;
}

h1 .title2 {
  color : #707070;
}

h1 .title3 {
  color : #787878;
}

address {
  text-align : center;
  font-family : "Lucida Console", Monaco, monospace;
  font-size : small;
  color : #606060;
}

address a {
  text-decoration : none;
  font-family : Consolas, Courier, monospace;
  color : #585858;
}

address a:hover {
  text-decoration : none;
  color : #ffffff;
}

address a.mailbox {
  font-size : x-large;
}

.cloud {
  margin-left: auto;
  margin-right: auto;
  height: 300px;
  width: 80%;
  padding : 25px;
  position: relative;
  overflow : hidden;
}

@media screen and (min-height: 600px) {
  .cloud {
    height: 400px;
  }
}

@media screen and (min-height: 1200px) {
  .cloud {
    height: 800px;
  }
}

.audio {
  font-family : Optima, "Lucida Grande", sans-serif;
}

.comm {
  font-family : Impact, Charcoal, sans-serif;
}

.cult {
  font-family : "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.it {
  font-family : "Lucida Console", Monaco, monospace;
}

.tag {
  position: absolute;
  right: 45%;
  top: 45%;
}

.tag1 {
  color : #808080;
  color : #70707080;
  animation: circuit1 29s infinite ease-in-out alternate;
}

.tag2 {
  color : #606060;
  color : #50505080;
  animation: circuit1 37s infinite ease-in-out alternate;
}

.tag3 {
  color : #707070;
  color : #60606080;
  animation: circuit1 41s infinite ease-in-out alternate;
}

.tag4 {
  color : #787878;
  color : #68686880;
  animation: circuit1 31s infinite ease-in-out alternate;
}

.tag5 {
  color : #686868;
  color : #58585880;
  animation: circuit1 43s infinite ease-in-out alternate;
}

.tag6 {
  color : #686868;
  color : #58585880;
  animation: circuit2 29s infinite ease-in-out alternate;
}

.tag7 {
  color : #808080;
  color : #70707080;
  animation: circuit2 37s infinite ease-in-out alternate;
}

.tag8 {
  color : #707070;
  color : #60606080;
  animation: circuit2 51s infinite ease-in-out alternate;
}

.tag9 {
  color : #787878;
  color : #68686880;
  animation: circuit2 31s infinite ease-in-out alternate;
}

.tag10 {
  color : #606060;
  color : #50505080;
  animation: circuit2 43s infinite ease-in-out alternate;
}

.tag11 {
  color : #808080;
  color : #70707080;
  animation: circuit3 29s infinite ease-in-out alternate;
}

.tag12 {
  color : #606060;
  color : #50505080;
  animation: circuit3 37s infinite ease-in-out alternate;
}

.tag13 {
  color : #707070;
  color : #60606080;
  animation: circuit3 51s infinite ease-in-out alternate;
}

.tag14 {
  color : #787878;
  color : #68686880;
  animation: circuit3 31s infinite ease-in-out alternate;
}

.tag15 {
  color : #686868;
  color : #58585880;
  animation: circuit3 43s infinite ease-in-out alternate;
}

.tag16 {
  color : #686868;
  color : #58585880;
  animation: circuit4 29s infinite ease-in-out alternate;
}

.tag17 {
  color : #808080;
  color : #70707080;
  animation: circuit4 37s infinite ease-in-out alternate;
}

.tag18 {
  color : #707070;
  color : #60606080;
  animation: circuit4 51s infinite ease-in-out alternate;
}

.tag19 {
  color : #787878;
  color : #68686880;
  animation: circuit4 31s infinite ease-in-out alternate;
}

.tag20 {
  color : #606060;
  color : #50505080;
  animation: circuit4 43s infinite ease-in-out alternate;
}

.tag21 {
  color : #808080;
  color : #70707080;
  animation: circuit1 47s infinite ease-in-out alternate;
}

.tag22 {
  color : #606060;
  color : #50505080;
  animation: circuit1 51s infinite ease-in-out alternate;
}

.tag23 {
  color : #707070;
  color : #60606080;
  animation: circuit2 41s infinite ease-in-out alternate;
}

.tag24 {
  color : #787878;
  color : #68686880;
  animation: circuit3 41s infinite ease-in-out alternate;
}

@keyframes circuit1 {
  0% {
    transform: translateX(0px) translateY(0px) scale(0); opacity : 0.0
  }
  25% {
    transform: translateX(-70px) translateY(70px) scale(1); opacity : 0.7
  }
  35% {
    transform: translateX(0px) translateY(100px) scale(2); opacity : 0.9
  }
  45% {
    transform: translateX(100px) translateY(0px) scale(1); opacity : 1.0
  }
  55% {
    transform: translateX(0px) translateY(-100px) scale(3); opacity : 0.9
  }
  65% {
    transform: translateX(-70px) translateY(-70px) scale(1); opacity : 0.7
  }
  75% {
    transform: translateX(0px) translateY(0px) scale(0); opacity : 0.0
  }
} 

@keyframes circuit2 {
  0% {
    transform: translateX(0px) translateY(0px) scale(0); opacity : 0.0
  }
  5% {
    transform: translateX(0px) translateY(0px) scale(0); opacity : 0.0
  }
  30% {
    transform: translateX(70px) translateY(-70px) scale(1); opacity : 0.7
  }
  40% {
    transform: translateX(100px) translateY(0px) scale(2); opacity : 0.9
  }
  50% {
    transform: translateX(0px) translateY(100px) scale(1); opacity : 1.0
  }
  60% {
    transform: translateX(-100px) translateY(0px) scale(3); opacity : 0.9
  }
  70% {
    transform: translateX(-70px) translateY(-70px) scale(1); opacity : 0.7
  }
  80% {
    transform: translateX(0px) translateY(0px) scale(0); opacity : 0.0
  }
} 

@keyframes circuit3 {
  0% {
    transform: translateX(0px) translateY(0px) scale(0); opacity : 0.0
  }
  10% {
    transform: translateX(0px) translateY(0px) scale(0); opacity : 0.0
  }
  35% {
    transform: translateX(70px) translateY(70px) scale(1); opacity : 0.7
  }
  45% {
    transform: translateX(0px) translateY(100px) scale(3); opacity : 0.9
  }
  55% {
    transform: translateX(-100px) translateY(0px) scale(1); opacity : 1.0
  }
  65% {
    transform: translateX(0px) translateY(-100px) scale(2); opacity : 0.9
  }
  75% {
    transform: translateX(70px) translateY(-70px) scale(1); opacity : 0.7
  }
  85% {
    transform: translateX(0px) translateY(0px) scale(0); opacity : 0.0
  }
} 

@keyframes circuit4 {
  0% {
    transform: translateX(0px) translateY(0px) scale(0); opacity : 0.0
  }
  15% {
    transform: translateX(0px) translateY(0px) scale(0); opacity : 0.0
  }
  40% {
    transform: translateX(70px) translateY(70px) scale(1); opacity : 0.7
  }
  50% {
    transform: translateX(100px) translateY(0px) scale(3); opacity : 0.9
  }
  60% {
    transform: translateX(0px) translateY(-100px) scale(1); opacity : 1.0
  }
  70% {
    transform: translateX(-100px) translateY(0px) scale(2); opacity : 0.9
  }
  80% {
    transform: translateX(-70px) translateY(70px) scale(1); opacity : 0.7
  }
  90% {
    transform: translateX(0px) translateY(0px) scale(0); opacity : 0.0
  }
} 

.skill {
  font-size : 150%;
  position: absolute;
  width: 80%;
  text-align : center;
  bottom: 20px;
  color : #cccccc;
  /*transform : translateX(100%);*/
  /*white-space: nowrap;*/
  /*animation: scroll-left 10s infinite ease-in-out;*/
  transition : opacity 1s;
}

.phrase {
  font-size : 150%;
  position: absolute;
  width: 80%;
  text-align : center;
  top : 250px;
  color : #cccccc;
  opacity : 0;
  transition : opacity 1s;
}

.word:hover ~ .phrase {
  opacity : 1;
}

@keyframes scroll-left {
  0% { 
    transform: translateX(100%); 
  }
  100% { 
    transform: translateX(-100%); 
  }
}

.skill1 {
  opacity : 0;
}

.skill2 {
  opacity : 0;
}

.skill3 {
  opacity : 0;
}

.skill4 {
  opacity : 0;
}

.skill5 {
  opacity : 0;
}

.skill6 {
  opacity : 0;
}

.skill7 {
  opacity : 0;
}

.skill8 {
  opacity : 0;
}

.skill9 {
  opacity : 0;
}

.skill10 {
  opacity : 0;
}

.skill11 {
  opacity : 0;
}

.skill12 {
  opacity : 0;
}

.skill13 {
  opacity : 0;
}

.skill14 {
  opacity : 0;
}

.skill15 {
  opacity : 0;
}

.skill16 {
  opacity : 0;
}

.skill17 {
  opacity : 0;
}

.skill18 {
  opacity : 0;
}

.skill19 {
  opacity : 0;
}

.skill20 {
  opacity : 0;
}

.skill21 {
  opacity : 0;
}

.skill22 {
  opacity : 0;
}

.skill23 {
  opacity : 0;
}

.skill24 {
  opacity : 0;
}

.tag1:hover ~ .skill1 {
  opacity : 1;
}

.tag2:hover ~ .skill2 {
  opacity : 1;
}

.tag3:hover ~ .skill3 {
  opacity : 1;
}

.tag4:hover ~ .skill4 {
  opacity : 1;
}

.tag5:hover ~ .skill5 {
  opacity : 1;
}

.tag6:hover ~ .skill6 {
  opacity : 1;
}

.tag7:hover ~ .skill7 {
  opacity : 1;
}

.tag8:hover ~ .skill8 {
  opacity : 1;
}

.tag9:hover ~ .skill9 {
  opacity : 1;
}

.tag10:hover ~ .skill10 {
  opacity : 1;
}

.tag1:hover ~ .skill1 {
  opacity : 1;
}

.tag2:hover ~ .skill2 {
  opacity : 1;
}

.tag3:hover ~ .skill3 {
  opacity : 1;
}

.tag4:hover ~ .skill4 {
  opacity : 1;
}

.tag5:hover ~ .skill5 {
  opacity : 1;
}

.tag6:hover ~ .skill6 {
  opacity : 1;
}

.tag7:hover ~ .skill7 {
  opacity : 1;
}

.tag8:hover ~ .skill8 {
  opacity : 1;
}

.tag9:hover ~ .skill9 {
  opacity : 1;
}

.tag10:hover ~ .skill10 {
  opacity : 1;
}

.tag11:hover ~ .skill11 {
  opacity : 1;
}

.tag12:hover ~ .skill12 {
  opacity : 1;
}

.tag13:hover ~ .skill13 {
  opacity : 1;
}

.tag14:hover ~ .skill14 {
  opacity : 1;
}

.tag15:hover ~ .skill15 {
  opacity : 1;
}

.tag16:hover ~ .skill16 {
  opacity : 1;
}

.tag17:hover ~ .skill17 {
  opacity : 1;
}

.tag18:hover ~ .skill18 {
  opacity : 1;
}

.tag19:hover ~ .skill19 {
  opacity : 1;
}

.tag20:hover ~ .skill20 {
  opacity : 1;
}

.tag21:hover ~ .skill21 {
  opacity : 1;
}

.tag22:hover ~ .skill22 {
  opacity : 1;
}

.tag23:hover ~ .skill23 {
  opacity : 1;
}

.tag24:hover ~ .skill24 {
  opacity : 1;
}