/****************
 * COLORS
 ****************/
.btn-orange,
.orange {
    background-color: var(--orange);
}

.btn-darkorange,
.darkorange {
    background-color: #FF8C00;
}

.btn-navy,
.navy {
    background-color: #01295c;
}

.btn-cyan,
.cyan {
    background-color: #5fc9f8;
}

.btn-yellow,
.yellow {
    background-color: #fbbc05;
}

.btn-darkviolet,
.darkviolet {
    background-color: #9400D3;
}

.btn-gold,
.gold {
    background-color: #FFD700;
}
 
.btn-purple,
.purple {
    background-color: #B10DC9;
}
 
.btn-pink,
.pink {
    background-color: #E83E8C;
}

.btn-indingo,
.indingo {
    background-color: #6610F2;
}

.btn-lightgray,
.lightgray {
    background-color: #8C959D;
}


/****************
 * MAIN
 ****************/

/* this is the only way to get bg to extend to bottom on large screens AND extend to bottom (instead of repeat) on small screens when there's scroll */
html, body {
  min-height: 100%;
}
body {
  /* so the underlined words dont touch the edge */
  /* padding: 5px 10px; */
  /* font: 28px 'Quattrocento Sans', sans-serif; */
  font: 'Quattrocento Sans', sans-serif;
  line-height: 2.3em;
  /* fallback for <=ie9 */
  background: #000000;
/*  background: linear-gradient(45deg, #E4984A, #BB4269); */
/*  background: linear-gradient(150deg, #444444, #000000); */
  
}
body, a {
  color: #FFFFFF;
}
a.semplice {
  text-decoration: none; 
  color: orange;
}
a.marco {
  text-decoration: underline; 
  position: relative;
}
/* underline */
a.marco:after {
  content: "";
  background: white;
  position: absolute;
  bottom: 0.2em;
  left: 0.5em;
  right: 0.5em;
  height: 1px;
}
/* hover */
a:hover {
  text-decoration: none; 
  color: orange; 
}
a.semplice:hover {
  text-decoration: none; 
  color: orange; 
}
a.marco:hover {
  color: orange;
  text-decoration: underline; 
}
a.marco:hover:after {
  text-decoration: underline; 
}
.word, a.marco {
  /* float: left; */
}
.word {
  font-size: 0.9em;
  margin-right: 2em;
}
span {
  display: inline-block;
  text-align: center;
  width: 2em;
}
.hide {
  opacity: 0;
}





/****************
 * ANIMATIONS
 ****************/

.spin {
	animation: spin 1s ease-out;
}
@keyframes spin {
  50% {
    color: red;
    transform: rotateY(180deg);
  }
}

.rotate.angle1 {
  transform: rotate(32deg);
}
.animate.angle1 {
  animation: align1 0.8s linear;
}
@keyframes align1 {
  0% {
    transform: rotate(32deg);
  }
  100% {
    transform: rotate(0);
  }
}

.rotate.angle2 {
  transform: rotate(77deg);
}
.animate.angle2 {
  animation: align2 0.8s linear;
}
@keyframes align2 {
  0% {
    transform: rotate(77deg);
  }
  100% {
    transform: rotate(0);
  }
}

.rotate.angle3 {
  transform: rotate(146deg);
}
.animate.angle3 {
  animation: align3 0.8s linear;
}
@keyframes align3 {
  0% {
    transform: rotate(146deg);
  }
  100% {
    transform: rotate(0);
  }
}

.rotate.angle4 {
  transform: rotate(-32deg);
}
.animate.angle4 {
  animation: align4 0.8s linear;
}
@keyframes align4 {
  0% {
    transform: rotate(-32deg);
  }
  100% {
    transform: rotate(0);
  }
}

.rotate.angle5 {
  transform: rotate(-77deg);
}
.animate.angle5 {
  animation: align5 0.8s linear;
}
@keyframes align5 {
  0% {
    transform: rotate(-77deg);
  }
  100% {
    transform: rotate(0);
  }
}

.rotate.angle6 {
  transform: rotate(-146deg);
}
.animate.angle6 {
  animation: align6 0.8s linear;
}
@keyframes align6 {
  0% {
    transform: rotate(-146deg);
  }
  100% {
    transform: rotate(0);
  }
}



/****************
 * MOBILE
 ****************/
@media only screen and (max-device-width: 480px) {
  body {
    /* tweaked to get the "previously," bit on one line */
    font-size: 0.7em;
    /* bigger to make the links more clickable - to pass Google's PageSpeed insights */
    line-height: 3em;
  }
}