/****************************** General ******************************/

body {
    background-color: black;
    overflow-x: hidden;
    background-size: cover;
    background-attachment: fixed;
    color: #4D7F82;
    word-wrap: break-word;
}

a {
    color: #4D6F82;
    text-decoration: underline;
    text-decoration-color: #82594D;
}

code {
    background-color: #4D6F82;
    color: black;
    padding: 0 2px 0 2px;
}

:root { --listElementContainsLink: #82594D; }

.listElementContainsLink { list-style-type: disc; }

.listElementContainsLink::marker { color: var(--listElementContainsLink); }

/****************** These classes pertain to Google fonts. ********************/

.satisfy { font-family: 'Satisfy', cursive; }

.crimsonText { font-family: 'Crimson Text', serif; }

.sofia { font-family: 'Sofia', cursive; }

.dancingScript { font-family: 'Dancing Script', cursive; }

.zcoolKuaiLe { font-family: 'ZCOOL KuaiLe', cursive; }

.lobster { font-family: 'Lobster', cursive; }

.shadowsIntoLight { font-family: 'Shadows Into Light', cursive; }

.patrickHand { font-family: 'Patrick Hand', cursive; }

.playfairDisplaySC { font-family: 'Playfair Display SC', serif; }

.acme { font-family: 'Acme', sans-serif; }

.noticaText { font-family: 'Notica Text', serif; }

.girassol { font-family: 'Girassol', cursive; }

/******************************************************************************/

/* clover_dice.svg is Mr. Fate's creation. */
.cloverDice { background-image: url(/photos/vectors/clover_dice.svg); }

/*Derived from: Yana Ray at https://all-free-download.com/free-photos/download/dark_background_194454.html#google_vignette*/
.yanaRay_darkRedAbstractBackground { background-image: url(/photos/backgrounds/dark_background.jpg); }

/* Derived from: https://www.peakpx.com/en/hd-wallpaper-desktop-gcueb */
.darkRedFloralLaceBackground { 
    background-image: url(/photos/backgrounds/peakpx.jpg); 
    background-size: contain;
}

/* From https://www.peakpx.com/en/hd-wallpaper-desktop-knuvm; I darkened the image by lowering the exposure. */
.darkBlackFloralLaceBackground {
    background-image: url(/photos/backgrounds/black_lace_flowers.jpeg); 
    background-size: contain;
}

/* Derived from: kbza at https://www.freepik.com/free-photo/dark-texture-surface_8425524.htm#page=12&query=dark%20brown%20background&position=43&from_view=keyword */
.darkSurfaceTexture { background-image: url(/photos/backgrounds/dark-texture-surface.jpg); }

/* Derived from: kbza at https://www.freepik.com/free-photo/marine-blue-stone-background_9235674.htm#&position=15&from_view=detail#query=d&position=15&from_view=detail#position=15 */
.marineBlueStoneBackground { background-image: url(/photos/backgrounds/marine-blue-stone-background.jpg); }

/* Source: Tom Morel --> https://unsplash.com/photos/ktVazL5c7FM */
.blackGemstonesTomMorel { background-image: url('/photos/backgrounds/tom-morel-ktVazL5c7FM-unsplash.jpg'); }

/* Derived from: Juraj Varga --> https://pixabay.com/photos/drops-water-water-drop-water-drops-2087006/ */
.raindropBackground { background-image: url(/photos/backgrounds/dark_raindrops_background_3.jpg); }

/* Derived from: Takis Politis --> https://unsplash.com/photos/FmeJ2pV6YsU */
.rustBrownTexture { background-image: url('/photos/backgrounds/takis-politis-FmeJ2pV6YsU-unsplash.jpg'); }

/* Derived from: https://www.peakpx.com/en/hd-wallpaper-desktop-kduyl */
.darkBlueFloraLaceBackground { 
    background-image: url('/photos/backgrounds/laundryCalendarBackground.jpg');
    background-size: contain;
}

/* https://www.peakpx.com/en/hd-wallpaper-desktop-gecip */
.black_lace_background {
    background-image: url(/photos/backgrounds/black_lace.jpg); 
    background-size: contain;
}

/********************************** Menu **************************************/

#menuNavigation {
    display: flex;
    height: 90px;
    border-width: 3px 0 3px 0;
    border-style: solid;
    border-color: #161D26;
    border-color: rgba(0,0,0,0.5);
    background-color: #2C3A4D;
    color: black;
}

#menuNavigationInnerContainer {
    transform: scale(0.45);
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

/**************************** index.html & menu *******************************/

#flyingDoveContainer { 
    width: 100%; 
    /*height: 500px;*/
    height: 0;
    font-size: 16px;
}

#flyingDove {
    width: 7.4375em;
    height: 7.75em;
    transform: scale(0.85);
    background-repeat: no-repeat;
    background-size: 52.5em;
    background-image: url('/photos/vectors/flying_dove_correct_edit.svg'); /* rename file name */
    position: relative;
    top: 35px;
    left: -125px;
    animation-name: moveDoveAcrossTheScreen;
    animation-duration: 180s;
    animation-delay: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes moveDoveAcrossTheScreen {
    0% { left: -125px; }
    15% { left: 50vw; }
    30% { left: 100vw; }
    31% {
        display: none;
        visibility: hidden;
        left: 100vw;
    }
    100% {
        display: none;
        visibility: hidden;
        left: 100vw;
    }
}

#homepageNavigationContainer {
    display: flex;
    flex-direction: column;
    height: 260px;
    position: relative;
    z-index: 2;
}

#homepageNavigation {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    border: 5px solid black;
    box-shadow: 0 0 50px black;
    position: relative;
    z-index: 2;
    overflow: hidden;
    background-color: #2C3A4D;
    color: black;
}

#loginContainer {
    display: flex;
    height: 100px;
    font-size: 24px;
    margin-left: 9px;
}

#loginDirectionsAndInput {
    width: 475px;
    margin-right: 15px;
}

#loginContainer input {
    background-color: #222c3b;
    background-color: rgba(0,0,0,0.25);
    font-size: 26px;
    font-family: 'Crimson Text';
    height: 43px;
    font-weight: bold;
    border: none;
    width: 100%;
    padding-left: 5px;
}

#submitPasswordButton {
    background-color: #222c3b;
    background-color: rgba(0,0,0,0.25);
    font-size: 40px;
    width: 175px;
    font-family: 'Crimson Text';
    text-decoration: underline;
    font-weight: bold;
    letter-spacing: 1px;
    border: none;
    color: black; /* Necessary in case the button:active state (where the button is clicked) yields text coloring that is different than black (like white, for Safari)...But is this necessary, if I have a CSS reset? */
}

#submitPasswordButton:hover { 
    background-color: #1d2633;
    background-color: rgba(0,0,0,0.35);
}

#exitPasswordEntry {
    font-size: 50px;
    font-family: sans-serif;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
}

#exitPasswordEntry span { margin-top: -8.5px; }

#silentWyrdEntireLogo {
    min-width: 700px;
    width: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
    margin: 0 35px 0 35px;
}

#silentWyrdSymbol {
    width: 207px;
    height: 100px;
    display: flex;
    justify-content: center;
    position: relative;
    left: 3px;
}

#silentWyrdSymbolFirstChild {
    position: relative;
    transform: scale(.7);
    top: -34px;
}

.blade {
    position: relative;
    width: 0;
    height: 0;
    border-radius: 20%;
    border-bottom: 200px solid #F7F7F7;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
}

.blade1 { /*two*/
    z-index: 3;
    transform: rotate(-45deg);
    top: -9.75%;
    left: 21.75%;
    border-bottom-color: black;
}

.blade2 { /*three*/
    transform: rotate(-90deg);
    top: -100.25%;
    left: 25%;
    border-bottom-color: black;
}

.blade3 { /*one --> origin*/
    left: 42%;
    top: -213.6%;
    border-bottom-color: black;
}

.blade4 { /*four*/
    z-index: 6;
    transform: rotate(-135deg);
    top: -290%;
    left: 22%;
    border-bottom-color: black;
}

.blade5 { /*five*/
    transform: rotate(-180deg);
    left: 42%;
    top: -386%;
    border-bottom-color: black;
}

.blade6 { /*six*/
    z-index: 6;
    transform: rotate(-225deg);
    top: -489.5%;
    left: 62.25%;
    border-bottom-color: black;
}

.blade7 { /*seven*/
    transform: rotate(-270deg);
    top: -600.25%;
    left: 59%;
    border-bottom-color: black;
}

.blade8 { /*eight*/
    z-index: 8;
    transform: rotate(-315deg);
    top: -709.55%;
    left: 61.75%;
    border-bottom-color: black;
}

.heart {
    z-index: 12;
    position: relative;
    width: 10px;
    height: 10px;
    left: 47.5%;
    transform: scale(1.75) rotate(225deg);
    background-color: #4D7F82;
    top: -750%;
}

.heartPart {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #4D7F82;
}

.leftSideHeartPart {
    z-index: 13;
    top: 50%;
    left: 0;
}

.rightSideHeartPart {
    z-index: 14;
    top: -100%;
    left: 50%;
}

#mrFateOuterContainer {
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#mrFateNavigation {
    width: 100px;
    font-size: 12px;
    margin-bottom: 43px;
}

#homepageNavigation #mrFateNavigation { margin-left: 3.5px; }

.mrFateContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hair { /* !!! */
    width: 0;
    height: 0;
    border-bottom: 1.5em solid #F7F7F7;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-radius: 20%;
}

.hair1, .hair2 { transform: skewX(30deg); } /* !!! */

.hair4, .hair5 { transform: skewX(-30deg); } /* !!! */

.eyebrow { /* !!! */
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 0.19em 0.19em 0 0 #F7F7F7;
    transform: rotate(-135deg);
    z-index: 3;
    width: 1.5em;
    height: 1.5em;
    margin-bottom: 2em;
}

.eyebrow1 { margin-right: 0.8em; } /* !!! */

.face { /* !!! */
    width: 6.5625em;
    height: 6.5625em;
    position: absolute;
    border: 0.19em solid #D9A071;
    background: #FFE1A9;
    border-radius: 60% 60% 90% 90%;
}

.eyelid {
    z-index: 1;
    width: 1.2em;
    height: 1em;
    top: 1em;
}

.eyelid1 {
    animation-name: eyelid1;
    animation-duration: 12s;
    animation-delay: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    position: absolute;
    background-color: #FFE1A9;
    left: 1.53em;
}

.eyelid2 {
    animation-name: eyelid2;
    animation-duration: 12s;
    animation-delay: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    position: absolute;
    background-color: #FFE1A9;
    left: 3.8em;
}

@keyframes eyelid1 {
    1% {
        top: 1.2em;
    }
    2% {
        top: 1.4em;
    }
    3% {
        top: 1.6em;
    }
    4%, 6% {
        top: 1.9em;
    }
    10% {
        top: 1em;
    }
}

@keyframes eyelid2 {
    1% {
        top: 1.2em;
    }
    2% {
        top: 1.4em;
    }
    3% {
        top: 1.6em;
    }
    4%, 6% {
        top: 1.9em;
    }
    10% {
        top: 1em;
    }
}

.left-eye { /* !!! */
    width: 0.95em;
    height: 0.7em;
    top: 2.1em;
    left: 1.67em;
    position: relative;
    background: black;
    border-radius: 50%;
}

.right-eye { /* !!! */
    width: 0.95em;
    height: 0.7em;
    top: 1.4em;
    left: 3.95em;
    position: relative;
    background: black;
    border-radius: 50%;
}

.centerEye { /* !!! */
    position: relative;
    border-radius: 50%;
    background: white;
    width: 0.3em;
    height: 0.3em;
    left: 0.32em;
    top: 0.15em;
}

.nose {
    width: 0.25em;
    left: 2.9825em;
    top: 3.69em;
    position: absolute;
    border: 0.2em solid #D9A071;
}

.fluffsContainer {
    position: absolute;
    top: 4.4em;
}

.fluffs {
    background-color: #F7F7F7;
    border-radius: 50%;
    border: 0.125em solid white;
    border-right-color: transparent;
    border-left-color: transparent;
    width: 1.875em;
    height: 1.875em;
    position: absolute;
    top: 0;
}

.fluff10 {
    border-left: 0.125em solid white;
    z-index: 2;
}

.fluff9 {
    left: 1.5em;
    z-index: 3;
}

.fluff8 {
    left: 3em;
    z-index: 4;
}

.fluff7 {
    left: 4.5em;
    border-right: 0.125em solid white;
    z-index: 5;
}

.fluff6 {
    left: 0.75em;
    border-left: 0.125em solid white;
    z-index: 6;
    top: 1.7em;
}

.fluff5 {
    left: 2.25em;
    z-index: 7;
    top: 1.7em;
}

.fluff4 {
    border-right: 0.125em solid white;
    z-index: 8;
    left: 3.75em;
    top: 1.7em;
}

.fluff3 {
    border-left: 0.125em solid white;
    z-index: 9;
    left: 1.5em;
    top: 3.4em;
}

.fluff2 {
    border-right: 0.125em solid white;
    z-index: 10;
    left: 3em;
    top: 3.4em;
}

.fluff1 {
    border: 0.125em solid white;
    z-index: 11;
    left: 2.25em;
    top: 5.1em;
}

.mouth {
    position: absolute;
    width: 1.1em;
    height: 0.6em;
    left: 2.75em;
    top: 5.15em;
    z-index: 12;
    background-color: black;
    border-radius: 50%;
}

#insultDropdown {
    top: -220px;
    position: relative;
    z-index: 1;
    animation-name: insultDropdown;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes insultDropdown {
    0% { top: -220px; }
    100% { top: -15px; }
}

#stemsContainer {
    display: flex;
    width: 600px;
    justify-content: space-evenly;
    margin: auto;
}

.stem {
    background-color: #48343B;
    width: 10px;
    height: 75px;
}

#insultingMessage {
    background-color: #48343B;
    width: fit-content;
    padding: 7px;
    text-decoration: underline;
    margin: auto;
    outline: 5px double #483444;
    border: 5px solid #483444;
    position: relative;
    bottom: 19px;
    font-size: 24px;
    z-index: 3;
    box-shadow: 0 0 15px 3px black;
    text-align: center;
    color: black;
}

/**************************** Data Calendars **********************************/

#calendarIntro {
    font-size: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 50px auto 37.5px auto;
}

.calendarIntro__forewarning {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    text-align: center;
}

.calendarIntro__forewarning__title { font-size: 25px; }

.calendarIntro__forewarning__message { width: 550px; }

.calendarIntro__forewarning span { display: block; }

.calendar__calendarBackbone__navigation {
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendar__calendarBackbone__navigation__beginningOfCalendarMessage {
    width: 90px;
    height: 30px;
    font-size: 12px;
}

.calendar__calendarBackbone__navigation__arrow {
    width: 30px;
    height: 30px;
}

.calendar__calendarBackbone__navigation__date {
    font-size: 35px;
    margin: 0 10px 0 10px;
    position: relative;
    top: 3px;
}

.calendar__calendarBackbone__daysOfWeek {
    display: flex;
    margin: auto;
    width: 435px;
    font-size: 17px;
    height: 22px;
    justify-content: space-evenly;
    text-align: center;
}

.calendar__calendarBackbone__daysOfWeek__weekday { width: 58px; }

.calendar__calendarBackbone__month {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    width: 465px;
    justify-content: center;
}

.calendar__calendarBackbone__month__day {
    width: 58px;
    height: 58px;
    background-color: black;
    margin: 2px;
    box-shadow: 0 0 2px cadetblue;
    font-size: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
}

.calendar__calendarBackbone__month__day--dull { 
    color: #142b2b;
    color: rgba(95, 158, 160, 0.25); 
}

.calendar__calendarBackbone__month__day--noEntry {
    background-color: #0c1414;
    background-color: rgba(95, 158, 160, 0.1);
    background-image: url('/photos/vectors/transparent_x.svg');
}

.calendar__calendarBackbone__month__day--defaultColor { background-color: #260216; }

#calendarSearchBoxAndAfterwarning {
    font-size: 16px;
    text-align: center;
    max-width: 550px;
    margin: 25px auto auto auto;
    font-family: 'Times Roman'; 
}

#calendarSearchBoxAndAfterwarning__calendarSearchBox { 
    display: flex;
    flex-direction: column;
}

#calendarSearchBoxAndAfterwarning__calendarSearchBox input {
    margin-left: 5px;
    margin-right: 5px;
    background-color: black;
    border: 1px solid rgba(77, 127, 130, 0.35);
    padding-left: 5px;
    font-family: inherit;
    color: inherit;
    font-size: inherit;
}

#calendarSearchBoxAndAfterwarning__calendarSearchBox button, #calendarSearchBoxAndAfterwarning__directTransferButtons button {
    background-color: black;
    border: 1px solid rgba(77, 127, 130, 0.35);
    font-family: inherit;
    color: inherit;
    font-size: inherit;
}

#calendarSearchBoxAndAfterwarning__directTransferButtons button:not(:last-child) { margin-right: 5px; }

/* I kept getting confused about selectors, but understanding the closely held dot selector comes from Jobin's answer at https://stackoverflow.com/questions/12811149/what-does-the-dot-mean-in-css */
#calendarSearchBoxAndAfterwarning__directTransferButtons button.disabledButton { 
    cursor: not-allowed;
    filter: brightness(0.5); 
}

#calendarSearchBoxAndAfterwarning__calendarSearchBox__errorMessage {
    color: red; 
    display: flex;
    align-items: center;
    align-self: center;
}

#calendarSearchBoxAndAfterwarning__calendarSearchBox__errorMessage__closeButton {
    margin-right: 5px;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
}

#calendarSearchBoxAndAfterwarning__calendarSearchBox__validInputExamples { font-style: italic; }

#calendarSearchBoxAndAfterwarning__calendarAfterwarning, #calendarSearchBoxAndAfterwarning__directTransferButtons { margin-top: 25px; }

#calendarSearchBoxAndAfterwarning__calendarAfterwarning span { display: block; }

.calendarExplanation {
    font-size: 16px;
    max-width: 750px;
    text-align: center;
    margin: 25px auto auto auto;
}

/* Consider putting these things under a general category. */

.pageDivider {
    display: flex;
    margin: 25px auto auto auto;
}

.pageDivider--calendar { max-width: 750px; }

.pageDivider img {
    width: 30px;
    margin-left: 20px;
    margin-right: 20px;
}

.pageDivider div {
    border-bottom: 1px solid;
    flex: 0.5;
    margin: auto;
}

/* This nearly resembles the page disabler of tea_rankings. Use this as the tea_rankings disabler, while paying attention to how the difference in z-index affects the page. */
#errorMessagePageDisabler {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
}

#errorMessagePageDisabler__div {
    position: absolute;
    text-align: justify;
    background-color: black;
    border: 1px solid;
    width: 400px;
    height: 200px;
    overflow: scroll;
    overscroll-behavior: contain; /* Knowing about this property comes from: https://getcssscan.com/blog/prevent-page-scrolling-while-scrolling-div-element */
    padding: 10px;
}

#errorMessagePageDisabler__div ul { 
    margin: 0;
    padding: 0 0 0 20px;
    text-align: left;
}

#errorMessagePageDisabler__div ul li { white-space: pre-wrap; }

#errorMessagePageDisabler__div ul li:not(:last-child) { margin-bottom: 10px; }

/* Ditto */
.showMenuDespitePageDisabler {
    position: relative;
    z-index: 4;
}

#calendarIsLoading {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 50px;
}

#calendarIsLoading__waitingImage { width: 50px; }

#calendarIsLoading__waitingImage .ldio-56zolaemp7u { transform: scale(0.35); }

/* General categories include things like: displayNone, visibilityHidden, textAlignLeft */

/**************************** paycheck_calendar.html **************************/

.calendar__calendarBackbone__month__day--coins {
    background-image: url('/photos/vectors/coins.svg'); /* Cite where this image came from. */
    background-size: 120px 120px;
    background-position: bottom;
}

.calendar__calendarBackbone__month__day--noEntry--coins {
    background-color: #0c1414;
    background-color: rgba(95, 158, 160, 0.1);
    /*background-image: url('/photos/vectors/transparent_x--coins.svg'); /* Cite where part of this image came from. */
    background-image: url('/photos/vectors/transparent_x--coins--zoomed.svg');
}

/**************************** car_wash_calendar.html **************************/

#calendarExplanation__wheelsOfFateContainer {
    margin: 10px auto 10px auto;
    width: 325px;
    height: 325px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 1px solid #4D7F82;
}

#calendarExplanation__wheelsOfFateContainer img { width: 300px; }

/***************************** journal.html ***********************************/

#calendar__journalEntryBackbone {
    width: 700px;
    margin: -22.5px auto auto auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar__journalEntryBackbone__arrow {
    width: 80px;
    transform: scaleY(1.25);
}

#calendar__journalEntryBackbone__journalEntryAndExitContainer { margin: 0 10px 0 10px; }

#calendar__journalEntryBackbone__journalEntryAndExitContainer__exitButton {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    background-color: black;
    border-color: #142b2b;
    border: 1px solid rgba(95, 158, 160, 0.25);
    color: inherit;
    position: relative;
    margin-bottom: -23px;
    left: 414px;
    z-index: 1;
}

#calendar__journalEntryBackbone__journalEntryAndExitContainer__entryContainer {
    width: 435px;
    border-color: #142b2b;
    border: 1px solid rgba(95, 158, 160, 0.25);
    background-color: black;
    font-size: 20px;
    height: 444px;
    overflow-y: scroll;
}

#calendar__journalEntryBackbone__journalEntryAndExitContainer__entryContainer__entry {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 20px;
    padding-bottom: 20px;
}

#calendar__journalEntryBackbone__journalEntryAndExitContainer__entryContainer__entry__date {
    align-self: center;
    font-size: 30px;
    text-decoration: underline;
}

#calendar__journalEntryBackbone__journalEntryAndExitContainer__entryContainer__entry__list { 
    text-align: left; 
    margin: 20px 15px 0 0;
    overflow-x: hidden;
}

/*.calendar__journalEntryBackbone__journalEntryAndExitContainer__entryContainer__entry__list_li { word-wrap: break-word; }*/

.calendar__journalEntryBackbone__journalEntryAndExitContainer__entryContainer__entry__list_li:not(:last-child) { margin-bottom: 25px; }

.calendar__journalEntryBackbone__journalEntryAndExitContainer__entryContainer__entry__list_li > img { 
    display: block;
    width: 100%;
}

#calendar__journalEntryBackbone__journalEntryAndExitContainer__entryContainer__entry__nonexistent { 
    margin: 25px 0 0 0; 
    text-align: center;
}

#calendar__journalEntryBackbone__journalEntryAndExitContainer__entryContainer__entry__nonexistent__div { 
    width: 85%; 
    margin: auto;
}

.calendar__journalEntryBackbone__journalEntryAndExitContainer__entryContainer__entry__nonexistent__img {
    width: 300px;
    height: 300px;
}

.calendar__journalEntryBackbone__journalEntryAndExitContainer__entryContainer__entry__nonexistent--DIV-and-IMG {
    display: flex;
    flex-direction: column;
    align-items: center;
}

li img { width: 100%; }

/******************************* mr_fate.html *********************************/

#mrFateTitle {
    font-size: 50px;
    text-align: center;
    margin-top: 25px;
}

#connectWithMrFate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 820px;
    margin: 10px auto auto auto;
}

#connectWithMrFate__explanation {
    font-size: 22px;
    width: 230px;
    position: relative;
    bottom: 39px;
}

#connectWithMrFate__profile {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#connectWithMrFate__profile__imageContainer {
    /* mr_fate_image_background.svg is my creation; I (Mr. Fate) made this graphic. */
    background-image: url(photos/vectors/mr_fate_image_background.svg);
    background-repeat: no-repeat;
    width: 314px;
    height: 314px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#connectWithMrFate__profile__imageContainer__img {
    width: 300px;
    border-radius: 50%;
    border: 2px solid black;
}

#connectWithMrFate__profile__saying { margin-top: 10px; }

#connectWithMrFate__profile__name {
    font-size: 35px;
    position: relative;
    top: 7px;
}

#connectWithMrFate__socialMedia {
    position: relative;
    width: 260px;
    bottom: 39px;
}

.connectWithMrFate__socialMedia__container {
    display: flex;
    width: 300px;
    height: 100px;
    align-items: center;
}

.connectWithMrFate__socialMedia__container a {
    text-decoration: none;
    font-size: 70px;
    color: #4D7F82;
}

.connectWithMrFate__socialMedia__container__dottedLine {
    width: 157px;
    border-bottom: 5px dashed #4D7F82;
    margin-right: 10px;
}

#mrFateContent_Part1 {
    margin: auto;
    margin-top: 25px;
    display: flex;
    width: 85%;
    min-height: 459px;
    max-width: 1175px;
}

#mrFateWithClickableBeardContainer {
    display: flex;
    flex-direction: column;
    width: 368px;
    align-items: center;
    font-size: 25px;
}

#mrFateContainerForClickableBeard { margin-top: 75px; }

#mrFateHairContainer { /* !!! */
    position: absolute;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin-bottom: 8em;
}

#clickBeardMessageContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 7em;
    width: 2.5em;
    height: 2.5em;
}

#clickBeardMessageContainer img { width: 100%; }

#startOfMrFateBackstory {
    font-size: 22px;
    flex: 1;
}

#mrFateContent_Part2 {
    font-size: 22px;
    width: 85%;
    margin: auto;
    max-width: 1175px;
}

#mr_fate_dialogue_when_beard_is_gone {
    font-size: 24px;
    text-align: center;
    margin-top: 60px;
    width: 340px;
}

/*#regrowMrFatesBeard {
    width: 300px;
    height: 50px;
    font-size: 24px;
    color: #77BFBF;
    border: 3px solid #405C6B;
    border: 3px solid rgba(119, 191, 191, 0.25);
    background-color: #2C3A4D;
    z-index: 100;
    position: relative;
    cursor: pointer;
}*/

#regrowMrFatesBeard {
    font-size: 24px;
    width: fit-content;
}

.leyeStyle { height: 0.95em; }

.cEyeStyle {
    left: 0.335em;
    top: 0.55em;
}

.reyeStyle {
    height: 0.95em;
    top: 1.15em; 
}

.wideEyed {
    animation-name: wide-eyed;
    height: 1.1em;
    top: 0.9em;
}

@keyframes wide-eyed {
    1% {
        top: 1.2em;
    }
    2% {
        top: 1.4em;
    }
    3% {
        top: 1.6em;
    }
    4%, 6% {
        top: 2em;
    }
    10% {
        top: 0.9em;
    }
}

.mouthStyle {
    height: 0.9em;
    width: 0.9em;
    left: 2.85em;
}

/* *************** Timekeeper of Fate *************** */

/* Any General Clock */

#clockContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32em;
    height: 32em;
    margin: auto;
}

#clockContainer #clock {
    width: 30em;
    height: 30em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 50%;
}

#clockContainer #clock div, #clockContainer .faceBox {
    border: 0;
    position: absolute;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    transform-origin: center bottom;
    transform: rotate(0deg);
}

#clockContainer #clock div img { height: 100%; }

#clockContainer #clock #hour {
    border-radius: 0.75em 0.75em 0 0;
    width: 1.5em;
    height: 6em;
    top: 9em;
    display: flex;
    justify-content: center;
}

#clockContainer #clock #minute {
    border-radius: 0.5em;
    width: 1em;
    height: 11em;
    top: 4em;
    transform: rotate(-36deg);
    display: flex;
    justify-content: center;
}

#clockContainer #clock #second {
    border-radius: 0.25em;
    width: 0.5em;
    height: 14em;
    top: 1em;
    transform: rotate(45deg);
    display: flex;
    justify-content: center;
}

#clockContainer #clock #center {
    height: 2em;
    width: 2em;
    border-radius: 50%;
    transform: rotate(0deg);
    background-color: #4D7F82;
}

#clockContainer .smallTick {
    width: 0.1em;
    height: 0.5em;
    background-color: #4D7F82;
    margin: 0 1.45em;
}

#clockContainer .mediumTick {
    height: 0.8em;
    background-color: #4D7F82;
    margin: 0 1.45em;
    width: 0.9em;
    left: -0.4em;
}

#clockContainer .largeTick {
    height: 0.8em;
    background-color: #4D7F82;
    position: relative;
    margin: 0 1.45em;
    width: 1.8em;
    left: -0.85em;
}

#clockContainer .tickNum {
    font-family: inherit;
    font-size: 2.3em;
    line-height: 0;
    position: relative;
    top: 1.2em;
    width: fit-content;
}

#clockContainer div.faceBox {
    border: 0;
    width: 3em;
    height: 15em;
    top: 0;
    position: absolute;
    text-align: center;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Timekeeper of Fate Clock */

.timekeeperOfFate__clockContainer {
    /* clockBorder_1.svg is my creation; I (Mr. Fate) made this graphic. */
    background-image: url('photos/vectors/clockBorder_1.svg'); /* rename this clock border */
    background-repeat: no-repeat;
    border-radius: 50%;
    transform: scale(0.85);
}        
        
.timekeeperOfFate__clockContainer #clock {
    border: solid 5px black;
    background-color: black;
}

.timekeeperOfFate__clockContainer #clock #hour img { transform: scaleX(3); }

.timekeeperOfFate__clockContainer #clock #second img { transform: scaleX(0.5); }

/* Countdown Timer */

#timekeeperOfFate__doingOfFateContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}

/* It seems like something else will share these properties later on. */
#timekeeperOfFate__doingOfFateContainer__doingOfFate {
    font-size: 22px;
    width: 750px;
    margin: auto;
}

#timekeeperOfFate__doingOfFateContainer__doingOfFate {
    text-align: center;
    margin-bottom: 25px;
}

.timekeeperOfFate__doingOfFateContainer__countdownTimer { margin-bottom: 25px; }

.timekeeperOfFate__doingOfFateContainer__countdownTimer__base-timer {
    position: relative;
    width: 400px;
}

.timekeeperOfFate__doingOfFateContainer__countdownTimer__base-timer__svg {
    /* Flips the svg and makes the animation to move left-to-right */
    transform: scaleX(-1);
    border: 1px solid #4D7F82;
    background-color: #1A3436;
    opacity: 0.4;
}

.timekeeperOfFate__doingOfFateContainer__countdownTimer__base-timer__svg__g__path-remaining {
    stroke-width: 24px;
    stroke-linecap: butt;
    transform-origin: center;
    /* One second aligns with the speed of the countdown timer */
    transition: 1s linear all;
    stroke: #4D7F82;
}

.timekeeperOfFate__doingOfFateContainer__countdownTimer__base-timer__label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #1A3436;
}

/***************************** Pages with #clickableSquares *******************************/

#clickableSquaresIntro {
    width: 800px;
    margin: 25px auto auto auto;
    text-align: center;
    font-size: 16px;
    display: flex;
    flex-direction: column;
}

#clickableSquaresIntro__title { font-size: 25px; }

#clickableSquares {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 25px;
}

.clickableSquare {
    padding: 7px;
    font-size: 20px;
    width: 300px;
    height: 300px;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow-y: scroll;
    background-color: #242424;
    text-align: center;
    outline: 3px solid #171f28;
    border: 9px solid black;
}

.clickableSquare--unclicked {
    background: url(/photos/vectors/clover_dice.svg), black;
    background-size: 720px 860px;
}

.clickableSquare--unclicked--verticallyCenteredText { justify-content: center; }

.clickableSquare__imageContainer {
    background-color: black;
    height: 225px;
    min-height: 225px;
    overflow: hidden;
}

.clickableSquare a { 
    color: inherit; 
    text-decoration: none;
    width: fit-content;
    margin: 0 auto 0 auto;
}

.clickableSquare a:hover { background-color: #171f28; }

.clickableSquare__list {
    margin: 0;
    text-align: left;
}

.clickableSquare > div, .clickableSquare > a, .clickableSquare > ul, .clickableSquare > ol, .clickableSquare > span:not(:last-child) { margin-bottom: 12px; }

.pair_of_socks {
    width: 100%;
    margin-top: -45px;
}

.santa_s_lump_of_coal {
    width: 100%;
    height: 92.5%;
    margin: 10px 0 10px 0;
}

.raindrops_on_windshield { width: 100%; }

.grim_reaper_thumbs_up_transparent {
    width: 100%;
    height: 93%;
    margin: 10px 0 10px 0;
}

.pleasure_finger {
    width: 250px;
    height: 250px;
    margin-top: -13.5px;
}

.duck_drowning_in_bathtub {
    width: 100%;
    height: 100%;
}

.menstruation_pad {
    width: 250px;
    height: 250px;
    margin-top: -15px;
}

.clueless_shit {
    width: 100%;
    height: 93%;
    margin-top: 10px;
}

/* ********** a_rainstorm_of_depressive_masochistic_raindrops.html ********** */

#rainstorm_preface_part_one, #rainstorm_preface_part_two {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 25px;
    font-size: 25px;
}

#exampleRaindropVectorContainer {
    width: 700px;
    height: 400px;
    margin: 20px 0 0 0;
    overflow: hidden;
}

#exampleRaindrop {
    transform: scale(1.3);
    position: relative;
    top: -47px;
}

#exampleDialogue {
    transform: scale(1.75);
    position: relative;
    top: -600px;
    left: 235px;
}

#beginTheDownpour { 
    width: 217px; 
    margin: 25px auto 25px auto;
}

#beginTheDownpour, #continueTheDownpour, #escapeTheDownpour, #informTheDownpour, #submitRaindropDialogueSuggestion {
    height: 51px;
    font-size: 23px;
    padding: 5px 0 5px 0;
    border: 2px solid #161D26;
    font-family: 'Crimson Text';
    box-shadow: 0 0 1px 1px #4d7f82;
    background-color: #353E49;
}

#continueTheDownpour, #escapeTheDownpour, #informTheDownpour, #submitRaindropDialogueSuggestion { 
    width: 250px; 
    margin-bottom: 10px;
}

#beginTheDownpour:hover, #continueTheDownpour:hover, #escapeTheDownpour:hover, #informTheDownpour:hover, #submitRaindropDialogueSuggestion:hover {
    background-color: #4A423D; 
    cursor: pointer;
}

#theDownpour {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 620px;
    overflow: hidden;
}

#currentRaindrop {
    width: 500px;
    height: 500px;
    position: relative;
    right: 85px;
}

#currentDialogue {
    transform: scale(1.75);
    position: relative;
    top: -450px;
    left: 150px;
}

#raindropFormContainer {
    width: 350px; 
    text-align: center;
    padding: 0 10px 10px 10px;
}

#raindropFormDirections {
    font-size: 25px; 
    margin: 0 0 12px 0;
}

#getSuggestion {
    width: 250px;
    padding: 0;
    height: 51px;
    background-color: #4D7F82;
    border: 1px solid #4D7F82;
    font-size: 23px;
    margin-bottom: 10px;
    font-family: 'Crimson Text';
    text-align: center;
}

#raindropSubmissionThankYou {
    font-size: 25px;
    margin-bottom: 10px;
}

.cluelessRaindrop { transform: scale(1.5); }

.unpleasantlySurprisedRaindrop { transform: scale(1.2); }

.surprisedRaindrop_2 { transform: scale(1.4); }

.descendingRaindrop {
    animation-name: descendingRaindrop;
    animation-duration: 3.5s;
    animation-fill-mode: forwards;
}

@keyframes descendingRaindrop {
    from { margin-top: -800px; }
    to { margin-top: 20px; }
}

/* **************************** Sexified Fruit ****************************** */

#foodExplanation {
    font-size: 22px;
    text-align: center;
    margin: auto;
    width: 830px;
    margin-top: 25px;
}

#foodProfile {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin: 20px auto 25px auto;
}

#foodProfile__img {
    width: 300px;
    margin-bottom: 20px;
}

#foodProfile__name { font-size: 50px; }

#foodProfile__listAndCatchPhraseGenerator {
    font-size: 30px;
    width: 628px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#foodProfile__listAndCatchPhraseGenerator__list {
    width: 380px;
    margin: 15px 0 15px 0;
}

#foodProfile__listAndCatchPhraseGenerator__catchPhraseGenerator {
    display: flex;
    margin-top: 15px;
    align-items: center;
}

#foodProfile__listAndCatchPhraseGenerator__catchPhraseGenerator__catchPhrase {
    text-align: justify;
    padding: 0 10px 0 10px;
}

.foodProfile__listAndCatchPhraseGenerator__catchPhraseGenerator__arrow { width: 75px; }

/********************** making_a_mockery_of_life.html *************************/

.content__handcraftedListElement__content__mockeryExperience { margin: 25px 0 10px 0; }

.content__handcraftedListElement__content__mockeryExperience--yetToCome {
    font-style: italic;
    color: #325354;
    color: rgba(77, 127, 130, 0.65);
}

.content__handcraftedListElement__content__mockeryPlan__proofHidden { font-size: 17px; }

.content__handcraftedListElement__content__mockeryPlan__difficultyLevel {
    padding: 0 3px 0 3px;
    font-style: italic;
    font-weight: 700;
}

.content__handcraftedListElement__content__mockeryPlan__difficultyLevel--easy { color: #094520; }
        
.content__handcraftedListElement__content__mockeryPlan__difficultyLevel--medium { color: #453906; }

.content__handcraftedListElement__content__mockeryPlan__difficultyLevel--hard { color: #521A17; }

#content__handcraftedListElement__content__mockeryExperience__tinderProfileContainer {
    width: 685px;
    display: flex;
    justify-content: space-evenly;
    margin: auto;
}

/* ************************* image_gallery.html ***************************** */

#imageGalleryIntro {
    font-size: 50px;
    margin: 25px auto 25px auto;
    text-align: center;
}

#imageGallery {
    border: 5px double;
    width: 450px;
    margin: auto auto 25px auto;
    outline: 4px dotted;
    box-shadow: 0 0 0 2px;
}

#imageGallery__pictureContainer {
    height: 450px;
    display: flex;
    justify-content: center;
}

#imageGallery__pictureContainer__picture {
    display: flex;
    justify-content: center;
    align-items: center;
    height: inherit;
}

#imageGallery__navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #161D26;
    height: 98px;
    border-top: 2px solid;
}

.imageGallery__navigation__arrow {
    width: 70px;
    height: 70px;
}

#imageGallery__navigation__pictureInformation {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    width: 350px;
    text-align: center;
}

/* ************************* little_doodads.html **************************** */

#littleDoodadsDateWritten {
    display: block;
    text-align: center;
}

#doodadsContainer {
    display: flex;
    justify-content: center;
}

.doodads {
    display: flex;
    flex-direction: column;
    width: 380px;
    margin: 0 60px 0 0;
}

.doodad {
    border: 4px solid #2C3A4D;
    margin: 17px;
    font-size: 22px;
    padding: 10px;
    background-color: #161D26;
    outline: 2px dashed;
    box-shadow: 0 0 0 1.5px;
    min-width: 375px;
    text-align: center;
}

.doodadExitContainer { 
    height: 0;
    position: relative;
    left: 370px;
    bottom: 35px;
}

.doodadExit { 
    border: 1px solid #4D7F82;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 39px;
    height: 39px;
    background: black;
    border-radius: 50%;
    cursor: pointer;
}

.doodadExit div { 
    font-family: sans-serif;
    font-size: 40px;
    position: relative;
    bottom: 3.5px;
    font-weight: 100;
}

.doodadInputAndSubmit {
    display: flex;
    justify-content: center;
    align-items: center;
}

.doodad input {
    background-color: #4D7F82;
    border: none;
    height: 25px;
    font-size: 20px;
    margin-right: 10px;
    padding-left: 5px;
    font-family: 'Crimson Text';
}

.doodadMultipleInputs {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-end;
}

.doodad .submit, .doodadTryAgain {
    background-color: black;
    color: #4D7F82;
    font-size: 25px;
    border: none;
    cursor: pointer;
    font-family: 'Crimson Text';
}

.doodadMultipleInputs:not(:first-child), .doodadMessageContainer:not(:first-child) { margin-top: 15px; }

.doodadInsultingMessage {
    border-bottom: 3px solid;
    width: 300px;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.addAnotherDoodadInput {
    font-size: 40px;
    height: 35px;
    cursor: pointer;
}

.removeAddedDoodadInput {
    width: 0;
    font-weight: bold;
    transform: scale(1.35);
    position: relative;
    bottom: 2px;
    cursor: pointer;
}

.awaiting {
    display: flex;
    margin: 0;
    position: relative;
    right: 5px;
}

/* *** pages which contain tidbits: nonsensical_tidbits_of_gibberish.html & stories.html *** */

.tidbitIntroduction {
    font-size: 25px; 
    text-align: center; 
    margin-bottom: 50px;
}

.tidbits__tidbit {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: 10px solid #161d26;
    margin: auto;
}

.tidbits__tidbit:not(:first-child) { margin-top: 25px; }

.tidbits__tidbit__message {
    width: 100%;
    margin: 10px;
    outline: 10px solid black;
    background-color: #261A22;
    box-shadow: 0 0 0 10.5px #4d7f82;
}

.tidbits__tidbit__message__imageAndText {
    height: 300px;
    display: flex;
}

.tidbits__tidbit__message__imageAndText img {
    flex: none; 
    width: 300px;
    height: 300px;
    background-color: black;
}

.tidbits__tidbit__message__imageAndText > *:first-child { border-right: 10px solid black; }

.tidbits__tidbit__message__imageAndText p, .tidbitContainsList {
    text-align: center;
    overflow-y: scroll;
    font-size: 25px;
    margin: 0 10px 0 10px;
    width: 0;
    transition: width 1s;
    scroll-behavior: smooth;
}

.tidbits__tidbit__title {
    font-size: 60px;
    text-align: center;
    margin: 0;
    padding: 0 10px 0 10px;
    margin-top: -325px;
    z-index: 1;
    margin-left: 320px;
}

.tidbits__tidbit__subtitle {
    font-size: 20px;
    display: block;
}

.tidbits__tidbit__title a:hover, .tidbits__tidbit__message__imageAndText a:hover { text-decoration: underline #556980 solid; }

/* **************************** Tea Appraisals ****************************** */

/* 
~ Partial implementation of BEM ~
I use ids as well as generic classes that are commonly used around this website (ex. displayNone). If the class sounds generic enough, I will use it. I also use nested selectors to target descendent elements.
*/

#rankableList {
    max-width: 1350px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin: 25px auto auto auto;
    position: relative;
}

.rankableList--editMode { border: 1px solid #161D26; }

.rankableList--populated { padding-top: 40px; }

.rankableList--unpopulated { padding-top: 0; }

#rankableList__emptyListMessage {
    font-size: 22px;
    height: 100px;
    display: flex;
    align-items: center;
}

.rankableList__arrow {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0.3;
    width: 50px;
    z-index: 1;
    height: 344px;
    overflow: hidden;
}

.rankableList__arrow img { 
    height: 100px; 
    cursor: pointer; 
}

.rankableList__element {
    width: 260px;
    height: 340px;
    display: flex;
    border: 2px dashed #2a2a2a;
    background-color: #2a2a2a;
    justify-content: center;
    z-index: 2;
    opacity: 100;
    transition: opacity 0.25s;
    margin-bottom: 40px;
}

.rankableList__element--quickTransition { transition: opacity 0.1s; }

.rankableList__element--selected { z-index: 3; }

.rankableList__element__movableLayer {
    width: inherit;
    height: inherit;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: inherit;
    z-index: 2;
    border: 2px dotted;
    background-color: #261A22;
    top: -2px;
    margin: 0;
    position: relative;
}

.rankableList__element__movableLayer--shrink { transform: scale(0.5); }

.rankableList__element__movableLayer--returnToOriginalPosition { 
    top: -2px !important;
    left: 0 !important;
    transition: left 0.5s, top 0.5s;
}

.rankableList__element__movableLayer__exitContainer {
    height: 0;
    position: relative;
    left: 131px;
    bottom: 17px;
}

.rankableList__element__movableLayer__exitContainer__exit {
    border: 1px solid #4D7F82;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background: black;
    border-radius: 50%;
    cursor: pointer;
}

.rankableList__element__movableLayer__exitContainer__exit__x {
    font-family: sans-serif;
    font-size: 25px;
    position: relative;
    bottom: 2.5px;
    font-weight: 100;
}

.rankableList__element__movableLayer__scrollableContainer {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 220px;
    height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px;
}

.rankableList__element__movableLayer__scrollableContainer__content {
    width: inherit;
    height: 300px;
    /* min-height: 300px; ??? */
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: inherit;
    position: relative;
    justify-content: center;
}

/*.rankableList__arrow, .rankableList__element__movableLayer, .rankableList__element__movableLayer__exitContainer, .rankableList__element__movableLayer__scrollableContainer__content*/

.rankableList__element__movableLayer__scrollableContainer__content__name { 
    margin-top: 5px; 
    line-height: 23px;
}

.rankableList__element__movableLayer__scrollableContainer__content__name__overflowArrow {
    display: block;
    width: fit-content;
    margin: auto;
}

.rankableList__element__movableLayer__scrollableContainer__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    width: inherit;
}

.rankableList__element__movableLayer__scrollableContainer__form__fieldContainer {
    display: flex;
    flex-direction: column;
    margin: 4px;
    overflow-x: scroll;
    scroll-behavior: smooth;
}

.rankableList__element__movableLayer__scrollableContainer__form__fieldContainer__input {
    background-color: #3b484e;
    background-color: rgba(95, 158, 160, 0.35);
    text-align: center;
    font-family: 'Crimson Text';
    width: 211px;
    border: none;
    height: 20px;
    font-size: 20px;
}

.rankableList__element__movableLayer__scrollableContainer__form__submitContainer__submit {
    font-size: 20px;
    display: inline-block;
    margin-top: 15px;
    font-family: 'Crimson Text';
    font-weight: bold;
    letter-spacing: 1px;
    border: none;
    padding: 6px;
    color: #261A22;
    background-color: #4D7F82;
}

#rankableListEditOptions {
    font-size: 22px;
    display: flex;
    justify-content: center;
    margin-top: 25px;
    flex-direction: column;
    align-items: center;
}

#rankableListEditOptions__buttons {
    display: flex;
    margin: 25px 0 25px 0;
}

.rankableListEditOptions__button {
    background-color: #4D7F82;
    color: black;
    border-radius: 15px;
    padding: 9px;
    cursor: pointer;
    margin: 0 5px 0 5px;
}

#rankableListTraversableHistory {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 22px;
}

#rankableListTraversableHistory > div:first-child {
    /* Selects only the first div of #rankableListTraversableHistory element. > prevents css from selecting descendent first-divs that are further down. */
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 500px;
    overflow-y: scroll;
}

#rankableListTraversableHistory__history {
    width: 100%;
    height: 300px;
}

#rankableListTraversableHistory__history ol:first-child {
    margin: 0;
    padding: 0 0 1px 0;
}

#rankableListTraversableHistory__history ol:first-child > li {
    /* Only affects the main numbered list of actions */
    list-style-position: inside;
    padding-left: 5px;
    border-width: thick;
    border-style: solid;
    border-color: black;
    border-top: none;
    border-bottom: none;
}

#rankableListTraversableHistory__history__ol__li--currentPosition {
    border-color: fuchsia !important;
    outline: 1px solid fuchsia;
    scroll-margin: 1px;
}

.rankableListTraversableHistory__history__listElement--inoperable {
    text-decoration: line-through;
    text-decoration-color: fuchsia;
}

.rankableListTraversableHistory__history__listElement__submissionData__title {
    flex: 1;
    text-align: right;
    margin-right: 10px;
}

.rankableListTraversableHistory__history__listElement__submissionData__substance { flex: 3; }

.rankableListTraversableHistory__history__listElement__submissionData__substance--explanation {
    display: flex;
    flex-direction: column;
}

.rankableListTraversableHistory__history__listElement__submissionData__substance__ul {
    padding: 0;
    margin: 0;
}

.rankableListTraversableHistory__history__listElement__submissionData__substance__ul__li {
    list-style-type: none;
    padding: 0;
    border: none;
}

.rankableListTraversableHistory__history__listElement__submissionData__substance__ul__li__originalNumber { color: royalblue; }

.rankableListTraversableHistory__history__listElement__submissionData__substance__ul__li__newCurrentNumber { color: goldenrod; }

.rankableListTraversableHistory__history__listElement__permanentlySubmittedElement {
    list-style-type: none;
    color: fuchsia;
}

.rankableListTraversableHistory__history__listElement__permanentlySubmittedElement__title { list-style-type: disc; }

/* ***** Loading spinner CSS source: https://loading.io/spinner/spinner ***** */
@keyframes ldio-56zolaemp7u {
  0% { opacity: 1 }
  100% { opacity: 0 }
}
.ldio-56zolaemp7u div {
  /*left: 111.39px;
  top: 50.955000000000005px;*/
  top: -68px;
  position: absolute;
  animation: ldio-56zolaemp7u linear 1s infinite;
  background: #93dbe9;
  width: 14.22px;
  height: 45.03px;
  border-radius: 7.11px / 22.515px;
  transform-origin: 7.11px 67.545px;
}.ldio-56zolaemp7u div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -0.9166666666666666s;
  background: #93dbe9;
}.ldio-56zolaemp7u div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -0.8333333333333334s;
  background: #689cc5;
}.ldio-56zolaemp7u div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.75s;
  background: #5e6fa3;
}.ldio-56zolaemp7u div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.6666666666666666s;
  background: #3b4368;
}.ldio-56zolaemp7u div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.5833333333333334s;
  background: #191d3a;
}.ldio-56zolaemp7u div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.5s;
  background: #d9dbee;
}.ldio-56zolaemp7u div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.4166666666666667s;
  background: #b3b7e2;
}.ldio-56zolaemp7u div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.3333333333333333s;
  background: #93dbe9;
}.ldio-56zolaemp7u div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.25s;
  background: #689cc5;
}.ldio-56zolaemp7u div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.16666666666666666s;
  background: #5e6fa3;
}.ldio-56zolaemp7u div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.08333333333333333s;
  background: #3b4368;
}.ldio-56zolaemp7u div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
  background: #191d3a;
}
.loadingio-spinner-spinner-oqgsq6pn0f {
  /*width: 237px; got rid of this*/
  overflow: hidden;
  background: none;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /*width: 64px; /* used for testing */
}
.ldio-56zolaemp7u {
  /*width: 100%; got rid of this*/
  position: relative;
  /*transform: translateZ(0) scale(1); got rid of this*/
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
}
.ldio-56zolaemp7u div { box-sizing: content-box; }
/* ************************************************************************** */

.positionRelative { position: relative; } /* I don't think this is used anywhere */

/* ******************************* http://silentwyrd.com/how_to_send_an_email_from_the_mac_terminal_using_a_hostgator_domain_and_mailtrap.html ********************************** */

.content {
    font-size: 22px;
    width: 90%;
    margin: auto;
}

.displayOnSameLine {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 750px;
}

.content__subsection { margin-bottom: 1em; }

.content__subsection li { margin-bottom: 15px; }

.content__subsection__triangle {
    margin-right: 10px;
    font-size: 20px;
    cursor: pointer;
}

.content__handcraftedListElement {
    display: flex;
    margin-bottom: 15px;
}

.content__handcraftedListElement__bulletPoint--checkmark {
    width: 30px;
    height: 35px;
    margin: -5px 5px 0 0;
}

.content__handcraftedListElement__bulletPoint--bulletPoint_rgb_77_127_130 {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #4D7F82;
    margin: 4px 14px 0 5px;
}

.content__img, .content__video {
    display: block;
    margin: 10px 0 10px 0;
    max-width: 590px;
}

.content__img.width300px { width: 300px; }

.content__hr {
    border: none;
    border-bottom: 3px solid #4D7F82;
    margin: 25px auto 25px auto;
}

.--wrongThinking, .--rightThinking { padding-left: 10px; }

.--wrongThinking { border-left: 10px solid red; }

.--rightThinking { border-left: 10px solid green; }

.ul--error-list > li {
    list-style-type: '❌ '; /* There is no way to adjust the spacing between the bullet point and the border. */
    padding-left: 10px;
    /* Knowing how to do a gradient border on one side comes from https://codepen.io/erikmartinjordan/pen/MVPaNW */
    border: 0px;
    border-left: 4px solid;
    border-image: linear-gradient(to bottom, #000 15%, #f00, #000 85%);
    border-image-slice: 1;
}

.ul--error-list > li:last-child { margin-bottom: 0; }

/* Knowing how to vertically align the bullet comes from https://idkshite.com/posts/vertical-center-bullet */
.ul--error-list > li > span {
    display: inline-block;
    vertical-align: middle;
}

li.check-mark {
    list-style-type: '✓';
    color: darkgreen;
    padding-left: 10px;
}

li.check-mark span { color: #4D7F82; }

.list--headings > li::marker { font-weight: bold; }

.list--h3-headings > li::marker { font-size: 1.17em; }

.list--h4-headings > li::marker { font-size: 1em; }

/* ****************************** New General ******************************* */

.visibilityHidden { visibility: hidden !important; } /* !important needed to counteract #journalEntryBackbone, #journalEntry_LeftArrow, #rightArrow (sexified fruit), etc. */

.displayNone { display: none !important; } /* !important necessary to counteract #mrFateOuterContainer, #silentWyrdEntireLogo, #insultDropdown, etc. 
Classes like this one are commonly used. Its name is quite simple and is applicable to a wide variety of elements, whenever the need arises. For more specific classes that only pertain to one or two elements, I will get rid of those and use BEM to make this page more maintainable. Classes like .width58px should be eliminated, and BEM should be used instead.
*/

.opacity0 { opacity: 0; }

.textDecorationNone { text-decoration: none; }

.textAlignCenter { text-align: center; } /* javascript file */

.textAlignLeft { text-align: left; } /* javascript file...little doodads -> incorrectInputError...NTG */

.color_fuchsia { color: fuchsia; } /* tutorials, journal */

.cursorPointer { cursor: pointer; } /* nearly all pages */

.notDraggableOrSelectable { 
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.loadingContentPageDisabler {
    position: fixed;
    top: 0;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.75);
}

.loadingContentPageDisabler .ldio-56zolaemp7u { right: 7px; }

.showMenuDespiteLoadingContentPageDisabler {
    position: relative;
    z-index: 5;
}

.invisibleInputField {
    position: fixed;
    top: 0;
    pointer-events: none;
    opacity: 0;
}

/* ***************************** Multiple-use ******************************* */

.clickableSquare__date, #imageGallery__navigation__pictureInformation__date {
    color: #3B5A5C;
    color: rgba(68, 113, 115, 0.7);
}

/* ******************************* General ********************************** */

/* These classes were removed from journal entries: .textDecorationNone && .color_fuchsia */

/* Get rid of this. */
/*.contentTitle { /* applies to various pages *
    font-size: 50px;
    text-align: center;
    margin-top: 25px;
}*/

.title {
    font-size: 50px;
    text-align: center;
    width: 90%;
    margin: 25px auto;
}

.title__subtitle { font-size: 35px; }

.date {
    text-align: center;
    margin-bottom: 25px;
}

.buttonForBlackBackground { /* how_many_days_has_fate_allowed_you_to_live.html Try It Again */
    background-color: black;
    height: 50px;
    font-size: 30px;
    width: 175px;
    border: 3px solid #1e3030;
    border: 3px solid rgba(119, 191, 191, 0.25);
    display: block;
    margin: auto;
    font-family: 'Crimson Text', serif;
    color: #4D7F82;
    cursor: pointer;
    margin-bottom: 25px;
}

.displayFlex { display: flex; } /* #loginSubmitAndExit */

.flexDirectionColumn { flex-direction: column; } /* Little Doodads multiple inputs container */

/* Get rid of this. */
.displayFlex_FlexDirectionColumn_AlignItemsCenter { /* normally used with leading page title & information */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.displayBlock { display: block; }

.displayContents { display: contents; } /* raindrops page */

.widthFitContent { width: fit-content; } /* Stories */

.width52px { width: 52px; } /* Little Doodads */

.width300px { width: 300px; }

/*.width500px { width: 500px; } /* http://silentwyrd.com/how_to_send_an_email_from_the_mac_terminal_using_a_hostgator_domain_and_mailtrap.html */

.width100Percent { width: 100% !important; } /* Journal Entry Pictures; .way */

.width100pxHeight100px { /* #passwordLock & #passwordLock img */
    min-width: 100px;
    width: 100px;
    height: 100px;
}

.width200pxHeight200px { /* #silentWyrdSymbolSecondChild */
    width: 200px;
    height: 200px;
}

.width500pxHeight500px { /* #fallingRaindropOuterContainer */
    width: 500px;
    height: 500px;
}

.height0 { height: 0; }

.height100Percent { height: 100% !important; } /* NTG...!important needed to override p selector */

/* No longer used because Data_Calendar no longer has any clickable days. */
.blurContent { /* data calendars */
    -webkit-filter: blur(8px) !important;
    -moz-filter: blur(8px) !important;
    -o-filter: blur(8px) !important;
    -ms-filter: blur(8px) !important;
    filter: blur(8px) !important;
    transition: filter 0.75s;
}

.marginAuto { margin: auto; }

.marginTop0 { margin-top: 0; } /* Little doodads multiple inputs; !important necessary to counteract input selector */

.marginTop10px { margin-top: 10px; } /* I give the bird and say not a word */

.marginTop15px { margin-top: 15px; } /* Little Doodads */

.marginTop25px { margin-top: 25px; } /* */

.marginTop30px { margin-top: 30px; } /* #raindropOptions */

.marginBottom5px { margin-bottom: 5px; } /* #clickBeardMessageContainer img */

.marginBottom10px { margin-bottom: 10px; } /* Little Doodads */

.marginBottom15px { margin-bottom: 15px; } /* Little Doodads */

.marginBottom20px { margin-bottom: 20px; } /* Little Doodads */

.marginBottom22px { margin-bottom: 22px; } /* http://silentwyrd.com/how_to_send_an_email_from_the_mac_terminal_using_a_hostgator_domain_and_mailtrap.html */

/* Get rid of this. *
.marginBottom25px { margin-bottom: 25px; } /* javascript file */

/*.marginBottom30px { margin-bottom: 30px; } /* submit button for how many days has fate allowed you to live? */

.marginLeft10px { margin-left: 10px; } /* clock */

.marginRight5px { margin-right: 5px; } /* Little Doodads numbered inputs */

.marginRight10px { margin-right: 10px; } /* Tea Rankings ### */

.margin0padding0 { /* javascript file */
    margin: 0;
    padding: 0;
}

.positionInherit { position: inherit; } /* Little Doodads */

.overflowHidden { overflow: hidden; } /* #fallingRaindropContainer */

.overflowWrap_anywhere { overflow-wrap: anywhere; } /* Little Doodads */

.zIndex2 { z-index: 2; } /* NTG */

.fontSize50px { font-size: 50px; } /* "a ranstorm is coming" phrase */

.color_hexadecimal_4A423D { color: #4A423D; } /* #raindropFormDirections spans */

.color_hexadecimal_A30207 { color: #A30207; } /* #errorMessage how_many_days_has_fate_allowed_you_to_live.html */

.color_hexadecimal_859BCC { color: #859BCC; } /* Little Doodads user input shown after directions */

.textDecorationUnderline { text-decoration: underline; } /* Little Doodads */

.backgroundColor_hexadecimal_4A423D { background-color: #4A423D !important; } /* #informTheDownpour; !important necessary to counteract # */

.backgroundColor_hexadecimal_33040D { background-color: #33040D; } /* menstruation calendar day coloring */

.backgroundColor_hexadecimal_26030A { background-color: #26030A; } /* masturbation calendar day coloring */

.backgroundColor_hexadecimal_1c1713 { background-color: #1c1713; } /* defecation calendar day coloring */

.backgroundColor_hexadecimal_081C24 { background-color: #081C24; } /* day coloring for ablution, laundry, and car wash calendars */

/**************************** Media Queries ***********************************/

@media only screen and (max-width: 1360px) { 
    /*#rankableList { width: 1000px; }*/
    #rankableList { width: 995px; }
}

@media only screen and (max-width: 1011px) { 
    /*#rankableList { width: 720px; }*/
    #rankableList { width: 680px; }
}

@media only screen and (max-width: 697px) { 
    /*#rankableList { width: 395px; }*/
    #rankableList { width: 370px; }
}

@media only screen and (max-width: 1000px) { 
    #homepageNavigation #silentWyrdEntireLogo p { display: none; }
    #homepageNavigation #silentWyrdEntireLogo { 
        margin: 0 0 0 -4px; 
        width: fit-content;
        min-width: fit-content;
    }
    #homepageNavigation #silentWyrdEntireLogo #silentWyrdSymbol { margin: 0 35px 0 35px; }
}

@media only screen and (max-width: 945px) { 
    #doodadsContainer { 
        flex-direction: column; 
        align-items: center;
    }
}

/* !!! */
@media only screen and (max-width: 894px) {
    /*.content__img { width: 100%; }*/
}

@media only screen and (max-width: 860px) { 
    #foodExplanation { width: 100%; }
}

@media only screen and (max-width: 840px) { 
    #homepageNavigation #loginContainer #loginDirectionsAndInput { width: 400px; }
    #clickableSquaresIntro { width: 95%; }
}

@media only screen and (max-width: 840px) { 
    .tidbits__tidbit {
        width: 100%;
        height: auto;
        flex-wrap: nowrap;
        flex-direction: column;
        border: none;
    }
    .tidbits__tidbit__message {
        width: 320px;
        margin: 10px 10px 35px 10px;
        border: 0.5px solid #4d7f82;
        outline: 10px solid #161d26;
        box-shadow: none;
    }
    .tidbits__tidbit__title {
        font-size: 60px;
        text-align: center;
        padding: 0 10px 0 10px;
        color: #4D7F82;
        width: auto;
        text-shadow: 4px 0 #261a22;
        margin: initial;
    }
    .tidbits__tidbit__message__imageAndText {
        width: auto;
        height: 300px;
        min-height: 300px;
        border: 10px solid black;
    }
    /*.tidbits__tidbit__message__imageAndText:first-child { border-right: none; }*/
    .tidbits__tidbit__message__imageAndText p, .tidbitContainsList { 
        height: 0;
        transition: height 1s;
    }
}

@media only screen and (max-width: 790px) { 
    #content__handcraftedListElement__content__mockeryExperience__tinderProfileContainer { 
        flex-direction: column; 
        align-items: center;
        width: 100%;
    }
    #content__handcraftedListElement__content__mockeryExperience__tinderProfileContainer__tinderProfilePart1 { margin-bottom: 25px; }
}

@media only screen and (max-width: 770px) { 
    #homepageNavigation #loginContainer {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    #homepageNavigation #loginContainer #loginDirectionsAndInput { margin-bottom: 10px; }
}

/*@media only screen and (max-width: 690px) { */
@media only screen and (max-width: 853px) {
    .displayOnSameLine { 
        flex-direction: column; 
        width: 100%;
    }
}

@media only screen and (max-width: 650px) { 
    #stemsContainer { width: 90%; }
}

@media only screen and (max-width: 620px) { 
    #how_many_days_has_fate_allowed_you_to_live__fateAndDeathFYIandTMI { width: 90% !important; }
}

/*@media only screen and (max-width: 570px) { 
    .calendarForewarning { width: fit-content; }
}*/

@media only screen and (max-width: 550px) { 
    #how_many_days_has_fate_allowed_you_to_live__errorBox { width: 100% !important; }
}

@media only screen and (max-width: 545px) { 
    #homepageNavigation #loginContainer #loginDirectionsAndInput { width: 350px; }
}

@media only screen and (max-width: 522px) { 
    #insultingMessage { width: 375px; }
}