@font-face {
  font-family: 'Gustavo';
  src: url('fonts/Gustavo-BoldItalic.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}



body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  height: 100%;
  max-height: 100%;
  overflow-y: hidden;
  color: #251515;
}

div::-webkit-scrollbar {
  display: none;
}

p {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
}

h1 {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
  font-family: 'Gustavo';
}

h2 {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
  font-family: 'Gustavo';
  font-weight: bold;
  font-size: 50px;
}

h3 {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
  font-family: 'Gustavo';
  font-weight: bold;
  ;
  font-size: 25px;
}

h4 {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
  font-family: 'Gustavo';
  font-weight: bold;
  ;
  font-size: 25px;
}

a {
  text-decoration: none;
  color: #251515;
  cursor: pointer;
}

a:hover {
  color: #f8a02e;
}

.container {
  height: 100vh;
  overflow: hidden;
  position: relative;
}



.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 20vh;
  align-items: center;
  margin: 0 4vw 0 4vw;
  position:absolute;
  width: 100%;
  z-index: -1;
  top: 0;
}

.header p {
  font-family: 'Gustavo';
  font-weight: bold;
  ;
  font-size: 100px;
}

.headerbox {
  width: 33%;
  height: 10vh;
  background-color: black;
  border-radius: 25px;
}

.intro {
  height: calc(100% - 70px);
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  padding: 20vh 0 0 4vw;
  z-index: 10;
  position: relative;
}


.slide {
  width: 550px;
  min-width: 550px;
  height: 550px;
  flex-shrink: 0;
  margin-right: 2vw;
  background-color: black;
  border-radius: 25px;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slideempty {
  width: 650px;
  min-width: 550px;
  height: 550px;
  flex-shrink: 0;
  margin-right: 4vw;
  background-color: white;
  border-radius: 25px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  text-align: left;
  font-family: 'roboto';
  font-size: 22px;
  flex-direction: column;
}

.slideemptyul {
  display: flex;
  flex-direction: row;
  text-align: left;
  font-family: 'roboto';
  font-size: 25px;
  width: 100%;
  justify-content: flex-start;
}

.slideemptyul2 {
    font-size: 22px;
}


.slideactivator {
  opacity:0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;
  border-radius: 25px;
}

.slideactivator:hover {
  opacity: 0.2;
  transition-duration: 0.2s;
}

.slideactivator:hover + .description{
  opacity: 1.5;
  transition-duration: 0.2s;
}

.slidep {
  background-color: white;
  color: #251515;
  cursor: auto;
}

.slide img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  border-radius: 25px;
  position: absolute;
}

.description {
  color: white;
  font-family: 'Gustavo';
  font-weight: bold;
  ;
  position:absolute;
  bottom: 10%;
  text-align: center;
  padding: 0 0 5vh 0;
  font-size: 300%;
  opacity: 0;
  pointer-events:none;
}



.page {
 height: 200vh;
 background-color: grey;
 position: absolute;
 width: 100%
}

.p2 {
}

.popup {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  overflow: auto;
  transition: background-color 0.5s ease-in-out;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  cursor: pointer;
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 4em;
  cursor: pointer;
  z-index: 1000;
}

.close1 {
  position: absolute;
  top: -4vh;
  right: -4vh;
  font-size: 4em;
  cursor: pointer;
  z-index: 10000;
}

.popupcode {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  height: 100vh;
  z-index: 10000;
  overflow: auto;
  transition: background-color 0.5s ease-in-out;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}


.popup-content {

  left: -100%;
  top: 50%;
  transform: translateY(-50%);
  margin: 5vh;
  background-color: white;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  position: relative;
  padding: 6vh;
  height: auto;
  border-radius: 10px;
  top: 0;
  transform: none;
  z-index: 100;
  flex-direction: column;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  cursor: auto;

  }

  .popup-content-code {
    margin: 0 8vh 8vh 8vh;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
  }

.popup.slide-in, .popup-content.slide-in {
  animation-name: popupSlideIn;
}

.popup.slide-out, .popup-content.slide-out {
  animation-name: popupSlideOut;
}

@keyframes popupSlideIn {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@keyframes popupSlideOut {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
.vidcontent {
  display: ;
  height: 200vh;
}


.popup-content h1{
  font-size: 100px;
  text-align: center;
}


.popup-content p{
  font-family: 'roboto';
  font-size: 25px;
  text-align: justify;
}

.popup-content img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.imagecon1 {
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  max-width: 100vw;
  position: relative;
  padding: 6vh 0 0 0;
}


.imagecon1 img {
  height: 45%;
  width: 45%;
  object-fit: contain;
  position: relative;
  justify-content: center;
}

.imagecon1 video {
  height: 50%;
  width: 35%;
  object-fit: contain;
  position: relative;
  justify-content: center;
}

.imagecon2  {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.imagecon2 video {
  width: 30%;
}

.imagecon2 img {
  height: 100%;
  width: 30%;
  object-fit:

}

.scroll-bound {
	height: 200vh;

	}

  .content {
		width: 100%;
		position: sticky;
		top:20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
}


  .content h1 {
    font-family: 'Gustavo';
    font-size: 100px;
    font-weight: bold;
    ;
  }

	.content video {
		width: 80%;
	}
}

.videosticky {

}

.p8 {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.p8 h1 {
  font-family: 'Gustavo';
  font-size: 300%;
  font-weight: bold;
}



.p8 p {

}

.p8 video {
  height: 80%;
  width: 80%;
}

.phototriple {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: auto;
  padding: 6vh 0 6vh 0;
}

.phototriple img {
    height: 30%;
    width: 32%;
    object-fit: contain;
    position: relative;
    justify-content: center;
}

.phototriple video {
    height: 30%;
    width: 32%;
    object-fit: contain;
    position: relative;
    justify-content: center;
}

.photodouble {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: auto;
  align-items: center;

}

.photodouble img {

    height: 30%;
    width: 48%;
    object-fit: contain;
    position: relative;
    justify-content: center;
}

.photodouble video {
    height: 30%;
    width: 32%;
    object-fit: contain;
    position: relative;
    justify-content: center;
}


.videosticky video {
  position: -webkit-sticky;
  top: 20;
  width: 100%;
  height: auto;
}

.content1 {
  height: 100vh;
}

.oscilloscope {
  padding: 6vh 0 6vh 0;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.oscilloscopepics {
  display: grid;
  grid-template-columns: 0.5fr 0.2fr 1.5fr;
  max-width: 100%;
}

.opressurepics {
  display: grid;
  grid-template-columns: 1fr 0.2fr 1fr;
  max-width: 100%;
}

.opressurepics1 {
  display: flex;
  justify-content: center;
}

.opressurepics1 img {
  height: 75%;
  width: 75%;
  object-fit: contain;
}

.oscilloscope img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.oscilloscope p {

}

.alterintro {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.alterintro video {
  padding: 6vh 0 6vh 0;
  height: 60%;
  width: 64%;
}

.closeCodePopup {
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.closeCodePopup:hover {
  color: #5CC6DD;
}

.popupalter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.djpressure {
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}

.pdouble {
  justify-content: space-around;
}

.codelink:hover {
  color: #5CC6DD;
}

.closepopupbutton {
  cursor: pointer;
}


.closepopupbutton:hover {
  color: #5CC6DD;
}

.socials {
  margin: 6vh 0 6vh 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
}


#loading-spinner {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


.spinner {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.v5 {
  display: none;
}

.arrow {
  display: none;
}

.mobile {
  display: none;
}

.desktop {
  display: block;
}



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

    .mobile {
      display: block;
    }

    .desktop {
      display: none;
    }


  .header {
    justify-content: flex-start;
  }

  .header p {
    font-size: 400%;
    margin-right: 5vw;

  }

  .arrow {
    display: block;
    margin-right: 4vw;
    position: absolute;
    z-index: 1;
    right: 0;
    top:-1vh;
  }

  .arrow p {
    color: #dd0051;
    font-size: 500% !important;
    font-weight: bold;
  }

  .slideempty {
    font-size: 100%;
    width: 95vw;
    min-width: 95vw;
  }

  .slideemptyul {
    font-size: 100%;
  }

  .slideempty p {
  }

  .slide {
    width: 95vw;
    min-width: 95vw;
    height: 95vw;
    min-height: 95vw;
  }

  .slide img {
        object-fit: contain;
  }

  .popup-content {
    margin: 1vh;
    padding:2vh;
    max-width: 88vw;
  }

  .popup-content h3 {
    text-align: center;
  }

  .popup-content p{
    font-size: 100%;
    padding: 3vh 0 3vh 0 !important;
  }

  .popup-content h1 {
    font-size: 350% !important;
  }

  .imagecon1 {
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  .imagecon1 img {
    height: 100%;
    width: 100%;
    padding: 3vh 0 0 0;
  }

  .imagecon2 {
    flex-direction: column;
    align-items: center;
  }

  .imagecon2 img {
    height: 100%;
    width: 100%;
  }

  .imagecon2 video {
    height: 100%;
    width: 100%;
    padding: 0 0 3vh 0;
  }

  .phototriple {
    flex-direction: column;
    align-items: center;
    padding: 3vh 0 0 0;
  }

  .phototriple img {
    height: 100%;
    width: 100%;
    padding: 0 0 3vh 0;
  }

  .phototriple video {
    height: 100%;
    width: 100%;
    padding: 0 0 3vh 0;
  }

  .content video {
    width:100%;
    height: 100%;
    padding: 6vh 0 6vh 0;
  }

  .p8 video{
    width:100%;
    height: 100%;
  }

  .photodouble {
    flex-direction: column;
    align-items: center;
  }

  .photodouble img {
    height: 100%;
    width: 100%;
    padding: 0 0 3vh 0;
  }

  .photodouble video {
    height: 100%;
    width: 100%;
    padding: 0 0 3vh 0;
  }

  .description {
    bottom: -45%;
    opacity: 100%;
    color: black;
    padding: 0;
  }

  .description1 {
    bottom: -16% !important;
  }

  .alterintro video {
    padding: 0;
    height: 100%;
    width: 100%;
  }

  .oscilloscopepics {
    display: block;
    grid-template-rows: none;
    max-width: 100%;
  }

  .oscilloscopepicsp {
    display: none;
  }

  .oscilloscopepicsarcade {
    height: 50% !important;
    width: 50% !important;
  }

  .opressurepics {
    display: block;
  }

  .otherstuff h2 {
    font-size: 40px;
  }

  .close1 {
    top: -2vh;
    right:-2vh;
  }

  .socials {
    margin: 6vh 0 16vh 0;
  }

  .v0 {
    display: none;
  }

  .v5 {
    display: block;
  }

  .maze {
    display: none;
  }

  .arave {
    display: none;
  }

  .inamaze {
    display: none;
  }

  .scroll-bound {
    height: auto;
  }

  .description {
    bottom: -28%;
    font-size: 250%;
  }

  .opressurepics1 img {
    height: 100%;
    width: 100%;
  }

  .popup-content-code {
    align-items:flex-start;
    margin-bottom: 20vh;
  }
}