:root {
  --background-color: rgb(10, 10, 10);  
  --bugatti-color: rgb(101, 27, 219);

  --gradient-puple-rgb: 101, 27, 219;
  --gradient-blue-rgb: 127, 117, 237;
  --gradient-violet-rgb: 171, 111, 218;
  
  --highlight-blue-rgb: 45, 37, 143;

  --dark: rgb(20, 20, 20);
  --yellow: rgb(253, 216, 53);
  --blue: rgb(98, 0, 234);
  
  --c1: rgb(108, 54, 139);
  --c2: rgb(42, 105, 157);
  
  --left-color: var(--c1);
  --right-color: var(--c2);
}

body{
  background-color: var(--background-color);
  display: flex;
  height: 100vh;
  margin: 0px;
  overflow: hidden;
  padding: 0px;
  width: 100vw;
}

.absolute-centered {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.jakarta-sans-font {
  font-family: "Plus Jakarta Sans", sans-serif;
}

.zen-dots-font {
  font-family: "Zen Dots", cursive;
}

.rubik-font {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
}

#restart-button {
  backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px;
  bottom: 10px;
  color: white;
  cursor: pointer;
  font-size: 0.9em;
  left: 50%;
  outline: none;
  padding: 10px 20px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 100;
}

#restart-button:hover,
#restart-button:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

#website-button {
  backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px;
  bottom: 10px;
  color: white;
  cursor: pointer;
  font-size: 0.9em;
  left: 38%;
  outline: none;
  padding: 10px 20px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 100;
  text-decoration: none;
}

#website-button:hover,
#website-button:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

#code-button {
  backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px;
  bottom: 10px;
  color: white;
  cursor: pointer;
  font-size: 0.9em;
  left: 63%;
  outline: none;
  padding: 10px 20px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 100;
  text-decoration: none;
}

#code-button:hover,
#code-button:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

#green-filter {
  background: radial-gradient(rgba(var(--gradient-puple-rgb), 0.05), rgba(var(--gradient-puple-rgb), 0.4) 80%);
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 1;
}

.gradient {
  filter: blur(3em);
  height: 80px;
  left: -5%;
  position: absolute;
  width: 110%;
}

#top-gradient {
  background: linear-gradient(
    to right, 
    rgba(var(--gradient-blue-rgb), 0.75) 0% 10%,  
    transparent 10% 20%,
    rgba(var(--gradient-violet-rgb), 0.5) 20% 50%, 
    rgba(var(--gradient-blue-rgb), 0.5) 50% 70%, 
    rgba(var(--gradient-puple-rgb), 0.75) 70%
  );
  top: -50px;
}

#bottom-gradient {
  background: linear-gradient(
    to right, 
    rgba(var(--gradient-blue-rgb), 0.75) 0% 10%,  
    transparent 10% 30%,
    rgba(var(--gradient-blue-rgb), 0.5) 30% 50%, 
    transparent 50% 70%,
    rgba(var(--gradient-violet-rgb), 0.5) 70% 80%, 
    transparent 80%
  );
  bottom: -50px;
}

#logo-wrapper {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

#logo {
  opacity: 0;
  position: relative;
  z-index: 2;
}

#logo-border {
  background-color: var(--bugatti-color);
  border-radius: 2.25em;
  height: 160%;
  width: 140%;
  z-index: 1;
}
  
#logo-border-inner {
  background-color: var(--background-color);
  border-radius: 2em;
  height: calc(160% - 0.5em);
  width: calc(140% - 0.5em);
  z-index: 2;
}

#logo-text {
  position: relative;
  z-index: 3;
}

#namias-text {
  color: var(--bugatti-color);
  font-size: 8em;
  height: 120px;
  line-height: 120px;
}

#originals-text {
  color: white;
  font-size: 3em;
  letter-spacing: 0.12em;
}
    
@keyframes bounce {
  from, 3.33%, 8.83%, 16.66% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  6.66%, 7.16% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.1);
  }

  11.66% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -7px, 0) scaleY(1.05);
  }

  13.33% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  15% {
    transform: translate3d(0, -2px, 0) scaleY(1.02);
  }
}

@media(max-width: 800px) {
  #logo-wrapper {
    transform: scale(0.7);
  }
}

@media(max-width: 600px) {  
  #website-button {
    left: auto;
    right: 10px;
    transform: none;
  }
  #restart-button {
    left: auto;
    right: 10px;
    transform: none;
  }
  #code-button {
    left: auto;
    right: 10px;
    transform: none;
  }
}

.main {
  display: grid;
  margin: 0% 0 0 -100%;
  z-index: 1;
  opacity: 1;
}

.side {
  display: grid;
  height: 100vh;
  overflow: hidden;
  place-items: center;
  position: absolute;
  width: 100%;
}

.side .title {
  font-family: "Rubik", sans-serif;
  font-size: 6vw;
  margin: 0px 10vw;
  width: 80vw;
}

.side .fancy {
  font-family: "Lobster", cursive;
  font-size: 1.3em;
  line-height: 0.8em;
}

#left-side {
  background-color: var(--left-color);
  background-image: url("../img/darkchoco.png");
  z-index: 2;
  background-size: cover;
  animation: fadeIn 6.45s ease-in-out;
}

#left-side .title {  
  color: white;  
}

#left-side .fancy {
  color: var(--right-color);
}

#left-side img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

#right-side {
  background-color: var(--right-color);
  background-image: url("../img/goldiron.png");
  background-size: cover;
  animation: fadeIn 6.45s ease-in-out;
}

#right-side .title {
  color: var(--right-color);
}

#right-side .fancy {
  color: white;
}

#right-side img {
  position: absolute;;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

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