body {
  font-size: 20px;
  text-align: center;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.loader {
  border: 16px solid #6d6d6dc4; /* Light grey */
  border-top: 16px solid #4f2580; /* purple */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  right: 1%;
  bottom: 1%;
  position: fixed;
}

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

.fade-in-image {
  animation: fadeIn 1.5S;
  -webkit-animation: fadeIn 1.5S;
  -moz-animation: fadeIn 1.5S;
  -o-animation: fadeIn 1.5S;
  -ms-animation: fadeIn 1.5S;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fade-out-image {
  animation: fadeOut 1.5S;
  -webkit-animation: fadeOut 1.5S;
  -moz-animation: fadeOut 1.5S;
  -o-animation: fadeOut 1.5S;
  -ms-animation: fadeOut 1.5S;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}