/* FONTS */
@font-face {
    font-family: futura pt;
    font-style: normal;
    font-weight: 400;
    src: local('Futura PT'), url(/fonts/FuturaCyrillicBook.woff) format('woff')
}

@font-face {
    font-family: futura pt;
    font-style: normal;
    font-weight: 300;
    src: local('Futura PT'), url(/fonts/FuturaCyrillicLight.woff) format('woff')
}

@font-face {
    font-family: futura pt;
    font-style: normal;
    font-weight: 450;
    src: local('Futura PT'), url(/fonts/FuturaCyrillicMedium.woff) format('woff')
}

@font-face {
    font-family: futura pt;
    font-style: normal;
    font-weight: 500;
    src: local('Futura PT'), url(/fonts/FuturaCyrillicDemi.woff) format('woff')
}

@font-face {
    font-family: futura pt;
    font-style: normal;
    font-weight: 600;
    src: local('Futura PT'), url(/fonts/FuturaCyrillicHeavy.woff) format('woff')
}

@font-face {
    font-family: futura pt;
    font-style: normal;
    font-weight: 700;
    src: local('Futura PT'), url(/fonts/FuturaCyrillicBold.woff) format('woff')
}

@font-face {
    font-family: futura pt;
    font-style: normal;
    font-weight: 800;
    src: local('Futura PT'), url(/fonts/FuturaCyrillicExtraBold.woff) format('woff')
}

@font-face {
    font-family: 'Special Elite';
    src: url('/fonts/SpecialElite-Regular.woff2') format('woff2'),
        url('/fonts/SpecialElite-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --specific-white: rgb(247, 245, 240);
    --specific-grey: rgb(131, 159, 170);
    --specific-black: rgb(20, 24, 25);
    --specific-red: rgb(168, 29, 37);
    --futura-font-stack: 'Futura PT', 'FuturaBT Book', Futura, 'Trebuchet MS', Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    --serif-font-stack: '	News701 BT', Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --typewriter-font-stack: 'Special Elite', 'Nimbus Mono PS', 'Courier New', monospace; 
}

.fadeOut {
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease-out;
    transition-delay: 400ms;
}

*{
    touch-action: manipulation;
}

html{
    background-color: var(--specific-grey);
    -webkit-backface-visibility: hidden;
backface-visibility: hidden;


}

body {
    background-color: var(--specific-grey);
    font-family: var(--serif-font-stack);
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
    overscroll-behavior: none;
    min-width: 500px;
    text-rendering: optimizeLegibility;
}




#firstTimeVisitOverlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(17, 15, 15, 0.65);
    backdrop-filter: blur(5px);
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.4s;
    transition-timing-function: ease-out;
}

#firstTimeExplanationBox{
    font-family: var(--futura-font-stack);
    position:absolute;
    top: 50vh;
    left: 50vw;
    width: 100%;
    max-width: 600px;
    min-width: 400px;
    height: 380px;
    padding: 15px;
    transform: translate(-50%, -50%);
    margin: auto;
    background-color: #247f52;
    border-color: var(--specific-white);
    border-style: solid;
    border-width: 0.5em;
    color: var(--specific-white);
}

#firstTimeExplanationBoxExitX{
    position: absolute;
    top: 6px;
    right: 6px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 1001;
}

#firstTimeExplanationBoxExitX svg path{
    fill: var(--specific-white);
}

#firstTimeExplanationBoxLeftCol {
    position: relative;
    float: left;
    width: 65%;
    height: 100%;
    padding-left: 20px;
    padding-top: 10px;
}

#firstTimeExplanationBoxLeftCol h1 {
    font-weight: 500;
    font-size: 70px;
    padding: 0;
    padding-bottom: 8px;
    margin: 0;
}

#firstTimeExplanationBoxLeftCol h2 {
    font-weight: 450;
    font-size: 30px;
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}

#firstTimeExplanationBoxLeftCol p {
    font-weight: 300;
    font-size: 27px;
    padding: 0;
    margin: 0;
}

#firstTimeExplanationBoxLeftCol button {
    align-self: center;
    text-align: center;
    background: var(--specific-white);
    font-family: var(--futura-font-stack);
    font-size: 30px;
    color: #000;
    padding: 10px;
    margin-top: 25px;
    width: 90%;
}

#firstTimeExplanationBoxRightCol {
    position: relative;
    float: right;
    height: 100%;
    width: 30%;
    background-image: url(/images/ISO_7010_E002.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#exitButton {
    display: block;
    position: fixed;
    top:-7px;
    right:0;
    height: max(8vw, 100px);
    width: max(8vw, 100px);
    transition: all 0.55s;
    cursor: pointer;
    z-index: 100000;
}

#exitbuttonSVG .backgroundColor{
    fill: var(--specific-red);
    filter: drop-shadow(-2px 4px 19px rgba(69, 69, 69, 1));
}
#exitbuttonSVG:hover .backgroundColor{
    fill: #b72128;
}

#exitbuttonSVG .letterColor{
    fill: #d4d2ce;
}

#exitbuttonSVG:hover .letterColor{
    fill: #ffffff;
    filter: drop-shadow(0px 0px 2px #FFFFFF);
}

#languageSelector {
    position: fixed;
    display: flex;
    top:0;
    left: 0;
    width: 100vw;
    height: 32px;
    background-color: var(--specific-black);
    font-family: var(--futura-font-stack);
    font-weight: 300;
    font-size: 20px;
    z-index: 100;
    line-height: 16px;
    color:var(--specific-grey);
    padding-left: 8px;
    text-align: center;
}
#languageSelector svg {
    margin-top: 4px;
    padding-right: 16px;
}


#languageSelector a{
    color:var(--specific-grey);
    text-decoration: none;
    padding-right: 8px;
    align-self: center;
    text-align: left;
    cursor: pointer;
    min-width: 1.5em;
}

#languageSelector a:hover{
    text-decoration: underline;
}

#languageSelector a.currentLanguage{
    font-weight: 500;
}

#languageSelector a i{
    font-size: 16px;
}


#sharingOverlay {
    visibility: hidden;
    position: fixed;
    top: -100vh;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--specific-grey);
    z-index: 1000;
    transition: top 300ms ease-in-out;
    overflow: hidden;

}

#sharingPresent{
    margin: 0 auto;
    background-color: var(--specific-grey);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-top: 4px;
    padding-bottom: 16px;
    border: double 4px var(--specifi-black);

}


#sharingClose{
    position: absolute;
    display: inline-block;
    width: 100vw;
    height: 100vh;
    top:0;
    left:0;
    background-color: var(--specific-grey);
    z-index: -1;
    cursor:alias;
}


#sharingClose span{
    position: absolute;
    bottom: 24px;
    width: 100%;
    min-width: 500px;
    font-size: 42px;
    font-family: var(--futura-font-stack);
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
}

#sharingClose:hover span{
    color: var(--specific-red);
}

#sharingCloseButton{
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border: none;
    color: var(--specific-black);
    background-color: transparent;
    margin: 0;
    padding: 0;
    font-size: 28px;
    z-index: 2000;
    cursor: pointer;
}

#sharingCloseButton:hover{
    color: var(--specific-red);
}

#sharingTitle{
    margin: 16px 0px 16px 0px;
}

#sharingTitle h1{
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 2px;
}


#sharingStage {
    display: flex;
    justify-content: center; 
    align-items: stretch; 
    box-sizing: border-box;
    /* flex-flow: column wrap; */ 
    flex-direction: column; 
    flex-wrap: wrap; 
    align-content: stretch;
    align-self: center;
    background-color: var(--specific-grey);
    height: 500px;
    width: 500px;
    padding: 8px;
    margin: 12px;
    margin-left: auto;
    margin-right: auto;
    transition: width 500ms ease-out, height 500ms ease-out;
    border: dotted  3px var(--specific-black);
    overflow: hidden;
    
}

#sharingStage.noBorder{
    border-color: transparent;
}



#sharingStage.portrait{
    height: 600px;
    width: 337.5px;
}

#sharingStage .title{
    flex-grow:1;
    flex-basis:100;
    align-self:stretch;
    margin: 0;
    justify-self: stretch;
    align-content: flex-start;
}

#sharingStage .title h1{
    padding-top: 16px;
    font-size: 38px;
    height: 40px;
    transition: height 500ms ease-out;
    text-transform: uppercase;
}

#sharingStage.portrait .title h1{
    height: 80px;
}


#sharingStage .title h2{
    padding: 8px;
    font-size: 24px;
    transition: font-size 500ms ease-out;
}

#sharingStage.portrait .title h2{
    padding: 8px;
    font-size: 17px;
}

#sharingStage .title h2 span{

    font-size: 12px;
}

#sharingStage.portrait .title h2 span{
    font-size: 8px;
}


#suggestionBoxShare {
    position: relative;
    flex-grow:100000;
    flex-basis:100;
    align-self:stretch;
    height: auto;
    margin: 16px;
}

#suggestionCanvasShare{
    padding: 8px;
}

#suggestionCanvasShare p{
    font-size: 32px; 
}

#suggestionCountShare {
    font-size: 20px;
}

#shareFooter {
    position: relative;
    flex-grow:1;
    align-self:stretch;
    align-content: center;

}
#shareFooter h2{
    margin:0;
    padding: 0;

}

#shareFooter a{
    color: var(--specific-black);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;
}

#sharingControls {
    width: 500px;
    margin: 0 auto;
}

#shareURLBox{
    display: block;
    width: 404px;
    margin: 12px auto 0px auto;
    font-size: 18px;
    text-align: left;
    resize: none;
    height: 48px;
    line-height: 48px;
    background: var(--specific-white);
    border: solid 2px var(--specific-black);
    color: var(--specific-black);
    font-family: var(--futura-font-stack);
    cursor: pointer;
    overflow: hidden;
}

#shareURLBox input{
    width: 320px;
    font-size: 18px;
    text-align: left;
    padding-left: 12px;
    resize: none;
    height: 48px;
    line-height: 48px;
    background: transparent;
    border: none;
    color: var(--specific-black);
    font-family: var(--futura-font-stack);
}

#shareURLBox input:focus{
    font-size: 18px;
}

#shareIcon{
    float: right;
    width: 48px;
    height: 48px;
    text-wrap: nowrap;
    text-align: center;
    background-color: var(--specific-grey);
    border-left: solid 1px var(--specific-black);
    line-height: 48px;
    font-size: 24px;
    text-shadow: 0px 0px 8px rgb(255, 255, 255, 0.0);
    transition: color 1000ms ease-out, text-shadow 1000ms ease-out, background-color 2000ms ease-out;

}

#shareIcon:hover {
    color: var(--specific-white);
    text-shadow: 0px 0px 6px rgb(255, 255, 255);
    transition: color 5ms ease-out, text-shadow 5ms ease-out, background-color 2000ms ease-out;
}

#shareIcon:active, #shareIcon .blipped{
    background-color: var(--specific-white);
    transition: background-color 5ms ease-out;
}

#shareURL{
    cursor:text;
}

#orientationBox {
    display: flex;
    justify-content: space-evenly; 
    align-items: center;    
    align-content: center;

    box-sizing: border-box;
    padding:0;
    margin:0;
    width: 488px;
    margin: 8px auto 0px auto;
    font-size: 18px;
    height: auto;

}


#orientationBox button{
    box-sizing: content-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    max-width: 20%;
    flex-basis: 25%;
    flex-grow: 1;

    color: var(--specific-black);
    background: var(--specific-white);
    font-family: var(--futura-font-stack);

    border: solid 2px var(--specific-black);

    padding:4px;
    margin:0;
    
    height: auto;
    font-size: 12px;
    font-weight: 500;
    
    cursor: pointer;
}

#orientationBox button svg{
    flex-basis: 75%;
}

#orientationBox button:hover{
    color: var(--specific-red);
}


#orientationBox #squareOrientation{
    color: var(--specific-red);
}

#orientationBox.portrait #portraitOrientation{
    color: var(--specific-red);

}

#orientationBox.portrait #squareOrientation{
    color: var(--specific-black);
}


#flexContainer{
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
}



#generatorBlock{
    position: relative;
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 100vh;
    margin: 0;
    background-color: var(--specific-grey);
    overflow-x: hidden;
    overflow-y: visible;
    padding: 0 2rem;
    z-index: 50;
}

.generatorTextureOverlay{
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-repeat: repeat;
    background-image: url("/images/papercover.png");
    mix-blend-mode: multiply;
    opacity: .5;
    pointer-events: none;
    z-index: 200;
}


.title {
    margin: max(1rem, 7vh) 0 0;
    color: var(--specific-black);
    text-align: center;
    font-family: var(--futura-font-stack);
    width: 100%;
}

.title h1 {
    padding: 0;
    margin: 0;
    font-size: max(2.5rem, max(3vw, 2vh));
    line-height: 1.2;
    font-weight: 400;
    text-transform: uppercase;
}
.title h2 {
    padding: max(.5rem, 2vh) 0 0;
    margin: 0;
    font-size: max(1.5rem,max(2vw, 1vh));
    line-height: 1.15;
    font-weight: 400;
    text-transform: uppercase;
}

.title span{
    font-size: max(.75rem,max(1vw, .5vh));
    margin-left: -0.2vw;
    vertical-align: super;
}

.quote{
    text-align: center;
    color: var(--specific-black);
    font-family: var(--serif-font-stack);
    font-size: max(.75rem,max(1.25vw, 1.25rem));
    font-style: italic;
    margin: min(.75rem, 3vh) 0 1vh;
    max-width: 35rem;
    text-wrap: balance;
}

#suggestionGenerator, .suggestionGenerator {
    width: 95%;
    max-width: 40rem;
}

#suggestionBox, .suggestionBox {
    display: flex;
    background: var(--specific-white);
    margin: 1vh auto 3vh;
    padding: 0.4em;
    border-style: solid;
    border-color: var(--specific-black);
    border-width: 0.5em;
    height: 30vh;
    min-height: 10rem;
    overflow: hidden;
}

#suggestionCanvas, .suggestionCanvas {
    display: flex;
    position: relative;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
    border-style: solid;
    border-color: var(--specific-black);
    border-width: 0.3em;
    padding: 0 1vw;
    overflow: hidden;
}

#specificSuggestion, .specificSuggestion{
    display: flex;
    position: relative;
    flex-grow: 100;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: stretch;
    align-content: center;
    align-items: center;
    order: 0;
}

#suggestionCount, .suggestionCount {
    position: absolute;
    font-family: var(--typewriter-font-stack); 
    font-size: 1.4em;
    font-weight: 300;
    top: 0.5em;
    right: 0.5em;
    color:var(--specific-red);
    mask-image: url("/images/grunge.png");
    mask-size: 100%;
    mask-type: alpha;
    -webkit-mask-image: url("/images/grunge.png");
    -webkit-mask-size: 100%;
    -webkit-mask-type: alpha;
    line-height: 30px;
}

 #specificSuggestion p, .specificSuggestion p{
    width: 100%;
    text-wrap: balance;
    color: var(--specific-black);
    font-family: var(--futura-font-stack);
    font-weight: 450;
    text-align: center;
    font-variant-ligatures: none;
    font-size: max(2vw, 2.1em);
    /*text-transform: capitalize;*/
    
}

#additionalDetails {
    display: block;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    opacity: 0.5;
    margin-left: 10%;
    margin-right: 10%;
    text-align: left;
    flex-grow: 2;
    overflow-y: auto;
}

#suggestionControls {
    display: flex;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    align-items:flex-start;
    justify-content: space-evenly;
    max-width: 40rem;
    width: 100%;
    margin: auto;
}

#suggestionControls > *:not(:last-child){
    margin-right:0.25em;
}

#suggestionControls button {
    position: relative;
    display: block;

    height: auto;
    min-height: 4em;
    max-height: 4em;
    
    flex-basis: 20%;
    max-width: 7rem;
    
    color: var(--specific-black);
    font-family: var(--futura-font-stack);
    font-weight: 500;
    font-size: 1em;
    
    background-color: var(--specific-white);
    border-style: solid;
    border-color: var(--specific-black);
    border-width: 4px;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: content-box;
}


#filterButton {
    line-height: 3.31em;
    overflow: visible;
}

#filterSelector {
    position: absolute;
    box-sizing: content-box;
    left: -4px; /*dealing with borders and iOS*/
    top: 3em;
    height: auto;
    max-height: 0px;
    margin: 0 0 1em 0;
    padding: 0px;
    width:  100%;
    overflow: hidden;
    line-height: 1.65rem;
    text-align: left;
    transition: all 150ms ease-out;
    background-color: var(--specific-white);
    border-style: solid;
    border-color: var(--specific-black);
    border-width: 0 4px 0 4px;
    color: var(--specific-black);
    z-index: 900;
}

#filterOptions {
    position: relative;
    display: inline-block;
}

#filterOptions label {
    display: block;
    white-space: nowrap;
    padding-left: 0.25em;
    min-width: 51%;
    accent-color: var(--specific-red);
}

#filterOptions label input {
    margin-right: 0.35em;
}

#suggestionControls #generatorButton {
    max-width: 12rem;
    flex-basis: 32%;
}

#suggestionControls #filterButton {
    max-width: 9rem;
    flex-basis: 32%;
    z-index: 50;
}

#suggestionControls button:hover {
    color: var(--specific-red);
}

#publicDomain {
    position: relative;
    padding: max(.25rem, 2vh) 0 max(1rem, 4vh);
    color: var(--specific-black);
    font-family: var(--serif-font-stack);
    font-size: max(.75rem,max(1.25vw, 1.25rem));
    max-width: 40rem;
    text-align: center;
    flex-grow: 0;
}

#publicDomain .secret{
    font-family: var(--futura-font-stack);
    text-transform: uppercase;
    background-image: url(/images/strikethrough.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


#publicDomain svg.publicDomainStamp{
    display: inline-flex;
    position: absolute;
    fill: #494761;
    mask-image: url("/images/grunge.png");
    mask-size: 100%;
    mask-type: alpha;
    -webkit-mask-image: url("/images/grunge.png");
    -webkit-mask-size: 100%;
    -webkit-mask-type: alpha;
    width: 6.5rem;
    height: 6.5rem;
    top: 0vh;
    left: -9%;
    rotate: -15deg;
}

#manual {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    height: 100vh;
    overflow: scroll;
    margin-top: 0;
    background-color: var(--specific-white);
    padding: 0 5%;
    background-image: url("/images/paperbook.png");
    background-repeat: repeat;

}

#manual article {
    max-width: 70ch;
    width: 100%;
    margin: 1rem auto;
}

#manual h1{
    text-align: center;
    font-size: max(3vw, 3rem);
    font-weight: 100;
    text-transform:uppercase;
    font-family: var(--serif-font-stack);
    color: var(--specific-black);
    
}

#manual h2{
    text-align: left;
    font-size: max(1.7vw, 1.7rem);
    font-weight: 100;
    text-transform:uppercase;
    letter-spacing: 0.1em;
    font-family: var(--serif-font-stack);
    color: var(--specific-black);
}

#manual p{
    text-align: left;
    font-size: 1.15rem;
    line-height: 1.5;
}

#manual a{
    color: var(--specific-black);
}

#manual ol {
    list-style: none;
    padding: 0;
    counter-reset: list;
    
}

#manual li {
    text-align: left;
    font-size: 1.15rem;
    line-height: 1.5;
    margin: 1em 0;
    list-style-position: outside;
}

#manual ol > li:before {
    content:"(" counter(list, lower-alpha) ")  ";
    counter-increment: list;
}

#motivationQuotes{
    display: grid;
    justify-items: center;
    align-items: center;
    height: fit-content;
    cursor: cell;
}

#motivation blockquote{
    max-width: 100%;
    font-family: var(--futura-font-stack);
    grid-area: 1 / -1;
    transition: opacity 250ms ease-in-out;
    transition-delay: 0;
    opacity: 0;
    font-size: 1.5em;
    pointer-events: none;
}


#motivation blockquote.active{
    opacity: 1;
    transition-delay: 250ms;
    pointer-events: all;
}

#manual cite{
    font-family: var(--typewriter-font-stack);
    font-size: 0.8em;
    float: right;
    padding: 1em;
    margin: 1em;
    text-align: right;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 6px;
    }



#tableFilters {
    display: flex;
    border-top: solid 1px var(--specific-black);
    height: 36px;
    padding-top:4px;
    padding-left: 50px;
    font-family: var(--serif-font-stack);
    
}

#tableFilters select{
    font-size: 16px;
    border: none;
    min-width: 100px;
    max-width: 100px;
    border-bottom: solid 1px var(--specific-black);
    background-color: transparent;
    font-family: var(--serif-font-stack);
    border-radius: 0;
    color: var(--specific-black);
    
}

#tableFilters input{
    font-size: 16px;
    border: none;
    width: calc(100% - 190px);
    border-bottom: solid 1px var(--specific-black);
    background-color: transparent;
    font-family: var(--serif-font-stack);
    flex-grow: 1;
    border-radius: 0;
    color: var(--specific-black);    
}

#specific-suggestions p{
    width: 100%;
    text-align: center;
    font-family: var(--futura-font-stack);
    font-size: 1.2em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 400;
}

#specific-suggestions p a{
    text-decoration: none;

    border-bottom: solid 1px var(--specific-black);
    
}

#specific-suggestions p:hover a{
    color:var(--specific-red);
    cursor: pointer;
    border-bottom: solid 2px var(--specific-red);
}

#emailAddress {
    display: block;
    position:relative;
    font-family: var(--futura-font-stack);
    font-size: 1.25rem;
    text-align: center;
    height: 100%;
    max-height: 1.5em;
    transition: max-height 150ms ease-out, opacity 300ms ease-in;
    overflow: hidden;
    padding:0.5em 0 0 0;
    opacity: 0;
}

#encryptionTool{
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    align-items: stretch;
    position: relative;
    max-height: 0px;
    opacity: 0;
    transition: max-height 450ms ease-out, opacity 600ms ease-in;
    overflow: hidden;
}

#encryptionTool textarea{
    flex-grow: 1;
	flex-basis: 34%;
	align-self: stretch;
    min-height: 14rem;
    max-height: 14rem;
    overflow-y: scroll;
    resize: none;
    padding: 1em;
    color: var(--specific-black);
    border-radius: 0;
}

#encryptionTool button{
    margin-top: -1px;
    flex-grow: 1;
	flex-basis: 48%;
	align-self: stretch;

    background-color: transparent;
    padding: 1em;

    font-family: var(--futura-font-stack);
    color:var(--specific-black);
    font-weight: 500;
    font-size: 1.25rem;
}

#encryptionTool button:hover{
    color:var(--specific-red);
}


#encryptionTool #textToEncrypt {
    border-top: 4px double var(--specific-black);
    border-left: 4px double var(--specific-black);
    border-right: 1px solid var(--specific-black);
    border-bottom: 1px solid var(--specific-black);
}

@keyframes fadeOutThenIn {
    0% { color: var(--specific-black); }  
    30% { color: #14181900; } 
    70% { color: #14181900; } 
    100% { color: var(--specific-black); }
  }

  @keyframes fadeOutThenInSwap {
    0% { color: var(--specific-black); }  
    30% { color: #14181900; } 
    70% { color: #14181900; } 
    100% { color: var(--specific-black); }
  }

#encryptionTool #encryptedMessage {
    background-color: transparent;
    border-top: 4px double var(--specific-black);
    border-right: 4px double var(--specific-black);
    border-left: 1px solid var(--specific-black);
    border-bottom: 1px solid var(--specific-black);

    animation-name: "fadeOutThenInSwap";
    animation-duration: 500ms; 
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

#encryptionTool #encryptTextarea{

    border-bottom: 4px double var(--specific-black);
    border-left: 4px double var(--specific-black);
    border-right: 1px solid var(--specific-black);
    border-top: 1px solid var(--specific-black);

    cursor: pointer;

}
#encryptionTool #copyPrivateMessage{

    border-bottom: 4px double var(--specific-black);
    border-right: 4px double var(--specific-black);

    border-left: 1px solid var(--specific-black);
    border-top: 1px solid var(--specific-black);
    cursor: pointer;
}

#copyNotification{
    display: inline-block;
    position: absolute;
    top: 45%;
    left: 55%;
    width: 40%;
    text-align: center;
    font-family: var(--typewriter-font-stack);
    font-size: max(1.25rem, max(2.5vw, 5vh));
    font-weight: 900;
    color:var(--specific-red);
    mask-image: url("/images/grunge.png");
    mask-size: 50%;
    mask-type: alpha;
    -webkit-mask-image: url("/images/grunge.png");
    -webkit-mask-size: 50%;
    -webkit-mask-type: alpha;
    border: 4px double var(--specific-red);
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease-out;
}

#copyNotification.show{
    transition: opacity 1ms linear;
    opacity: 1.0;
}

#publication p{
    margin-top: 2em;
    text-align: center;
}

#dates {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-size: 1.15rem;
    line-height: 1.5;
    counter-reset: whichDate;
}

#dates span {
    font-family: var(--typewriter-font-stack); 
    font-size: max(.5rem, max(1vw, 2vh));
    font-weight: 500;
    display: inline-block;
    rotate: 2.7deg;
    color:var(--specific-red);
    mask-image: url("/images/grunge.png");
    mask-size: 10%;
    mask-type: alpha;
    -webkit-mask-image: url("/images/grunge.png");
    -webkit-mask-size: 10%;
    -webkit-mask-type: alpha;
}

#dates div:nth-child(even) span {
    rotate: -2.2deg; 
}

/*MOBILE DIMENSIONS*/
@media only screen and (max-width: 1000px) {

    /* Override Input Zooming Hack */
    select, textarea, input {
      font-size: 16px;
    }
    
    #firstTimeExplanationBox{
        transform: translate(-50%, -50%) scale(0.75,0.75);
    }

    #flexContainer{
        flex-wrap: wrap;
    }
    /*
    #exitButton {
        height: 15vw;
        width: 15vw;
    }*/
    
    #generatorBlock {
        flex-basis: 100%;
        min-height: 42rem;
        height: fit-content;
        padding: 0 1rem;
        position: relative;
    }
    
    #suggestionCanvas {
        border-width: 0.25em;
    }

    #title{
        margin: 7vh 0 0;
        padding: 0;
    }

    #title h1 {
        font-size: max(2.75rem,max(8vw, 4vh));
    }
    #title h2 {
        padding: .5rem 0 0;
        font-size: max(1.5rem,max(4vw, 1.5vh));
    }
    #title span{
        font-size: max(.75rem,max(2vw, .75vh));
        margin-left: -0.2vw;
    }

    .quote{
        font-size: max(1.25rem, max(2vw, 1.25vh));
        margin: 2vh;
    }

    #suggestionBox {
        height: max(10vw,20vh);
        height: 15em;
        max-width: min(35rem, 95vw);
        margin: 0 auto 1vh;
        border-width: 0.4em;
    }

    #specificSuggestion p{
        font-size: 1.85em;
        /*text-transform: capitalize;*/
    }

    #suggestionControls {
        width: 95%;
        padding: max(.5rem, 2vh) 0 0;
    }

    #suggestionControls button {
        flex-basis: 30%;
        max-width: 9rem;
    }


    #publicDomain {
        padding: 3vh 0;
    }

    #publicDomain svg.publicDomainStamp{
        width: 6.5rem;
        height: 6.5rem;
        top: 1vh;
        left: -9%;
    }

    #manual {
        flex-basis: 100%;
        height: auto;
        overflow: none;
    }

    #textureOverlay{
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        background-repeat: repeat;
        background-image: url("/images/paperbook.png");
        mix-blend-mode: multiply;
        opacity: .5;
        pointer-events: none;
        z-index: 200;
    }

}

@media only screen and (max-width: 550px) {
    #title{
        margin: 4vh 0 0;
        padding: 0;
    }

    #title h1 {
        font-size: max(2rem,max(8vw, 4vh));
        padding: max(.5rem,3vh) 0 0;
    }
    #title h2 {
        font-size: max(1.15rem,max(5vw, 2.25vh));
        padding: .5rem 0 0;
        margin: 0;
        line-height: 1.15;
    }
    #title span{
        font-size: max(.575rem,max(2.5vw, 1.125vh));
        margin-left: -0.2vw;
    }

    .quote{
        font-size: max(1rem, max(2vw, 1.25vh));
    }

    #publicDomain {
        padding: 2vh 0 3vh;
    }

    #publicDomain svg.publicDomainStamp{
        width: 6rem;
        height: 6rem;
        top: 1vh;
        left: -2%;
    }

    #specificSuggestion p{
        font-size: 1.85em;
    }

    #suggestionControls button:hover {
        background-color: var(--specific-white);
    }

    #manual, #manual p, #manual li{
        font-size: 1.3rem;
    }
}

.enemy:hover{
    cursor: url("/images/crosshair.svg") 12 12, crosshair;
}