.syne-wide {
  font-family: "Syne", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: bold;
}

.syne-reg {
  font-family: "Syne", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.bitcount-ink-guh {
  font-family: "Bitcount Ink", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0,
    "SZP1" 0,
    "SZP2" 0,
    "XPN1" 0,
    "XPN2" 0,
    "YPN1" 0,
    "YPN2" 0;
}

body{
    margin: 0;
    background: #111;
    font-family: monospace;
}

h1 {
    margin: 30px 30px;
    padding: 15px 40px;
    border: 5px solid transparent;
    border-radius: 10px;
    font-size: 70px;
    color: white;
    text-align: center;

    /* rainbow border */
    background-image: linear-gradient(#111, #111), 
                    linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: rainbow_border 3s ease-in-out infinite;
    background-size: 200% 100%;
}

h4{
    margin: 10px 10px;
    color: #339593;
    text-align: center;
    font-size: 30px;
}

@keyframes rainbow_border {
    0%, 100% {
    background-position: 0 0, 0 0;
    }
    50% {
    background-position: 0 0, 100% 0;
    }
}

.button-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.side-button {
    float: left;
    width: 45%;
    margin-top: 30px;
    height: 150px;
    margin-left: 2%;
    margin-right: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 5px solid transparent;
    border-radius: 10px;
    font-size: 64px;
    line-height: 1;
    cursor: pointer;
    overflow: hidden;

    background-image: linear-gradient(#8fee12, #8fee12), 
                      linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 400% 100%; /* more visible animation */
    animation: rainbow_border 3s ease-in-out infinite;

    transition: all 0.2s ease;
}

.side-button span.stretch {
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Hover effect expands button vertically */
.side-button:hover {
    height: 560px;
}

.side-button:hover span.stretch {
    transform: scale(1, 4);
}

a{
    text-decoration: none;
    color:#6666ff;
}