@import url(https://fonts.googleapis.com/css?family=Press+Start+2P:regular);
@import url(https://fonts.googleapis.com/css?family=Cause:100,200,300,regular,500,600,700,800,900);
@import url("https://fonts.googleapis.com/css?family=Lato:300");
:root {
  --electric-border-color: #dd8448;
  --electric-light-color: oklch(from var(--electric-border-color) l c h);
  --gradient-color: oklch(
    from var(--electric-border-color) 0.3 calc(c / 2) h / 0.4
  );
  --color-neutral-900: oklch(0.185 0 0);
}


.container {
    display: flex;
    justify-content: center;
    align-items: center;     
    gap: 10px;               
    max-width: 1000px;
    margin: 0 auto;          
}

.button h2 {
    color: #ffffff;
    font-size: 60px;
    margin: 0;
    font-family: 'Press Start 2P', cursive;
}
#catImg {
    margin-top: 20px;
    margin-bottom: 100px;
    width: 350px;
    height: 350px;
    object-fit: cover;
    object-fit: cover; 
    --shadow-color: rgb(224, 206, 133);
    box-shadow: 
        0 0 10px 4px var(--shadow-color),   
        0 0 30px 12px var(--shadow-color), 
        0 0 70px 25px var(--shadow-color); 
    opacity: 1;
    transition: opacity 0.2s ease-in-out ;
}
#achiv{
    --achiv-color: rgb(224, 206, 133);
    color: var(--achiv-color);
    font-family: 'Press Start 2P', cursive;
    font-size: 35px;
    margin-top: 0px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 2px var(--name-color);
}
#catName {
    --name-color: rgb(224, 206, 133);
    color: var(--name-color);
    font-family: 'Press Start 2P', cursive;
    font-size: 50px;
    margin: 0;
    margin-top:-70px;
    margin-bottom: 60px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--name-color);
}
body {
    margin: 0;
    padding: 0;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: #000;
    font-family: sans-serif;
}
.button {
    margin-top:-125px;
    width: 100px;
    height: 100px;
    padding: 20px 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
#catInfo{
    white-space: pre-line;/*pt \n */
    --text-color: rgb(224, 206, 133);
    color: var(--text-color);
    font-family: 'Cause', regular;
    --fontSize:30px;
    font-size:var(--fontSize);
    margin-top: 7px;
    text-align: center;
}
 #no-button {
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    position: absolute;
    left: 60%;
    top: 65vh;
    transition: top 0.15s ease-out, left 0.15s ease-out;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #222;
}
#yes-button{
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    position: absolute;
    left: 30%;
    top: 65vh;
}
/*copy-pasted off interner*/
.gradient-border {
  --border-width: 7px;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 100px;
  font-family: 'Press Start 2P', cursive;
  font-size: 2rem;
  text-transform: uppercase;
  color: white;
  background: #222;
  border-radius: 10px;

  &::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(
      60deg,
      hsl(224, 85%, 66%),
      hsl(269, 85%, 66%),
      hsl(314, 85%, 66%),
      hsl(359, 85%, 66%),
      hsl(44, 85%, 66%),
      hsl(89, 85%, 66%),
      hsl(134, 85%, 66%),
      hsl(179, 85%, 66%)
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: 10px;
    animation: moveGradient 4s alternate infinite;
  }
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}

/*more code from the internet for typewriting*/


.typewriter h1 {
  color: #fff;
  font-size: 60px;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid purple; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3s steps(25, end),
    blink-caret .7s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: purple }
}