body {
    background-color: #ff9f32 !important;
    color: white;
    font: 1.3rem Inconsolata, monospace;
    text-shadow: 0 0 5px #C8C8C8;
    
}

.dente_even {
    stroke-linejoin: round;
    stroke: #2B3E50;
    stroke-linecap: round;
    fill: #008080;
}
.dente_odd {
    stroke-linejoin: round;
    stroke: #2B3E50;
    stroke-linecap: round;
    fill: #ffcc00;
}
.dente_even {
    -webkit-animation: even 3s infinite;
    -moz-animation: even 3s infinite;
    -o-animation: even 3s infinite;
    animation: even 3s infinite;
}
@keyframes even {
    0% {
      fill: #008080;
    }
    25% {
      fill: #ffcc00;
    }
    50% {
      fill: #008080;
    }
    75% {
      fill: #ffcc00;
    }
    100% {
      fill: #008080;
    }
}
.dente_odd {
    -webkit-animation: odd 3s infinite;
    -moz-animation: odd 3s infinite;
    -o-animation: odd 3s infinite;
    animation: odd 3s infinite;
}
@keyframes odd {
    0% {
      fill: #ffcc00;
    }
    25% {
      fill: #008080;
    }
    50% {
      fill: #ffcc00;
    }
    75% {
      fill: #008080;
    }
    100% {
      fill: #ffcc00;
    }
}

@keyframes rotate  {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
}

@keyframes rotateReverse  {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
}

#piede1{
    transform-origin: center center;
    transform-box: fill-box;
    animation: rotate 4s infinite 0s linear reverse; 
}

#piede2{
    transform-origin: center center;
    transform-box: fill-box;
    animation: rotate 4s infinite 0.8s linear reverse;
}

#piede3{
    transform-origin: center center;
    transform-box: fill-box;
    animation: rotate 4s infinite 0.8s linear;
}

#piede4{
    transform-origin: center center;
    transform-box: fill-box;
    animation: rotate 4s infinite 0.8s linear;
}

#occhio_dx{
    transform-origin: center center;
    transform-box: fill-box;
    animation: rotate 8s infinite 0.8s linear reverse;
}

.me:hover {
    animation: bounce 2.8s;
}

#testa {
  animation: testa 3s infinite;
}

#bocca {
  animation: bocca 1s infinite;
}


@keyframes testa {
  0% {
    transform: translateY(-6px);
  }
  25%,
  50% {
    transform: translateY(-3px);
  }
  75%,
  100% {
    transform: translateY(0);
  }
}

@keyframes bocca {
  0% {
    transform: translateY(+8px);
  }
  25%,
  50% {
    transform: translateY(+4px);
  }
  75%,
  100% {
    transform: translateY(0);
  }
}

#heart {
  animation: heartbit 1s infinite;
}

@keyframes heartbit {
  0%,
  25%,
  50%,
  75%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes bounce {
    0%,
    25%,
    50%,
    75%,
    100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-12px);
    }
    60% {
      transform: translateY(-6px);
    }
  }

#robot {
    -webkit-animation: mover 3s infinite  alternate;
    animation: mover 3s infinite  alternate;
}

@-webkit-keyframes mover {
    0% { transform: translateX(20px); }
    100% { transform: translateX(-20px); }
}

@keyframes mover {
    0% { transform: translateX(20px); }
    100% { transform: translateX(-20px); }
}

#blk_2 img:hover {
	transform:translate(0,-50px);
}

#messages {

    --animation: terminal-blink;
    --color: #aaa;
    --background: #000;
    font-size: 16px;
}

.main-wrapper {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.section-wrapper {
  height: 100vh;  
}

.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  scroll-snap-align: center;
}

.me {
  border-radius: 50%;
}

.me-span {
  color: white;
  font: 1.1rem Inconsolata, monospace;
  margin-top: 2%;

}

.profile {
  background-color: #2B3E50;
}


/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 5 breakpoints
*/
 
/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
 
 
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  

 
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  

 
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

    #messages {
        font-size: 20px;
        min-height: 40px;
    }
    .me-span {
      font: 1.5rem Inconsolata, monospace;
    
    }
 
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  

    #messages {
        font-size: 22px;
    }
    
}
 
/* Extra extra large devices (extra large desktops, 1400px and up) */
@media (min-width: 1400px) {  

    #messages {
        font-size: 24px;
    }
    
}
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/
 
/* Set width to make card deck cards 100% width */
@media (max-width: 950px) { 
 
}



@media (max-height: 400px) {
    .img-fluid {
      max-height: 80% !important;
    }

}