@font-face {
    font-family: 'Satisfy';
    src: url('./assets/satisfy-regular-webfont.woff2') format('woff2'),
         url('./assets/satisfy-regular-webfont.woff') format('woff'),
         url('./assets/Satisfy-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --asb_skyblue: #99D5E9;
    --asb_seablue: #17495A;
    --asb_red: #AB2D37;
    --asb_gold: #FDDA5E;
    --asb_yellow: #FEECBF;
    --asb_cloudspread-a: -0.2vw;
    --asb_cloudspread-b: -1.2vw;
    --asb_cloudspread-c: -0.6vw;
    --asb_cloudspread-i: 0.2rem;
    --asb_cloudspread-j: 0.7rem;
    --asb_cloudspread-k: 1.3rem;
    --sin000: 0.000; --sin015: 0.259; --sin030: 0.500; --sin045: 0.707;
    --sin060: 0.866; --sin075: 0.966; --sin090: 1.000; --sin105: 0.966;
    --sin120: 0.866; --sin135: 0.707; --sin150: 0.500; --sin165: 0.259;
    --sin180: 0.000; --sin195: -0.259; --sin210: -0.500; --sin225: -0.707;
    --sin240: -0.866; --sin255: -0.966; --sin270: -1.000; --sin285: -0.966;
    --sin300: -0.866; --sin315: -0.707; --sin330: -0.500; --sin345: -0.259;
    --cos000: 1.000; --cos015: 0.966; --cos030: 0.866; --cos045: 0.707;
    --cos060: 0.500; --cos075: 0.259; --cos090: 0.000; --cos105: -0.259;
    --cos120: -0.500; --cos135: -0.707; --cos150: -0.866; --cos165: -0.966;
    --cos180: -1.000; --cos195: -0.966; --cos210: -0.866; --cos225: -0.707;
    --cos240: -0.500; --cos255: -0.259; --cos270: 0.000; --cos285: 0.259;
    --cos300: 0.500; --cos315: 0.707; --cos330: 0.866; --cos345: 0.966;
    --asb_titleradius: 12rem;
}

html {
    background: black;
    color: white;
    font-family: serif;
    padding:0;
    margin:0;
    height:100%;
    font-size:1vmin;
}

body {
    padding:0;
    margin:0;
    position:relative;
    width:100%;
    height:100%;
    z-index: 1;
    background: url('./assets/bookbg.jpg') no-repeat center;
    background-size: cover;
}

div.fairy {
    padding:0;
    margin:0;
    position: absolute;
    left:0;
    top:0;
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 2px;
    box-shadow: 0 0 10px 6px hsl(0, 100%, 60%);
    mix-blend-mode: screen;
    z-index:20;
}

div.fairyglow {
    padding:0;
    margin:0;
    position: absolute;
    left:0;
    top:0;
    width: 0px;
    height: 0px;
    background: none;
    border-radius: 2px;
    box-shadow: 0 0 10px 6px hsl(0, 100%, 60%);
    mix-blend-mode: screen;
    display: block;
    opacity: 0;
    z-index: 2;
}

p {
    margin:0;
    padding:0;
}

#linkcol {
    width:100%;
    height:100%;
    display:flex;
    gap: 4rem;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    position:relative;
}

a.link-container {
    width: 64rem;
    height: 32rem;
    background: #FCF;
    border-radius: 6rem;
    display:block;
    z-index: 200;
    box-shadow: 0.5rem 0.5rem 0.7rem 1rem #00000080;
    position:relative;
}

a.link-container::before { /* CRT effect modified from https://aleclownes.com/2017/02/01/crt-display.html */
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    opacity: 0.3;
    width: 64rem;
    height: 32rem;
}

a.link-container:hover {
}

a.link-container:hover::before { 
  opacity: 0.1;
}

a.link-container h2 {
    font-size: 6rem;
    position: absolute;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-100%);
}

#scp-link-container {
    background: url('./assets/scp.jpg') no-repeat center;
    background-size: cover;
}

#scp-link-container h2 {
    opacity: 0;
}

/*****************************\
  AbbeyStBrendan.com
\*****************************/

#asb-link-container {
    background: var(--asb_skyblue);
}

#asb-title-outer {
    padding: 4rem 0;
    position: relative;
}

#asb-title-outer h2 {
    font-family: "Satisfy";
    font-size: 6rem;
    position: absolute;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-100%);
    color: var(--asb_red);
    text-shadow: var(--asb_seablue) 0.4rem 0.4rem 0.5rem;
    white-space: nowrap;
}

#asb-title-shape {
    width: calc( 2 * var(--asb_titleradius) );
    height: calc( 2 * var(--asb_titleradius) );
    background: white;
    position: relative;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    transform: scaleX(2.1);
}

#asb-title-shape span:nth-child(1) {
    opacity: 1.0;
    animation-duration: 107s;
}

#asb-title-shape span:nth-child(2) {
    opacity: 0.7;
    animation-duration: 97s;
}

#asb-title-shape span:nth-child(3) {
    animation-duration: 79s;
    animation-direction: reverse;
    opacity: 0.7;
}

#asb-title-shape span:nth-child(4) {
    animation-duration: 67s;
}

#asb-title-shape span:nth-child(5) {
    animation-duration: 59s;
    animation-direction: reverse;
}

#asb-title-shape span:nth-child(6) {
    opacity: 0.25;
    animation-duration: 47s;
}

#asb-title-shape span:nth-child(7) {
    animation-duration: 41s;
    animation-direction: reverse;
    opacity: 0.25;
}

#asb-title-shape span {
    width: 3rem;
    height: 3rem;
    position: absolute;
    background: none;
    color: white;
    display: block;
    left: calc(var(--asb_titleradius) - 1.5rem);
    top: calc(var(--asb_titleradius) - 1.5rem);
    animation: 8s normal asbtitlespin infinite linear;
    opacity: 0.45;
    animation-delay: -12s;
    border-radius: 50%;
    box-shadow:
            calc( var(--asb_titleradius) * var(--cos000 ) ) calc( var(--asb_titleradius) * var(--sin000 ) ) 0 var(--asb_cloudspread-i),
            calc( var(--asb_titleradius) * var(--cos015 ) ) calc( var(--asb_titleradius) * var(--sin015 ) ) 0 var(--asb_cloudspread-j),
            calc( var(--asb_titleradius) * var(--cos030 ) ) calc( var(--asb_titleradius) * var(--sin030 ) ) 0 var(--asb_cloudspread-i),
            calc( var(--asb_titleradius) * var(--cos045 ) ) calc( var(--asb_titleradius) * var(--sin045 ) ) 0 var(--asb_cloudspread-k),
            calc( var(--asb_titleradius) * var(--cos060 ) ) calc( var(--asb_titleradius) * var(--sin060 ) ) 0 var(--asb_cloudspread-j),
            calc( var(--asb_titleradius) * var(--cos075 ) ) calc( var(--asb_titleradius) * var(--sin075 ) ) 0 0.0vw,
            calc( var(--asb_titleradius) * var(--cos090 ) ) calc( var(--asb_titleradius) * var(--sin090 ) ) 0 var(--asb_cloudspread-i),
            calc( var(--asb_titleradius) * var(--cos105 ) ) calc( var(--asb_titleradius) * var(--sin105 ) ) 0 var(--asb_cloudspread-j),
            calc( var(--asb_titleradius) * var(--cos120 ) ) calc( var(--asb_titleradius) * var(--sin120 ) ) 0 var(--asb_cloudspread-i),
            calc( var(--asb_titleradius) * var(--cos135 ) ) calc( var(--asb_titleradius) * var(--sin135 ) ) 0 var(--asb_cloudspread-k),
            calc( var(--asb_titleradius) * var(--cos150 ) ) calc( var(--asb_titleradius) * var(--sin150 ) ) 0 var(--asb_cloudspread-j),
            calc( var(--asb_titleradius) * var(--cos165 ) ) calc( var(--asb_titleradius) * var(--sin165 ) ) 0 0.0vw,
            calc( var(--asb_titleradius) * var(--cos180 ) ) calc( var(--asb_titleradius) * var(--sin180 ) ) 0 var(--asb_cloudspread-i),
            calc( var(--asb_titleradius) * var(--cos195 ) ) calc( var(--asb_titleradius) * var(--sin195 ) ) 0 var(--asb_cloudspread-j),
            calc( var(--asb_titleradius) * var(--cos210 ) ) calc( var(--asb_titleradius) * var(--sin210 ) ) 0 var(--asb_cloudspread-i),
            calc( var(--asb_titleradius) * var(--cos225 ) ) calc( var(--asb_titleradius) * var(--sin225 ) ) 0 var(--asb_cloudspread-k),
            calc( var(--asb_titleradius) * var(--cos240 ) ) calc( var(--asb_titleradius) * var(--sin240 ) ) 0 var(--asb_cloudspread-j),
            calc( var(--asb_titleradius) * var(--cos255 ) ) calc( var(--asb_titleradius) * var(--sin255 ) ) 0 0.0vw,
            calc( var(--asb_titleradius) * var(--cos270 ) ) calc( var(--asb_titleradius) * var(--sin270 ) ) 0 var(--asb_cloudspread-i),
            calc( var(--asb_titleradius) * var(--cos285 ) ) calc( var(--asb_titleradius) * var(--sin285 ) ) 0 var(--asb_cloudspread-j),
            calc( var(--asb_titleradius) * var(--cos300 ) ) calc( var(--asb_titleradius) * var(--sin300 ) ) 0 var(--asb_cloudspread-i),
            calc( var(--asb_titleradius) * var(--cos315 ) ) calc( var(--asb_titleradius) * var(--sin315 ) ) 0 var(--asb_cloudspread-k),
            calc( var(--asb_titleradius) * var(--cos330 ) ) calc( var(--asb_titleradius) * var(--sin330 ) ) 0 var(--asb_cloudspread-j),
            calc( var(--asb_titleradius) * var(--cos345 ) ) calc( var(--asb_titleradius) * var(--sin345 ) ) 0 0.0vw
        ;
}

@keyframes asbtitlespin {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}