@font-face {
    font-family: 'everyday-ample';
    src: url('../fonts/everyday_ample.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'everyday-ample';
    src: url('../fonts/everyday_ample_black.ttf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'everyday-ample';
    src: url('../fonts/everyday_ample_black.ttf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@keyframes colourCycle {
  0%   { background-color: #7073F6; }
  16%  { background-color: #E9685F; }
  33%  { background-color: #F06DD8; }
  50%  { background-color: #88D57E; }
  66%  { background-color: #6DF3C7; }
  83%  { background-color: #C0F0A1; }
  100%  { background-color: #F3F2BB; }
}

.block{
    text-align: center;
    margin: auto;
    padding: 1px;
    color: black;

    background-color: #b6b8fd;
    box-shadow: 12px 12px 0px 1px black;

    margin-top: 24px;
    margin-bottom: 24px;
}

.title{
    animation-name: colourCycle; 
    animation-duration: .1s; 
    animation-timing-function: steps(1, end);
    animation-iteration-count: 2;

    text-align: center;
    color: rgb(255, 255, 255);
    line-height: 0.8;
    font-size: 150%;

    background-color: rgb(110, 114, 251);
    box-shadow: 12px 12px 0px 1px rgb(0, 0, 0);

    padding-top: 1px;
    padding-bottom: 1px;
    margin-bottom: 20px;
}

a:link, a:visited {
    color: #0b24fb;
}
a:hover {
    color: #001d66;
    transition: color 0.3s ease;
}

body{
    font-family: 'everyday-ample', Arial, sans-serif;
    margin: 40px auto;
    max-width: 650px;
    line-height: 1.6;
    font-size: 18px;
    padding: 0 10px;
    background-color: #484855;
    color: white;
}

footer{
    text-align: center;
    font-size: 14px;
    color: rgb(200, 200, 200);
    justify-content: center;
    display: flex;
}
.credits{
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 10px;
    color: gray;
    gap: 4px;
}