
main {
  justify-content: center;
}

#stretchy * {
  color:white;
  display: inline-block;
  transform-origin: center;
  will-change: transform;
  cursor: default;
  font-size:min(13vw,10rem);
  /* border:1px solid red; */
}



/* .dot {
  width:2px;
  height:2px;
  position: fixed;
  top:0;
  left:0;
  background-color:lime;
} */


/* #all {
  display: flex;
  flex-direction: column;
  align-items: center;
}


#title,
.bigtext {
  font-size: 40px;
  color: white;
}

#title {
  font-size: 60px;
}




.boxformat {
  font-size: 20px;
  color: red;
  text-decoration: none;
  margin: 10px 20px;
  border-radius: 10px;
  overflow: hidden;
  width: 150px;
  height: 150px;
  box-shadow: 0 0 3px 3px rgb(43, 43, 43);
  transition: transform 100ms ease-in-out;
}

.boxformat:hover {
  transform: scale(1.03);
}

#tools {
  margin-top: 100px;
}

#icongrid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.smallerbox {
  width: 125px;
  height: 50px;
  text-align: center;
  color: white;
  background: grey;
  display: flex;
  align-items: center;
  justify-content: center;
}



#videocontainer {
  margin-top: 20px;
  width: 400px;
  height: calc(9/16*400px);

}

iframe {
  width: 100%;
  height: 100%;
}


.photogroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  animation: 7.5s infinite linear photo-rotate;
}

.photox {
  z-index: -1;
  animation: x 1.5s linear infinite alternate;
}

.photoy {
  animation: y 1s linear infinite alternate;
}

.photox,
.photoy {
  position: absolute;
  left: 0;
  top: 0;
}

.photox h1,
.photox h3 {
  margin-top: 0;
  margin-bottom: 0;
}

#other_photox {
  animation-delay: -1s;
  animation-duration: 2s;
}

#other_photoy {
  animation-delay: -1s;
  animation-duration: 1.7s;
}

#other_group {
  animation-duration: 5s;
}

@keyframes x {
  100% {
    transform: translateX(calc(100vw - 450px));
  }
}

@keyframes y {
  100% {
    transform: translateY(calc(100vh - 450px));
  }
}

@keyframes photo-rotate {
  0% {
    transform: rotateZ(0) rotatex(0);
  }

  100% {
    transform: rotateZ(360deg) rotatex(360deg);
  }
}


#secretlink {
  position: fixed;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  borderdisabled: 1px solid black;
  cursor: default;
} */