/***********************************************************\
Colors and fonts
\***********************************************************/

:root {
    --black: black;
    --white: white;
    --textcolor: white;
    --logored: #882b2f;
    --bgshape-1: #990000;
    --bgshape-2: #660000;
    --bgtext: #1A1A1A;
    --highlight: #00A19A;
    --lowlight: #909090;
    --shadowcolorsolid: black;
    --shadowcoloralpha: rgba(0,0,0,0.6);
    --badge: #909090;
    --dropshadow: drop-shadow(0.75rem 0.75rem 0.2rem var(--shadowcoloralpha));
    --shortdropshadow: drop-shadow(0.5rem 0.5rem 0.2rem var(--shadowcoloralpha));
    --logosize: max( 15rem, 20vw  );
    --shadowglow: drop-shadow(0 0 0.4rem var(--shadowcolorsolid));
}


@font-face {
    font-family: 'CourierPrime';
    src: url('fonts/CourierPrime-Regular.woff2') format('woff2'),
         url('fonts/CourierPrime-Regular.woff') format('woff'),
         url('fonts/CourierPrime-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'CourierPrime';
    src: url('fonts/CourierPrime-Italic.woff2') format('woff2'),
         url('fonts/CourierPrime-Italic.woff') format('woff'),
         url('fonts/CourierPrime-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}


@font-face {
    font-family: 'CourierPrime';
    src: url('fonts/CourierPrime-Bold.woff2') format('woff2'),
         url('fonts/CourierPrime-Bold.woff') format('woff'),
         url('fonts/CourierPrime-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: 'CourierPrime';
    src: url('fonts/CourierPrime-BoldItalic.woff2') format('woff2'),
         url('fonts/CourierPrime-BoldItalic.woff') format('woff'),
         url('fonts/CourierPrime-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}


@font-face {
    font-family: 'BankGothic';
    src: url('fonts/BankGothic.woff2') format('woff2'),
         url('fonts/BankGothic.woff') format('woff'),
         url('fonts/BankGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*
mail-alt: 
music: 
wrench: 
pencil: 
videocam-alt: 
video: 
comedy-tragedy: 
bomb: 
*/

@font-face {
    font-family: 'SCPBadges';
    src: url('fonts/scpbadges01.woff2') format('woff2'),
         url('fonts/scpbadges01.woff') format('woff'),
         url('fonts/scpbadges01.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@media only screen and (min-width: 800px) { 
    html {
        font-size: 16px;
    }    

    section.spy .content .img-wrap {
        margin: 1rem;
    }
    
    :root {
        --iwidth: 8rem;
        --iheight: 10rem;
    }
}

@media only screen and (max-width: 799.9px) and (min-width: 600px)  { 
    html {
        font-size: calc(100vw / 50);
    }
    
    section.spy .content .img-wrap {
        margin: 0.8rem;
    }

    :root {
        --iwidth: 7.2rem;
        --iheight: 9rem;
    }
}

@media only screen and (max-width: 599.9px)  { 
    html {
        font-size: 12px;
    }

    section.spy .content .img-wrap {
        margin: 0.6rem;
    }

    :root {
        --iwidth: 6.4rem;
        --iheight: 8rem;
    }
}

/***********************************************************\
Universal stylings
\***********************************************************/

em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

html {
    background: var(--black);
    color: var(--textcolor);
    padding: 0;
    line-height: 1.1em;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'CourierPrime';
    overflow-x: hidden;
    width: 100vw;
    position: absolute;
    top:0;
    left:0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'BankGothic';
}

section, div, img {
    box-sizing:border-box;
}

a, a:visited {
    color: var(--highlight);
    text-decoration: none;
    text-shadow: 0 0 0.3rem var(--shadowcolorsolid);
}

a:hover {
    color: (var(--textcolor));
    text-shadow: 0 0 0.3rem var(--highlight);
}

/***********************************************************\
Background 
\***********************************************************/

#fixedbackground {
    background-image: url(./img/worldmap-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1000;
    /*opacity:0.85;*/
}

#parallaxbackground {
    background-image: url(./img/sophocles.png);
    background-size: cover;
    background-position: 0 0;
    background-attachment: fixed;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -500;
    opacity:0.65;
    mix-blend-mode: screen;
}


main {
    margin: 0 auto;
    width: 90vw;
    max-width: 1024px;
    padding-bottom: 3rem;
}

/***********************************************************\
Titling
\***********************************************************/

#grandheader {
    padding-top:2rem;
}

#grandheader .bg-wrap {
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: calc( var(--logosize) + 1rem );
}

#grandheader .bg-wrap .bg {
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}


#grandheader .bg-wrap.fore {
    z-index: -5;
    filter: drop-shadow(0 -0.75rem 0.2rem var(--shadowcoloralpha));
}

#grandheader .bg-wrap.fore .bg {
    background: var(--bgtext);
    clip-path: polygon(47% 0%, 53% 0%, 100% 90%, 100% 100%, 50% 90%, 0% 100%, 0% 90%);
}

#grandheader .bg-wrap.back {
    z-index: -10;
    filter: var(--dropshadow)
}

#grandheader .bg-wrap.back .bg {
    background: var(--bgshape-1);
    clip-path: polygon(47% 0%, 53% 0%, 100% 65%, 100% 100%, 50% 80%, 0% 100%, 0% 65%);
}

#grandheader h1 {
    background: url(img/SCPLogo.border.svg) no-repeat;
    background-size: var(--logosize) var(--logosize);
    height: var(--logosize);
    width: var(--logosize);
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0;
    display: block;
    margin:0 auto;
    z-index: 100;
    filter: var(--dropshadow)
}

.title-wrap {
    filter: var(--dropshadow)
}

.title-wrap h2 {
    background: var(--bgtext);
    padding: 1.5rem 0;
    margin: 0;
    font-size: 2.5rem;
    text-align: center;
    text-shadow: 0 0 6px var(--highlight);
    clip-path: polygon(0% 0%, 49% 16%, 99% 0%, 100% 100%, 51% 84%, 1% 100%);
}

/***********************************************************\
Sections
\***********************************************************/

section.spy {
    position: relative;
    display: block;
    top:0;
    left:0;
    width:100%;
    margin:1rem 0 4rem;
}

section.spy .content {
    background: var(--bgtext);
    position: relative;
    display: flex;
    align-items: center;
    top:0;
    width:calc(100%);
    padding:1.65rem 0.5rem 1.15rem 0.5rem;
}


section.spy .content-wrap {
    position: relative;
    display: flex;
    align-items: center;
    top:1rem;
    width:calc(100% - 2rem);
    filter: var(--dropshadow);
}
section.spy .content .img-wrap > img {
    max-width:50%;
    display: flex;
    color: black;
    object-fit: cover;
    filter: grayscale(80%);
    height: var(--iheight);
    width: var(--iwidth);
    min-width: var(--iwidth);            
}

section.spy .content .img-wrap {
    display: flex;
    color: black;
    filter: drop-shadow(0.1rem 0.1rem 0 var(--textcolor))
            drop-shadow(0.1rem -0.1rem 0 var(--textcolor))
            drop-shadow(-0.1rem 0.1rem 0 var(--textcolor))
            drop-shadow(-0.1rem -0.1rem 0 var(--textcolor))
            var(--shortdropshadow);
    height: var(--iheight);
    width: var(--iwidth);
    min-width: var(--iwidth);            
}

section.spy .content .text {
    flex-grow:1;
    margin: 1rem;
}

section.spy .content .text h3 {
    font-size:1.5rem;
    text-shadow: 0 0 6px var(--highlight);
    margin: 0 0 0.5rem;
}

section.spy .content .links {
    display: block;
}

section.spy .content .links div {
    display: inline-block;
    max-width: 70%;
}

section.spy .content .links a {
    background: var(--highlight);
    display: inline-block;
    font-size: 0.8rem;
    color: var(--textcolor);
    font-family: 'BankGothic';
    text-transform: uppercase;    
    text-shadow: -1px -1px 1px var(--shadowcolorsolid), 1px 1px 1px var(--shadowcolorsolid);
    margin: 0 0.3rem;
    padding: 0 0.5rem;
    border-radius: 1rem;
    white-space: nowrap;
}


section.spy .content .links a:hover {
    background: var(--bgshape-1);
    filter: var(--shadowglow);
    /*text-shadow: -1px -1px 1px var(--logored), 1px 1px 1px var(--logored);*/
}

/*
a, a:visited {
    color: var(--highlight);
    text-decoration: none;
    text-shadow: 0 0 0.3rem var(--shadowcolorsolid);
}

a:hover {
    color: (var(--textcolor));
    text-shadow: 0 0 0.3rem var(--highlight);
}
*/

section.spy .bg {
    position: absolute;
    display: block;
    top:0;
    width:100%;
    height:calc(100%);
    padding-top: 2.4rem;    
}

section.spy .bg-wrap {     
    position: absolute;
    display: block;
    top:0;
    width:100%;
    height:calc(100% + 2rem);
    filter: var(--dropshadow);
}

section.spy .bg figure {
    font-family: 'SCPBadges';
    display: block;
    height: 3rem;
    width: 3rem;
    clear: both;
    margin: 0.5rem 0.5rem;
    padding: 0;
    text-align: center;
    font-size: 2rem;
    line-height: 3rem;
    mask: no-repeat center;
    mask-size: 98% 98%;
    mask-image: url(./img/badge.svg);
    background: no-repeat center;
    background-size: 102% 102%;
    background-image: url(./img/badge.svg);
    cursor: default;
}

section.spy .bg figure b {
    font-weight: normal;
    color: var(--badge);    
    mix-blend-mode: screen;
}

section.spy:nth-of-type(2n+1) .content {
    clip-path: polygon(0% 0%, 100% 8%, 100% 92%, 0% 100%); 
    left:-1rem;
    flex-direction: row;    
}

section.spy:nth-of-type(2n) .content {
    clip-path: polygon(0% 8%, 100% 0%, 100% 100%, 0% 92%); 
    right:-3rem;
    flex-direction: row-reverse;
}

section.spy:nth-of-type(2n+1) .bg {
    background: var(--bgshape-1);
    clip-path: polygon(0% 2.5%, 100% 0%, 100% 100%, 0% 97.5%); /* left -5% */
    left:1rem;
}

section.spy:nth-of-type(2n) .bg {
    background: var(--bgshape-2);
    clip-path: polygon(0% 0%, 100% 2.5%, 100% 97.5%, 0% 100%); /* right -5% */
    right:1rem;
}

section.spy:nth-of-type(2n+1) .bg figure {
    float: right;
}

section.spy:nth-of-type(2n) .bg figure {
    float: left;
}

section.spy:nth-of-type(2n+1) .content .img-wrap > img {
    clip-path: polygon(0% 3%, 100% 0%, 100% 100%, 0% 97%); /* left -6% */
}

section.spy:nth-of-type(2n) .content .img-wrap > img {
    clip-path: polygon(0% 0%, 100% 3%, 100% 97%, 0% 100%); /* right -6% */
}

section.spy:nth-of-type(2n) .content .links {
    text-align: right;
}

section.spy:nth-of-type(2n+1) .content .links {
    text-align: left;
}

/***********************************************************\
Footer
\***********************************************************/

footer {
    position: fixed;
    left:0;
    bottom:0;
    z-index: 200;
    background: var(--bgtext);
    height: 3rem;
    width: 100%;
    font-size: 0.85rem;
    font-family: 'BankGothic';
    filter: drop-shadow(0 -0.5rem 0.2rem var(--shadowcoloralpha));
}

footer ul {
    list-style: none;
    margin:0 auto;
    padding:0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

footer ul li {
    display: flex;
    padding:0;
    margin: 0.2rem 2.25rem;
}

footer div.copyright {
    font-size: 0.75rem;
    color: var(--lowlight);
    text-align: center;
}

/***********************************************************\
Anti-spam
\***********************************************************/

/*  <i class="i"></i><i class="n"><i class="f"><i class="o"></i><i class="swirly"></i> */

#lemuel { cursor: pointer; }
#lemuel i { font-style: normal; }
#lemuel i.i:before { content: "i"; }
#lemuel i.n:before { content: "n"; }
#lemuel i.f:before { content: "f"; }
#lemuel i.o:before { content: "o"; }
#lemuel i.swirly:before { content: "@"; }
#lemuel i.ad1999:before { content: ".com"; }

/***********************************************************\
Easter egg
\***********************************************************/

:root {
    --tfgold: #AAAA00;
    --tfgoldalpha: #DDDD00DD;
    --sqrt3: 1.73205;
    --tfw: 3rem;
    --tfh: calc( var(--tfw) * var(--sqrt3) / 2);
    
}

.tf {
    position: absolute;
    top:calc( (var(--iheight) / 2) - var(--tfh));
    left:calc( (var(--iwidth) / 2) - var(--tfw));
    display: block;
    width: calc(var(--tfw) * 2);
    height: calc(var(--tfh) * 2);
    z-index: 1000;
    filter: drop-shadow(0 0 0.4rem var(--shadowcolorsolid));
}

.tf div {
    filter: drop-shadow(0 0 0.2rem var(--tfgoldalpha));
}

.tf div div {
    width: var(--tfw);
    height: var(--tfh);
    -webkit-mask-image: url('img/trianglehollow.svg');
    -webkit-mask-size: cover;
    mask-image: url('img/trianglehollow.svg');
    mask-size: cover;
    background: var(--tfgold);
    animation: golden alternate-reverse 2s infinite;
    position: absolute;
    top:0;
    left:0;
    display: block;
}

.tf div:nth-of-type(1) div { left:calc(var(--tfw)/2); top:0; }
.tf div:nth-of-type(2) div { left:0; top:var(--tfh); }
.tf div:nth-of-type(3) div { left:var(--tfw); top:var(--tfh); }
.chris .tf div:nth-of-type(1) div { mask-image: url('img/triangle.svg'); -webkit-mask-image: url('img/triangle.svg'); background: #C00; animation: power alternate 2s infinite; }
.chris .tf div:nth-of-type(1) { filter: drop-shadow(0 0 0.4rem #F66); }
.annette .tf div:nth-of-type(2) div { mask-image: url('img/triangle.svg'); -webkit-mask-image: url('img/triangle.svg'); background: #06F; animation: wisdom alternate 2s infinite; }
.annette .tf div:nth-of-type(2) { filter: drop-shadow(0 0 0.4rem #6AF); }
.abbey .tf div:nth-of-type(3) div { mask-image: url('img/triangle.svg'); -webkit-mask-image: url('img/triangle.svg'); background: #0A0; animation: courage alternate 2s infinite; }
.abbey .tf div:nth-of-type(3) { filter: drop-shadow(0 0 0.4rem #6F6); }

@keyframes power { from { background-color: #C00; } to { background-color: #F88; } }
@keyframes wisdom { from { background-color: #06F; } to { background-color: #69F; } }
@keyframes courage { from { background-color: #0A0; } to { background-color: #6F6; } }
@keyframes golden { from { background-color: #AA0; } to { background-color: #FF6; } }