body, html { 
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
  padding: 0px;
  overflow-x: hidden; 
  overflow-y: hidden;
  user-select: none;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #FFFFFF;
  pointer-events: none;
}

#header {
  position: absolute;
  width: 100vw;
  height: 100%;
  background-color: #00000000;
  pointer-events: none;
}

.center-third {
  position: absolute;
  /* display: inline-block; */
  width: 100vw;
  text-align: center;
}

.header-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.header-list > li {
  display: inline-block;
}

.header-list > li a {
  display: block;
  text-align: center;
  padding-top: 20px;
  margin-left: 4vw;
  margin-right: 4vw;
  max-width: 30vw;
  text-decoration: none;
  pointer-events: all;
}

.dark .menu-item {
  color: #BBB;
}

.light .menu-item {
  color: #555;
}

.dark .menu-item:hover {
  color: white;
}

.light .menu-item:hover {
  color: black;
}

.header-list li a:hover {
  /* text-decoration: underline; */
  cursor: pointer;
}

#iPhone {
  position: absolute;
  max-width: 100%;
  max-height: 65%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: all;
  user-select: none;
}

#logo {
  position: absolute;
  top:10px;
  left:-35px;
  height:40px;
  width:250px;
  object-fit: contain;
  user-select: none;
}

#container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -5;
  /* background-color:#429bf4; */
}

#app-store {
  position: absolute;
  top:90vh;
  left:52vw;
  width:30vw;
  max-height:60px;
  max-width:200px;
  object-fit: contain;
}

#github {
  position: absolute;
  top:90vh;
  right:52vw;
  width:30vw;
  max-height:60px;
  max-width:200px;
  object-fit: contain;
  margin-left: 5px;
}

#circle-view {
  position: absolute;
  max-width: 120%;
  height: 120%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
  user-select: none;
}

#themeSwitch {
  position: absolute;
  top: 15px;
  right:15px;
  pointer-events: all;
}

#themeSwitch > i {
  font-size: 1.5em;
}

.form-switch {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.form-switch i {
  position: relative;
  display: inline-block;
  margin-right: .5rem;
  width: 46px;
  height: 26px;
  background-color: #c4c4c4;
  border-radius: 23px;
  vertical-align: text-bottom;
  transition: all 0.3s linear;
}

.form-switch i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;
  height: 22px;
  background-color: #ddd;
  border-radius: 11px;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}

.form-switch i::after {
  content: "\f185";
  text-align: center;
  line-height: 22px;
  color:rgb(255, 187, 0);
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #FFF;
  border-radius: 11px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.2s ease-in-out;
}

.form-switch:active i::after {
  width: 28px;
  transform: translate3d(2px, 2px, 0);
}

.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }

.form-switch input { display: none; }

.form-switch input:checked + i { background-color: #6C85A3; }

.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }

.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); content: "\f186"; color: #4C6593; }


@media (orientation: portrait) {
  .center-third {
    top: calc(100% - 70px);
  }

  .rotate-translate-1 {
    transform: rotate(0deg) translateY(40vw) rotate(0deg);
    -ms-transform: rotate(0deg) translateY(40vw) rotate(0deg);
    -webkit-transform: rotate(0deg) translateY(40vw) rotate(0deg);
  }
  .rotate-translate-2 {
    transform: rotate(45deg) translateY(40vw) rotate(0deg);
    -ms-transform: rotate(45deg) translateY(40vw) rotate(0deg);
    -webkit-transform: rotate(45deg) translateY(40vw) rotate(0deg);
  }
  .rotate-translate-3 {
    transform: rotate(90deg) translateY(40vw) rotate(0deg);
    -ms-transform: rotate(90deg) translateY(40vw) rotate(0deg);
    -webkit-transform: rotate(90deg) translateY(40vw) rotate(0deg);
  }
  .rotate-translate-4 {
    transform: rotate(135deg) translateY(40vw) rotate(0deg);
    -ms-transform: rotate(135deg) translateY(40vw) rotate(0deg);
    -webkit-transform: rotate(135deg) translateY(40vw) rotate(0deg);
  }
  .rotate-translate-5 {
    transform: rotate(180deg) translateY(40vw) rotate(0deg);
    -ms-transform: rotate(180deg) translateY(40vw) rotate(0deg);
    -webkit-transform: rotate(180deg) translateY(40vw) rotate(0deg);
  }
  .rotate-translate-6 {
    transform: rotate(225deg) translateY(40vw) rotate(0deg);
    -ms-transform: rotate(225deg) translateY(40vw) rotate(0deg);
    -webkit-transform: rotate(225deg) translateY(40vw) rotate(0deg);
  }
  .rotate-translate-7 {
    transform: rotate(270deg) translateY(40vw) rotate(0deg);
    -ms-transform: rotate(270deg) translateY(40vw) rotate(0deg);
    -webkit-transform: rotate(270deg) translateY(40vw) rotate(0deg);
  }
  .rotate-translate-8 {
    transform: rotate(315deg) translateY(40vw) rotate(0deg);
    -ms-transform: rotate(315deg) translateY(40vw) rotate(0deg);
    -webkit-transform: rotate(315deg) translateY(40vw) rotate(0deg);
  }

  .fourtypixels {
    width: 8vw;
    height: 0.5px;
  }
  
  .particletext {
    position: absolute;
    left:calc(50vw - 4vw);
    top:50%;
    z-index: -10;
  }

}

@media (orientation: landscape) {
  .rotate-translate-1 {
    transform: rotate(0deg) translateY(40vh) rotate(0deg);
    -ms-transform: rotate(0deg) translateY(40vh) rotate(0deg);
    -webkit-transform: rotate(0deg) translateY(40vh) rotate(0deg);
  }
  .rotate-translate-2 {
    transform: rotate(45deg) translateY(40vh) rotate(0deg);
    -ms-transform: rotate(45deg) translateY(40vh) rotate(0deg);
    -webkit-transform: rotate(45deg) translateY(40vh) rotate(0deg);
  }
  .rotate-translate-3 {
    transform: rotate(90deg) translateY(40vh) rotate(0deg);
    -ms-transform: rotate(90deg) translateY(40vh) rotate(0deg);
    -webkit-transform: rotate(90deg) translateY(40vh) rotate(0deg);
  }
  .rotate-translate-4 {
    transform: rotate(135deg) translateY(40vh) rotate(0deg);
    -ms-transform: rotate(135deg) translateY(40vh) rotate(0deg);
    -webkit-transform: rotate(135deg) translateY(40vh) rotate(0deg);
  }
  .rotate-translate-5 {
    transform: rotate(180deg) translateY(40vh) rotate(0deg);
    -ms-transform: rotate(180deg) translateY(40vh) rotate(0deg);
    -webkit-transform: rotate(180deg) translateY(40vh) rotate(0deg);
  }
  .rotate-translate-6 {
    transform: rotate(225deg) translateY(40vh) rotate(0deg);
    -ms-transform: rotate(225deg) translateY(40vh) rotate(0deg);
    -webkit-transform: rotate(225deg) translateY(40vh) rotate(0deg);
  }
  .rotate-translate-7 {
    transform: rotate(270deg) translateY(40vh) rotate(0deg);
    -ms-transform: rotate(270deg) translateY(40vh) rotate(0deg);
    -webkit-transform: rotate(270deg) translateY(40vh) rotate(0deg);
  }
  .rotate-translate-8 {
    transform: rotate(315deg) translateY(40vh) rotate(0deg);
    -ms-transform: rotate(315deg) translateY(40vh) rotate(0deg);
    -webkit-transform: rotate(315deg) translateY(40vh) rotate(0deg);
  }

  .fourtypixels {
    width: 8vh;
    height: 0.5px;
  }
  
  .particletext {
    position: relative;
    left:calc(50vw - 4vh);
    top:50%;
    z-index: -10;
  }

}

.bubbles > .particle {
  opacity:0;
  position: absolute;
  background-color:rgba(33,150,243,0.5);
  animation: bubbles 3s ease-in infinite;
  border-radius:100%;
}

.particle-color-1 > .particle {
  background-color:#d79eff;
}
.particle-color-2 > .particle {
  background-color:#cabdff;
}
.particle-color-3 > .particle {
  background-color:#92c2ff;
}
.particle-color-4 > .particle {
  background-color:#7fd2ff;
}
.particle-color-5 > .particle {
  background-color:#82cdff;
}
.particle-color-6 > .particle {
  background-color:#9fbcff;
}
.particle-color-7 > .particle {
  background-color:#c3a8ff;
}
.particle-color-8 > .particle {
  background-color:#dc9bff;
}

@keyframes bubbles {
  0% { opacity: 0; }
  10% { opacity: 0; transform:translate(0, -20%); }
  30% { opacity: 1; transform:translate(0, -50%); }
  100% { opacity: 0; transform:translate(0, -4000%); }
}

/* CSS specific to iOS devices */
@supports (-webkit-overflow-scrolling: touch) {
  @keyframes bubbles {
    0% { opacity: 0; }
    10% { opacity: 0; transform:translate(0, -20%); }
    30% { opacity: 1; transform:translate(0, -50%); }
    100% { opacity: 0; transform:translate(0, -1500%); }
  }
}