@import url('https://fonts.googleapis.com/css?family=Dosis&display=swap');

/*general*/
* {
  font-family: Dosis;
  margin: 0;
  padding: 0;
}
button {
  color: white;
  position: relative;
  z-index: 2;
  font-size: 40px;
  padding: 0px 10px;
  border: solid;
  border-color: white;
  border-width: 1px;
  border-radius: 6%/25%;
  background-color: rgba(0,0,0);
}
button:hover {
  background-color: rgb(255,255,255);
  color: black;
  cursor: pointer;
}
hr {
  background-color: white;
  border: solid;
  border-color: white;
  border-width: 1px;
}

/*class specefic*/

/*divider*/
.divider {
  display: none;
}

/*menu*/
.menu {
  color: white;
  position: fixed;
  overflow: visible;
  z-index: 5;
  font-size: 12px;
}
.menu-bar {
  width: 100vw;
  height: 32px;
  background: rgb(0,0,0);
  list-style-type: none;
}
.menu-item-pages {
  padding-top: 5px;
  float: right;
}
.menu-item-themes {
  padding-top: 5px;
  float: left;
}
.menu-item-themes span{
  padding: 10px;
}
.menu-item-themes span:hover {
  background: rgb(255,255,255);
  color: black;
  cursor: pointer;
}
.menu-item-themes:hover .dropdown-themes {
  display: block;
}
.menu-item-themes:active .dropdown-themes {
  display: block;
}
.menu-item-pages a {
  padding: 10px;
}
.menu-item-pages a:hover {
  background: rgb(255,255,255);
  color: black;
  cursor: pointer;
}
.dropdown-themes {
  padding-top: 10px;
  text-align: center;
  display: none;
}
.menu-item-themes li {
  padding-top: 5px;
  width: 0;
  min-width: 100px;
  min-height: 30px;
}
.menu-item-themes li:hover {
  background: rgb(255,255,255);
  color: black;
  cursor: pointer;
}
  
/*main page*/
.web-page {
  color: white;
  position: relative;
  overflow: auto;
  overflow-x: hidden;
  padding-top: 5vh;
  width: 100vw;
  height: 95vh;
}
.name-container {
  width: 100%;
  text-align: center;
}
.name {
  margin-top: 40vh;
  font-size: 700%;
  opacity: 0;
  animation-name: name-animate;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

/*options*/
.option-container {
  width: 100%;
  text-align: center;
}
.option {
  margin-left: 2vw;
  margin-right: 2vw;
  display: inline-block;
  opacity: 0;
  animation-name: option-animate;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

/*project*/
.project-container {
  width: 100%;
  text-align: center;
}
.project-button {
  margin-top: 10vh;
  margin-left: 1vw;
  margin-right: 1vw;
  border-radius: 5%;
  font-size: 16px;
  height: 250px;
  width: 300px;
  display: inline-block;
}
.project-button img {
  height: 200px;
}

/*description*/
.description-container {
  position: relative;
  z-index: 2;
  width: 60vw;
  min-height: 60vh;
  margin-top: 10vh;
  margin-left: 20vw;
  margin-right: 20vw;
}
.description-container img {
  border: solid;
  border-color: white;
  border-width: 2px;
  float: right;
  height: 300px;
  margin-top: 3vh;
  margin-bottom: 3vh;
  margin-left: 2vw;
}
.description-container p {
  line-height: 1.9;
  margin-top: 3vh;
  font-size: 20px;
}
.description-container a {
  color: MediumSpringGreen;
}
.description-container a:hover {
  color: Cyan;
  text-decoration: underline;
  cursor: pointer;
}

/*contact*/
.contact-container {
  width: 100%;
  text-align: center;
}
.contact-button {
  margin-left: 3vw;
  margin-right: 3vw;
  margin-top: 15vh;
  display: inline-block;
}

/*return*/
.return-container {
  width: 100%;
  text-align: center;
}
.return-button {
  margin-top: 10vh;
  margin-bottom: 10vh;
}

/*transition classes*/
.off {
  display: none;
}
.activating {
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.deactivating {
  opacity: 1;
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

/*special effects*/
.squares {
  display: none;
}
.ShootingStars {
  display: none;
}
.stars, .twinkling {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display: block;
}
.stars {
  background: #000 url(images/stars.png) repeat top center;
  z-index: -2;
}
.twinkling {
  background: transparent url(images/twinkling.png) repeat top center;
  z-index: -1;
  animation: twinkle 200s linear infinite;
}
.video-bg {
  display: none;
}

/*animations*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes name-animate {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(0.5) translateY(-60vh);
  }
}
@keyframes option-animate {
  0% {
    opacity: 0;
    transform: translateY(-25vh);
  }
  100% {
    opacity: 1;
    transform: translateY(-25vh);
  }
}
@keyframes twinkle {
  0% {
    background-position:0 0;
  }
  100% {
    background-position:-10000px 5000px;
  }
}