body {
  font-family: "Fira Code", monospace;
  background-color: black;
  color: white;
}

pre {
  font-family: "Fira Code", monospace !important;
}

button {
  font-family: "Fira Code", monospace;
  background-color: #f9008e;
  color: white;
  border: 0;
  padding: 10px;
  font-size: 15px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 8px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.transformDiv {
  font-family: "Fira Code", monospace;
  background-color: #f9008e;
  color: white;
  border: 0;
  padding: 10px;
  font-size: 13px;
  border-radius: 5px;
  font-weight: bold;
  box-shadow: 8px 10px 15px -3px rgba(0, 0, 0, 0.1);
  max-width: 46%;
}

button:active {
  background-color: #af0264;
}

.linksSection {
  display: flex;
  flex-direction: column;
}

a {
  color: #f9008e;
}

a:visited {
  color: #ff91d0;
}

.flexContainer {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.animationContainer {
  background-color: white;
  color: black;
  margin: 0.5em 0;
  padding: 10px;
  border-radius: 5px;
}

.buttonsContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
}

.transformElement {
  transition: all 1s linear;
}

.buttonColor {
  background-color: #f9008e;
}
.buttonColor:hover {
  background-color: #00a940;
}

.buttonBorder {
  border: solid black 0;
}
.buttonBorder:hover {
  border-radius: 50%;
  border: solid black 5px;
}

.buttonScale:hover {
  transform: scale(1.5);
}

.buttonTransform:hover {
  transform: translate(-20px, 20px);
}

.buttonMultiTransform:hover {
  background-color: #00a940;
  transform: scale(2) translate(10px, 20px) rotate3d(0, 1, 0.5, 3.142rad);
}

.buttonVisibility:hover {
  opacity: 0;
}

.multiTransformElement {
  transition: background-color, transform;
  transition-duration: 1s, 0.5s;
  transition-delay: 500ms, 1s;
  transition-timing-function: ease-out, ease-in;
}

.buttonFlip:hover {
  transform: rotateY(180deg) rotateX(180deg);
}

.buttonBasicTransform {
  transition: all;
  transition-duration: 3s;
  transform: translateX(0);
}

.moveDiv {
  transform: translateX(100%);
  background-color: #00a940;
}

.timingLinear {
  transition-timing-function: linear;
}

.timingEaseOut {
  transition-timing-function: ease-out;
}

.timingEase {
  transition-timing-function: ease;
}

.timingEaseInOut {
  transition-timing-function: ease-in-out;
}

.timingStepStart {
  transition-timing-function: step-start;
}

.timingStepEnd {
  transition-timing-function: step-end;
}

.timingStepsStart {
  transition-timing-function: steps(5, start);
}
.timingStepsEnd {
  transition-timing-function: steps(5, end);
}
.timingSteps {
  transition-timing-function: steps(5);
}
.timingBeizer {
  transition-timing-function: cubic-bezier(0, 1.49, 0.34, -1.59);
}

.timingEaseIn {
  transition-timing-function: ease-in;
}

.animationButton1 {
  width: 200px;
  height: 200px;
  animation: basicAnimation 1s ease-out alternate infinite;
  transition: all 1s ease-out;
}
.animationButton2 {
  width: 200px;
  height: 200px;
  animation: basicAnimation 1s ease-out infinite;
  transition: all 1s ease-out;
}
.animationButton3 {
  width: 200px;
  height: 200px;
  animation: basicAnimation 1s ease-out alternate-reverse infinite;
  transition: all 1s ease-out;
}
.animationButton4 {
  width: 200px;
  height: 200px;
  animation: basicAnimation 1s ease-out reverse infinite;
  transition: all 1s ease-out;
}
.animationButton5 {
  width: 200px;
  height: 200px;
  animation: basicAnimation 1s ease-out forwards;
  transition: all 1s ease-out;
}
.animationButton6 {
  width: 200px;
  height: 200px;
  animation: basicAnimation 2s ease-out reverse;
  transition: all 2s ease-out;
}

.animationButton7 {
  width: 200px;
  height: 200px;
  transition: all 0.5s ease-out;
}
.animationButton8 {
  animation: basicAnimation 2s ease-out infinite alternate;
}
.animationButton9 {
  animation-delay: 2s;
}
.animationButton7:hover {
  border-radius: 30%;
  background-color: #00a940;
}

.animationButton10 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation: multiStepAnimation 5s ease-out infinite;
}

.animationButton11 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation: borderAnimation 2500ms ease-out alternate infinite,
    rotateAnimation 5s linear forwards,
    colorAnimation 1.1s ease-in alternate-reverse infinite;
  animation-delay: 0s, 1s, 0s;
}

@keyframes borderAnimation {
  0% {
    border-radius: 0%;
  }
  100% {
    border-radius: 100%;
  }
}
@keyframes rotateAnimation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(150deg);
  }
}
@keyframes colorAnimation {
  0% {
    background-color: #f9008e;
  }
  100% {
    background-color: #00a940;
  }
}

@keyframes multiStepAnimation {
  0% {
    transform: scale(1) translate(0) rotate(0);
    background-color: green;
  }
  20% {
    transform: scale(1.2) translate(20px, 30px) rotate(90deg);
    background-color: blue;
    color: white;
  }
  40%,
  50% {
    transform: scale(0.5) translate(60px) rotate(-90deg);
    background-color: yellow;
    color: black;
  }
  65% {
    transform: scale(0.5) translate(-150px) rotate(-90deg);
    background-color: red;
    color: white;
  }
  90% {
    transform: scale(0.5) translate(-150px) rotate(-190deg);
    background-color: purple;
  }
  100% {
    transform: scale(1) translate(0) rotate(0);
    background-color: green;
  }
}

@keyframes basicAnimation {
  0% {
    border-radius: 0%;
  }
  100% {
    border-radius: 50%;
    background-color: #00a940;
  }
}

.ravenImage {
}

.ravenBase {
  width: 100%;
  position: relative;
}

.ravenSecondary {
  width: calc(100% - 20px);
  position: absolute;
  opacity: 0;
}

.ravenClean {
  animation: fadeInClean 8s ease-out forwards infinite;
  animation-delay: 2s;
}

.ravenColor {
  animation: fadeInColor 4s ease-out alternate infinite;
  opacity: 0;
  animation-delay: 2s;
}

@keyframes fadeInClean {
  0% {
    opacity: 0;
  }
  20%,
  40% {
    opacity: 1;
  }
  40%,
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeInColor {
  0%,
  20% {
    opacity: 1;
    clip-path: circle(0% at 33% 35%);
    filter: invert(1);
  }
  40%,
  100% {
    clip-path: circle(100% at 35% 35%);
    filter: invert(0);
    opacity: 1;
  }
}

/* circle transition day night */
.circleContainer {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #99ebee;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: rgba(0, 64, 148, 0.35) 0px 5px 15px;
  transition: all 1s ease-out;
}

.circleContainer > img {
  position: absolute;
  transition: all 1s ease-out;
}

.sun {
  fill: #fbff1b;
  width: 60px;
  animation: rotateSun 10s linear infinite;
  filter: drop-shadow(rgba(0, 0, 0, 0.35) 0px 0px 5px);
  top: 20px;
  left: 50px;
}
.moon {
  width: 40px;
  transform: translate(220px, 150px);
}
.cloud {
  filter: drop-shadow(rgba(0, 0, 0, 0.35) 0px 0px 5px);
  width: 60px;
  transform: translate(90px, 50px);
}
.stars {
  width: 250%;
  animation: rotateSun 10s linear infinite;
  opacity: 0;
  transform-origin: 100px 100px;
}

.mountains {
  width: 100%;
  transform: translate(0px, 70px);
  filter: contrast(1);
}
.circleContainer:hover {
  background-color: #160a36;
  box-shadow: rgba(57, 26, 170, 0.35) 0px 5px 15px;
}
.circleContainer:hover > .stars {
  opacity: 1;
}
.circleContainer:hover > .sun {
  top: 220px;
  left: 80px;
}

.circleContainer:hover > .mountains {
  filter: contrast(0.5);
}

.circleContainer:hover > .cloud {
  transform: translate(200px, 50px);
}

.circleContainer:hover > .moon {
  transform: translate(90px, 40px);
}

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

/* --- */

@media (max-width: 1080px) {
  .flexContainer {
    flex-direction: column;
  }
}

@media (min-width: 1080px) {
  .flexContainer > div,
  .flexContainer > pre {
    width: 50%;
  }
}