body {
margin: 120px auto; max-width: 800px;
    background-color: rgb(238, 163, 136);}
p {font-size: 30px;}
.highlight {font-weight:600;
    font-size:25px;
    color:rgb(255, 128, 0);
 }

.highlight:hover {color: rgb(246, 244, 241); transition-duration: 500ms;}

.background{ text-align: center;
     padding-bottom: 50px;
    background-color: rgb(238, 163, 136);
    margin: 20px auto;
    width: 80%;}

h1 {font-size: 20px;
    color: rgb(57, 30, 2); animation-name:slideDown;
    animation-duration: 4s;
}
@keyframes slideDown {
    from {transform: translateY(-500px);}
    to {transform: translateY(0);}

   }
.poem {font-size: 20px !important;
  background-color: rgba(241, 218, 181, 0.2);
    padding: 5px;
    border-radius: 10px;
    color: rgb(228, 99, 7);   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

   }
.hidden { display: none; }

a {color:rgb(226, 114, 1);
    
    font-weight: bold;
}

.submit {padding: 5px 40px;
    border-radius: 5px;
    border: none;
    font-size: 25px;
    background-color:white;
    color: rgb(255, 128, 0);
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
transition: transform 0.2s;}

.submit:hover { box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
      background-color: rgb(255, 128, 0);
  color: white;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.8);
  transform: translateY(-5px);}

.topic { padding: 5px 5px;
    border-radius: 5px;
    border: none;
    font-size: 25px;
    background-color:white;
    color: rgb(255, 128, 0);}
    span {
display:inline-block;
font-size: 100px;
color: rgba(241, 218, 181, 0.2);
}
small {font-style:italic;
    color: rgba(0,0,0, 0.5);
    bottom:20px;
    position: relative;
   }

.T1{
transform: translate(20px, 85px) rotate(-30deg);
}

.h {
transform: translate(13px, 60px) rotate(-25deg);
}

.i1 {
transform: translate(6px, 40px) rotate(-20deg);
}

.n {
transform: translate(3px, 23px) rotate(-15deg);
}

.k {
transform: translate(2px, 14px) rotate(-10deg);
}

.P{
transform: translate(1px, 8px) rotate(-5deg);
}

.o{
transform: translate(0px, 5px) rotate(0deg);
}

.s{
transform: translate(-1px, 8px) rotate(5deg);
}

.i2{
transform: translate(-2px, 14px) rotate(10deg);
}

.t {
transform: translate(-3px, 25px) rotate(15deg);
}

.i3{
transform: translate(-6px, 40px) rotate(20deg);
}

.v {
transform: translate(-14px, 60px) rotate(25deg);
}

.e {
transform: translate(-20px, 80px) rotate(30deg);
}

.generating {
animation: blink 1s step-start 0s infinite;
}
@keyframes blink {50% {opacity: 0.0;}}