body{
background-image: linear-gradient(147deg, #d7d7d7 0%, #353535 74%);
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
}

@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Permanent+Marker&display=swap');
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.text-box{
    display: flex;
    align-items: center;
    justify-content: center;
}
.fire {
  text-align: center;
  color: rgb(255, 115, 0);
  font-size: 5vw;
  outline: none;
  text-shadow:
    0 0 20px crimson,
    0 0 20px crimson,
    0 0 10px crimson,
    5px -10px 10px orange,
    -5px -10px 10px yellow;
  animation: 2s amazing infinite alternate linear;
}

@keyframes amazing {
  0%   { 
    text-shadow: 0 10px 20px crimson, 0 0 20px red,
    0 0 10px orange,
    0 0 10px darkorange,
    -5px -5px 5px yellow,
    10px -10px 10px yellow; 
  }
  25%   { 
    text-shadow: 0 10px 20px crimson, 0 0 20px red,
    0 0 20px orange,
    -5px -5px 5px yellow,
    5px -10px 10px yellow,
    -5px -10px 10px yellow; 
  }
  50%   { 
    text-shadow: 0 10px 20px crimson, 0 0 20px red,
    0 0 10px orange,
    0 0 10px darkorange,
    -5px -5px 5px yellow,
    10px -10px 10px yellow; 
  }
  75%   { 
    text-shadow: 0 10px 20px crimson, 0 0 20px red,
    0 0 20px orange,
    -5px -5px 5px yellow,
    5px -10px 10px yellow,
    -5px -10px 10px yellow; 
  }
  100%   { 
    text-shadow: 0 10px 20px crimson, 0 0 20px red,
    0 0 10px orange,
    0 0 10px darkorange,
    -5px -5px 5px yellow,
    10px -10px 10px yellow; 
  }
}

/* body{
    background-image: url(../images/temple-ancient-greek-gods-goddess-600nw-2352725929.webp);
    background-repeat: no-repeat;
} */



.socrates:hover {animation: shaking 0.4s infinite;}
@keyframes shaking {
   0% {transform: translateX(-10px);}
   20% {transform: translateX(-5px);}
   50% {transform: translateX(-5px);}
   50% {transform: translateY(-30px);}
   70% {transform: translateY(-20px);}
   70% {transform: translateX(-5px);}
   80% {transform: translateX(10px);}
   90% {transform: translateX(-10px);}

}


/* .choice:hover 
{
  background-color: #FF8300;
  color: black;
  -webkit-appearance: button; 
  cursor: pointer;
} */



.podium {
  text-align: center;
}
.podium div {
  width:100px;
  display:inline-block;
}
.top {
  background: yellow;
  height:100px;
}
.left {
  background: rgb(135, 132, 127);
  height:50px;
}
.right {
  height:30px;
  background: rgb(220, 99, 8);
}


button:hover {
  --_p: 100%;
  transition: background-position .4s, background-size 0s;
}
button:active {
  box-shadow: 0 0 9e9q inset #0009; 
  background-color: var(--c);
  color: #fff;
}

button {
  font-family: system-ui, sans-serif;
  font-size: 1.2rem;
  cursor: pointer;
  padding: .1em .6em;
  font-weight: bold;  
  border: none;
}


.animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #ece8e1 0%,
    #e1e109 17%,
    #e66203 34%,
    #e10505 50%,
    #e66203 67%,
    #e1e109 83%,
    #ece8e1 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}


@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");

* {
  padding: 0;
  margin: 0;
}

h1 {
  font-family: "Montserrat Medium";
  max-width: 40ch;
  text-align: center;
  transform: scale(0.5);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}

span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}

span:nth-child(1) {
  animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(2) {
  animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(3) {
  animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(4) {
  animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(5) {
  animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(6) {
  animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(7) {
  animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(8) {
  animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(9) {
  animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(10) {
  animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(11) {
  animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(12) {
  animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(13) {
  animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(14) {
  animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(15) {
  animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(16) {
  animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(17) {
  animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(18) {
  animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.choices{
  size: 100%;
}