@import url("fonts.css");
:root {
    --title-color: black;
    --header-color: #6cb9ec;
    --headerB-color: #d766fa;
    --text-color: #ffe8d2;
    --count-color: rgb(255, 29, 48);
    --secondary-count-color: var(--count-color);
    --padding: 20px;
    --quotecolor: rgb(0, 195, 255);
    --emphasize: #00ffff;
    --emphasizeHighlight: #00ffff;

    --header-alternate: #2c8ccc;

    --text-size: 1em;
    --headerA-size: 2em;

    --signorHeaderColor: #6fd1ff;

    --signcolor: rgb(119, 194, 255);

    --urgentColor: var(--count-color);

    --aColor: rgb(168, 92, 255);
    --aHover: rgb(242, 175, 255);
    --aHoverT: rgb(199, 175, 255);
}
* {
    cursor: url('src/cursor/cur.png'), auto;
}
a, button, p a {
    cursor: pointer !important;
}
html {
    scroll-behavior: smooth;
}
body {
    /* background-color: black; */
    
    background: linear-gradient(
      #000000d3, 
      #000
    ),
    url('img/bg/old-bg.webp');
    background-position-x: left;
    background-position-y: bottom;
    background-size: cover;

    margin: 0 auto;
    padding: 0;

    color: white;

    font-size: var(--text-size);
}

h1, h2, h3, h4 {
    padding: 0 !important;
    margin: 0 !important;

    font-weight: 500;
        text-shadow: 0px 0px 3px var(--header-color);
}
/* .dotabove { 
    border-top: 1px dotted white;
} */
h1 {
    text-align: center;

    font-size: var(--headerA-size);
    font-family: headerfont;
    text-transform: uppercase;

    color: var(--header-color);
}
h2{
    font-size: calc(var(--headerA-size) - 0.3em);
    text-align: center;
    font-family: headerfont;
    text-transform: uppercase;

    color: var(--header-color);
}
h3 {
    font-size: calc(var(--headerA-size) - 0.6em);
    text-align: center;
    font-family: headerfont;
    text-transform: uppercase;

    color: var(--header-color);
}
h4{
    font-size: calc(var(--headerA-size) - 0.6em);
    text-align: center;
    font-family: headerfont;
    text-transform: uppercase;

    color: var(--headerB-color);
    text-shadow: 0px 0px 16px var(--headerB-color);
}

p, ul {
    margin-top: 1%;
    margin-left: 2%;
    margin-right: 2%;
    color: var(--text-color);

    text-shadow: 0px 0px 2px white;

    font-family: fontBody;
}
ul{
    font-family: fontBody;
}
i {
    color: var(--quotecolor);
}
.secondcounterblock {
    background:
    linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ),
    url('https://i.pinimg.com/originals/0e/0d/72/0e0d72395ecbc6682ea8e7276bc6fe06.gif'); 
    background-size: cover;
    background-position-y: center;
}
.secondcounterblock * {
    mix-blend-mode: difference;
}
/* .secondcounterblock h1, .secondcounterblock h2 {
    color: var(--secondary-count-color);
    text-shadow: 0 0 32px var(--secondary-count-color);
} */
emp {
    color: var(--emphasize);
    text-shadow: 0 0 1em var(--emphasize);
    font-family: fontBody;
}

.wideheader {
    background: url("https://i.pinimg.com/originals/0e/0d/72/0e0d72395ecbc6682ea8e7276bc6fe06.gif");
    background-size: cover;
    background-position-y: bottom;
    padding: 0;
    margin: 0;
    font-size: 4em;
}

.title {
    padding: 2em 0em 0em 0;
    text-align: left;
    line-height: 0.8;

    position: relative;
    bottom: -1vh;

    z-index: 0;

    color: var(--title-color);
    text-shadow: 0px 0px 16px var(--title-color);
    font-family: stretch;
}

.separatorbackground {
    background: black;

    z-index: 100;
    position: relative;
}
.separator {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/79/Sal_ammoniac_symbol.svg');
    width: 100%;
    height: 16px;
    filter: invert(1);

    z-index: 100;
    position: relative;
}

.block {
    /* background-color: black; */
    
    position: relative;
    z-index: 100;
    margin: 0 !important;
}
.secondaryblock {
    border-top: 1px dotted white;
    padding-top: 1em;
    background: linear-gradient(rgba(0, 0, 0, 0.658), rgba(0, 0, 0, 0.055))
}
.welcome {
    padding-top: 1em;
}
.whiteFlash {
    animation: colorChange 1s;
}
.whiteFlashSecondary {
    animation: colorChangeUnderCount 0.5s;
}
.bigbuttoncontainer {
    width: 100%;
    background: url('https://i.pinimg.com/736x/73/e1/0b/73e10b05ee4b851cf14c038095facb0f.jpg') no-repeat;
    background-size: cover;
    background-position-y: top;
    border-top: 1px dotted #fff;
    display: flex;
    flex-wrap: wrap;
    filter: contrast(1.3);
}
.bigbutton {
    transition: all 1s ease;
    /* background-color: rgba(75, 13, 13, 0.466); */
    flex: 1 1 45%;
    padding: 0.4em;
    text-align: center;
    text-shadow: 0 0 1em var(--signcolor) !important;
}
/* .bigbutton:hover {
    background-color: rgba(0, 0, 0, 0.753);
} */
.signlink a {
    filter: contrast(1.1);
    text-decoration: none;
    color: var(--signcolor) !important;
    text-shadow: 0px 0px 16px var(--signcolor) !important;
    padding: 0.5em 5em;
    font-family: tsblock;
    font-size: 1.6em;
    mix-blend-mode: hard-light;
    display: inline-block;
    transition: all ease 0.5s;
    
}
a {
    color: var(--aColor);
    text-shadow: 0px 0px 16px var(--aColor);
    transition: all 0.5s;

    font-family: fontBody;
    text-decoration: none;
}
emp > a {
    text-decoration: none !important;    
}
emp > a:hover {
    font-size: 1.2em;
}
a:hover, a:focus, a:active {
    color: var(--aHover);
    text-shadow: 0px 0px 16px var(--aHover);
    transform: scale(1.1);
}
/* a:hover::after {
    position: relative;
    content: "?";
    animation: hoverQuestion 2s ease infinite;
    color: red;
} */

.signlink a:hover {
    /* font-size: 1.8em; */
    filter: contrast(4);
}
.signlink a:active {
    filter: contrast(10);
}

/* Responsive design */
@media screen and (max-width: 1400px) {
    .bigbutton {
        flex: 1 1 100%;
    }
    .counterblock {
        min-width: 90%;
    }
    .classOfficialResponses img { 
        max-width: 90%;
        height: auto !important;
    }
}
h1.signaturecount {
    color: var(--count-color);
    text-shadow: 0px 0px 2vh var(--count-color);
    text-align: center;
    font-size: 5vh;
    font-family: oldheaderfont;
}
h2.signaturesubtitle {
    text-align: center;
    font-size: 3vh;
    color: var(--count-color);
    text-shadow: 0px 0px 1.3vh var(--count-color);
    font-family: terminal;
}
.wideheader {
    padding: 1%;
}
.counterblock {
    padding: 3%;
    border: 1px dotted white;
    width: 50%;
    margin: 0 auto;
    background-color: black;
}

@keyframes colorChange {
    from {
        color: white;
        transform: rotate(10deg);
    } to {
        color:var(--count-color);
        transform: rotate(0deg);
    }
}

@keyframes colorChangeUnderCount {
    from {
        color: white;
        transform: rotate(10deg);
    } to {
        color: var(--secondary-count-color);
        transform: rotate(0deg);
    }
}


@media screen and (max-width: 1000px) {
    .fullwidthmedia {
        width: 100% !important;
    }
    .fullheightmedia {
        width: 50% !important;
        height: auto;
    }
}
.aftersigning {
    background:     linear-gradient(
        rgba(0, 0, 0, 0.7), 
        rgba(0, 0, 0, 0.7)
      ), url('https://i.pinimg.com/736x/eb/8c/fb/eb8cfbe1cda827edc6f0dcb083461784.jpg');
    background-size: cover;
}
.aftersigning div a {
    color: var(--header-color) !important;
    text-shadow: 0 0 1em var(--header-color) !important;
}
.aftersigning div a:active{
    font-size: 2em;
}
.fullwidthmedia {
    width: 50%;
}
.fullheightmedia {
    width: 20%;
}
cite {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.6em;
    margin-left: 5%;
    max-width: 100%;
    overflow-x: hidden;
    display: inline-block;
}
.signblock .infoblock table {
    margin: 0 auto;
}
.signblock .infoblock  {
    text-align: center;
}
#apiForm {
    font-family: fontBody;
}
#apiForm input {
    background-color: rgba(0, 17, 255, 0.308);
    border: 0;
    color: white;
}
#apiForm button {
    color: white;
    background: rgba(17, 10, 77, 0.548);
    border: 1px solid white;
    padding: 1% 5% 1% 5%;
    font-family: stretch;
    text-transform: uppercase;
    font-size: 2em;

    transition: all 0.2s;
}
#apiForm button:hover {
    color: rgb(193, 189, 255);
    background-color: rgb(66, 43, 92);
    border: 1px dotted white;
    padding: 1% 5% 1% 5%;
    font-family: stretch;
    text-transform: uppercase;
    font-size: 2.3em;
    animation: nod 0.7s infinite ease;
}
#apiForm button:active {
    animation: spinout 0.5s infinite ease-in-out;
    transition: all 0.1s ease;
    color: #5525ad;
    background-color: rgb(32, 23, 83);
    font-size: 1.8em;
}
@keyframes nod {
    0% {
        transform: rotate(0deg);
    } 25% {
        transform: rotate(5deg);
    } 75% {
        transform: rotate(-5deg);
    } 100% {
        transform: rotate(0deg);
    }
}
@keyframes spinout {
    0% {
        transform: rotate3d(1,0,0,0deg);
    } 100% {
        transform: rotate3d(1,0,0,360deg);
    }
}
.oursignors {
    padding-top: 1%;
    height: 35em;
    background:
    linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ),
    url('https://i.pinimg.com/736x/11/4e/f1/114ef107bdfef27c6c734e5ab25aeab0.jpg');
    background-size: cover;
    background-position-y: bottom;
}
.oursignors h1 {
    color: var(--signorHeaderColor);
    text-shadow: 0 0 20px var(--signorHeaderColor);
}
#signors {
    height: 32em;
    overflow-y: auto;
}
#signors table {
    width: 100%;
}
#signors th {
    text-align: left;
    font-family: tsblock;
}
#signors td {
    font-family: panton;
}


.twitter {
    width: 4em !important;
    filter: invert(1);

    font-family: fontBody;
    color: black;
    text-shadow: 0px 0px 16px black;

    transition: all 0.5s ease;
}
.twitter:hover, .twitter:active, .twitter:focus {
    transform:scale(1.5);
}
.footer .twitter {
    margin: 0 auto;
}
.twitter svg {
    margin-left: 1em;
}
.factsblock {
    border-bottom: 1px solid white;
    margin-right: 2em;
    margin-bottom: 1em;
}
.graphAPI {
    text-align: center;
}
#twitterEmbedFooter {     
    background: linear-gradient(
      #000000d3, 
      #000
    ),
    url('https://i.pinimg.com/736x/df/5b/80/df5b80030664a16b3420211830d00960.jpg') no-repeat;
    background-size: cover;
    background-position-y: top;
    min-height: 250px;
}
#tweetTemplate {
    font-family: fontBody;
}
#twTitle {
    text-align: right;
    font-family: headerfont;
}
.tweet {
    border: 1px solid white;
    margin: 1em;
    padding: 1em;
}
.tweet img {
    width: 30%;
}
.classOfficialResponses img { 
    margin-top: 1%;
    height: 40%;
    text-align: center;
    border: 1.5px dotted var(--count-color);
}
.classOfficialResponses {
    border: 1px dotted white;
    margin: 2%;
    padding: 1% 2% 2% 2%;
    text-align: center;
}
.classOfficialResponses h3 {
    color: var(--header-alternate);
    text-shadow: 0px 0px 16px var(--header-alternate);
}
#twBody {
    margin-top: 1em;
}
#urgentScroller {
    background: rgba(0, 0, 0, 0.815);
    border-top: 1px dotted var(--urgentColor);
    border-bottom: 1px dotted var(--urgentColor);
}
#urgentBlock {
    font-family: vcr;
    text-shadow: 0px 0px 1.3vh var(--urgentColor);
    font-family: terminal;
    color: var(--urgentColor);
    white-space: nowrap;
}
#urgentBlockInner {
    overflow: hidden;
    display: flex;
}
.underCount {
    color: var(--secondary-count-color);
    text-shadow: 0px 0px 10px var(--secondary-count-color);
}
.expensesTable {
    text-align: center;
}

.expensesTable table {
    display: inline-block;
    font-family: fontBody;
    color: white;
    text-shadow: 0 0 20px white;
    background:     linear-gradient(
        rgba(0, 0, 0, 0.9), 
        rgba(0, 0, 0, 0.9)
      ),
      url('img/aleksandr-popov-ptmxHqdDwZE-unsplash.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 1em;
}

.expensesTable table thead, .expensesTable table caption {
    color: white;
    text-shadow: 0 0 16px white;
}
.expensesTable table tbody tr:nth-last-child(1) {
    color: var(--headerB-color);
}
.expensesTable .importantRow {
    color: rgb(152, 152, 255);
    text-shadow: 0 0 20px rgb(152, 152, 255);;
}
.expensesTable .importantFigure {
    color: red !important;
    text-shadow: 0 0 20px red;
}
.mathML {
    text-align: center;
    filter: invert(1);
}
.mathML img {
    max-width: 100%;
}
#readyToSignAnchor {
    transition: all 1s;
    z-index: 999;
    position: fixed;
    bottom: -10vh;
    width: 100%;
    height: 2.5vh;
    background:     linear-gradient(
        rgba(0, 0, 0, 0.5), 
        rgba(0, 0, 0, 0.5)
      ),
      url('https://i.pinimg.com/originals/82/e7/81/82e781dc79e1354ec89e342419c1fea9.gif');
    background-position-y: center;
    background-size: cover;
    text-align: center;
    padding-top: 0.5em;
    padding-bottom: 0.4em;
    text-transform: capitalize;
}
#readyToSignAnchor a {
    font-size: 1.5em;
    font-family: stretch;
    color: var(--headerB-color);
    text-shadow: 0 0 20px var(--headerB-color);
}
#readyToSignAnchor a:hover, #readyToSignAnchor a:active {
    font-size: 1.6em;
}