@font-face {
    font-family: "SofiaSans";
    src: url('fonts/SofiaSans-Light.woff2') format('woff2');
}

body {
    margin: 0;
    padding: 0;

    background: limegreen;
    font-family: "SofiaSans", sans-serif;

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.strobe {
    overflow: hidden;
    height: 100pt;
}

.strobe-inner {
    display: flex;
    flex-direction: column;
    animation: strobe 12s infinite;
}

.strobe h1.strobe-line {
    margin: 0;

    font-size: 48pt;
    color: lime;
    text-shadow: 2px 2px 2px black;

    height: 100pt;
    line-height: 80pt;
}

.strobe h1.strobe-line > strong {
    font-size: 80pt;
    vertical-align: middle;
    transition: transform 0s;
}

strong.orig {
    display: var(--strobe-orig);
}

strong.spell {
    display: var(--strobe-spell);
}

@property --strobe-orig {
    syntax: "none | inline";
    inherits: true;
    initial-value: inline;
}

@property --strobe-spell {
    syntax: "none | inline";
    inherits: true;
    initial-value: none;
}

@keyframes strobe {
    0%   { transform: translateY(0); --strobe-spell: none; --strobe-orig: inline; }
    18%  { transform: translateY(0); --strobe-spell: inline; --strobe-orig: none; }
    19%  { transform: translateY(0); --strobe-spell: none; --strobe-orig: inline; }
    20%  { transform: translateY(0); }
    25%  { transform: translateY(-100pt); }
    45%  { transform: translateY(-100pt); }
    50%  { transform: translateY(-200pt); }
    74%  { transform: translateY(-200pt); }
    75%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}

.clover {
    z-index: -1;
    position: absolute;
}

.cloverleaf {
    width: 100px;
    height: 100px;
    background-color: forestgreen;
    mask: url(images/clover.svg) no-repeat center / contain;
    --webkit-mask: url(images/clover.svg) no-repeat center / contain;
    animation: spin 8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(360deg); }
    25% { transform: rotate(270deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(90deg); }
    100% { transform: rotate(0deg); }
}

.clover1 {
    top: 20%;
    left: 10%;
    transform: scale(150%) rotate(35deg);
}

.clover2 {
    bottom: 10%;
    right: 10%;
    transform: scale(130%) rotate(23deg);
}

.clover3 {
    top: 50%;
    left: 45%;
    transform: scale(400%) rotate(137deg);
}

.clover4 {
    top: 10%;
    left: 70%;
    transform: scale(90%) rotate(87deg);
}

.clover5 {
    bottom: 20%;
    left: 15%;
    transform: scale(200%) rotate(22deg);
}

.bordered-link {
    display: block;
    border: 3px solid lime;
    color: lime;
    padding: 3px;
    font-size: 20pt;
    box-shadow: 0px 0px 3px black;
    text-shadow: 1px 1px 1px black;
    border-radius: 3px;
    text-underline-offset: 5pt;
    text-decoration: none;
}

.bordered-link:hover, .bordered-link:active {
    text-decoration: underline;
}

.corner-right-bottom {
    position: absolute;
    bottom: 10px;
    right: 10px;
}