@import url('https://fonts.googleapis.com/css?family=Pacifico');

body {
  font-family: 'Pacifico', cursive;
  margin: 0;
  padding: 0;
  color: #cdcdcd;
  background-color: rgb(221, 225, 225)
  
  }

a{
  text-decoration: none;
  color: white;
  
  transition: color 0.3s ease;
  }

a:hover{
  color: tomato;
  }

#menuToggle{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
  }

#menuToggle input{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0;
  z-index: 2;
  
  -webkit-touch-callout: none;
  }

#menuToggle span{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #797979;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
  }

#menuToggle span:first-child{
  transform-origin: 0% 0%;
  }

#menuToggle span:nth-last-child(2){
  transform-origin: 0% 100%;
  }

#menuToggle input:checked ~ span{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
  }

#menuToggle input:checked ~ span:nth-last-child(3){
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
  }

#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
  }

#menu{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: #6e6e6e;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }

#menu li{
  padding: 10px 0;
  font-size: 22px;
  }

#menuToggle input:checked ~ ul {
  transform: none;
  }

  #imagem {
    width: 70vw;
    height: auto;
    margin-top: 10vh;
    margin-left: 15vw;
    }
    
    #texto {
    margin-left: 40vw;
    margin-top: -20vh;
    font-size: 10vh;
    color: black;
    
    }
  
    .spin {
      cursor: pointer;
      transform-style: preserve-3d;
    }
    .spin:hover {
        animation: spin 5s linear infinite;
    }
    @keyframes spin {
      0% {
        transform: rotateY(0deg);
      }
      100% {
        transform: rotateY(360deg);
      }
    }

    .box-2 {
      transform: translateY(5%);
    }

    #alfred {
      height: 80vh;
      width: auto;
      margin-top: 50vh;
      margin-left: 25vw;
    }
    p {
      margin: 0 auto;
      width: 100vh;
      padding: 20px;
      color: black;
      font-size: 3vh;
      margin-top: 20vh;
    }

    video {
      height: 80vh;
      width: auto;
      margin-left: 25vw;
      margin-top:40vh;
    }

.spin {
  cursor: pointer;
  transform-style: preserve-3d;
}
.spin:hover {
    animation: spin 5s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.box-2 {
  transform: scale(1.25);
}