/* BASIC.CSS 
 * Defines the properties that are universally needed across 
 * all webpages. Fonts, link styling, basic text styling,
 * image classes, margins. */

@font-face {
    font-family: Bembo Bold;
    src: url(https://chatbot-fun.neocities.org/assets/fonts/BemboStd-Bold.otf);
    }
@font-face {
    font-family: Else NPL Bold;
    src: url(https://chatbot-fun.neocities.org/assets/fonts/ElseNPLStd-Bold.otf);
    }
@font-face {
    font-family: Verve Black;
    src: url(https://chatbot-fun.neocities.org/assets/fonts/VerveStd-Black.otf);
    }
@font-face {
    font-family: Verve Bold;
    src: url(https://chatbot-fun.neocities.org/assets/fonts/VerveStd-Bold.otf);
    }
@font-face {
    font-family: Verve Regular;
    src: url(https://chatbot-fun.neocities.org/assets/fonts/VerveStd-Regular.otf);
    }
@font-face {
    font-family: Gazette Roman;
    src: url(https://chatbot-fun.neocities.org/assets/fonts/GazetteLTStd-Roman.otf);
    }
@font-face {
    font-family: Gazette Italic;
    src: url(https://chatbot-fun.neocities.org/assets/fonts/GazetteLTStd-Italic.otf);
    }
@font-face {
    font-family: Gazette Bold;
    src: url(https://chatbot-fun.neocities.org/assets/fonts/GazetteLTStd-Bold.otf);
    }
@font-face {
    font-family: Russell Square;
    src: url(https://the-manual.neocities.org/assets/fonts/RussellSquareStd.otf);
    }
@font-face {
    font-family: Russell Square Oblique;
    src: url(https://the-manual.neocities.org/assets/fonts/RussellSquareStd-Oblique.otf);
    }
@font-face {
    font-family: Romic Light;
    src: url(https://the-manual.neocities.org/assets/fonts/RomicStd-Light.otf);
    }
@font-face {
    font-family: Romic Bold;
    src: url(https://the-manual.neocities.org/assets/fonts/RomicStd-Bold.otf);
    }
@font-face {
    font-family: Romic Light Italic;
    src: url(https://the-manual.neocities.org/assets/fonts/RomicStd-LightItalic.otf);
    }
@font-face {
    font-family: Romic Medium;
    src: url(https://the-manual.neocities.org/assets/fonts/RomicStd-Medium.otf);
    }

/* PALETTE */
:root {
    --burgundy: #6c0d4a;
    --burgundy-link: #a1007a;
    --foliage: #355b62;
    --lightgold: #ffe59b;
    --rosegold: #ffc486;
    --whitebrick: #f7ede7;
    }

.handwrite {
    font-family: Romic Light Italic;
    font-weight: bold;
    }


/* GENERAL LINK STYLING, LINK COLOURS */
a {
    font-weight: bold;
    color: #2000ff;
    }
a:visited {
    color: #4d009f;
    }
a:hover {
    color: var(--burgundy-link);
    }
p > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.hide-link {
    color: inherit !important;
    text-decoration: none;
    font-weight: normal;
    text-shadow: inherit !important;
    }

/* DISPLAY ON PHONES ONLY, .context-phone */
@media only screen and (max-width: 799px) {
    .context_desktop {
        display: none;}
    }
/* DISPLAY ON DESKTOPS ONLY, context-desktop*/
@media only screen and (min-width: 800px) {
    .context_phone {
        display: none;}
    }


/* CLEAR AFTER FLOATS */
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    }
.clearfix {
    display: inline-block;
    }
.clearfix {
    display: block;
    }


/* TEXT PROPERTIES */
body {
    font-family: Gazette Roman;
    }
em {
    font-family: Gazette Italic !important;
    font-weight: bold;
    text-decoration: underline;
    font-style: normal;
    }
h1 {
    font-family: Verve Bold;
    font-weight: normal;
    font-size: 49px;
    margin-top: 0;
    margin-bottom: 10px;
    }
    @media (max-width:799px) {
    h1 {
        font-size: 36px;
        margin-bottom: 6px;
        }
    }
h2 {
    font-family: Russell Square;
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 0;
    }
h3 {
    font-family: Russell Square Oblique;
    margin-bottom: 0;
    }
.small-title {
    font-family: Verve Bold;
    font-size: 25px;
    }
.small-title > a {
    font-weight: normal;
    }
.diary {
    font-family: Romic Light;
    }
.diary > p {
    font-size: calc(14px + 0.380625vw) !important;}
.diary > * > i {
    font-family: Romic Light Italic;
    font-style: normal;
    }
.diary > * > em {
    font-family: Romic Light Italic;
    font-style: normal;
    font-weight: bold;
    text-decoration: underline;
    }
.diary > * > b {
    font-family: Romic Medium;
    font-weight: normal;
    }


/* MARGINS AND PADDING */
.bring-element-up {
    margin-top: 0;
    }
.under-header-divider {
    margin-top: 10px;
    }
center > p { /* Use on <center> tags */
    margin-top: 0;
    margin-bottom: 0.5em;
    }
.no-margins {
    margin: 0 !important;
    }
.no-padding {
    padding: 0 !important;
    }
.thin { /* For <center> of wide-box dividers*/
    margin-top:-10px;
    margin-bottom: -5px;
    }


/* LIST PROPERTIES */
ol {
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);
    }
ol > li::marker {
    font-family: Gazette Roman;
    }
ul {
    list-style-type: square;
    }
.list-disc {
    list-style-type: disc;
    }
.chat-size {
    font-size: calc(13px + 0.380625vw);
    }
.spaced > li {
    margin-bottom: 8px;
    }
.spaced-less > li {
    margin-bottom: 4px;
    }
@media only screen and (max-width: 799px) {
    .spaced > li {
        margin-bottom: 10px;}
    .spaced-less > li {
        margin-bottom: 6px;}
    }


/* IMAGES AND FIGURES */
.border {
    border: solid;
    border-width: 3px;
    border-color: black;
    }
.scaled {
    max-height:100%;
    max-width:100%;
    }
figure {
    text-align: center;
    font-size: smaller;
    padding: 0;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3px;
    text-indent: 0;
    max-height:100%;
    max-width:100%;
    border-style: inset;
    text-shadow: 2px 2px 2px rgba(101, 56, 133, 0.43);
    }
figcaption > i > {
    font-family: Gazette Italic;
    font-style: normal;
    }
figcaption > i > b {
    font-family: Gazette Italic;
    font-style: normal;
    font-weight: bold;
    }
figcaption > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.under-figure {
    margin-top: 12px !important;
    }
.under-series {
    margin-top: 16px !important;
    }
.portrait {
    float: left;
    border: solid;
    border-width: 3px;
    border-color: black;
    max-width: 44%;
    margin-right: 12px;
    }
.portrait-right {
    float: right;
    border: solid;
    border-width: 3px;
    border-color: black;
    max-width: 44%;
    margin-left: 12px;
    }
.contains-portrait {
    float: left;
    max-width: 44%;
    margin-right: 15px;
    }
.portrait-no-float {
    border: solid;
    border-width: 3px;
    border-color: black;
    max-width: calc(100% - 6px);
    margin: 0 !important;
    padding: 0 !important;
    }
.image {
    border: solid;
    border-width: 3px;
    border-color: black;
    max-width: 99%;
    }
.image-white {
    border: solid;
    border-width: 1px;
    border-color: white;
    max-width: 99%;
    }
.square-constrain {
    max-width: 320px !important;}
.image-right {
    float: right;
    border: solid;
    border-width: 3px;
    border-color: black;
    margin-left: 12px;
    }
.image-33-left {
    float: left;
    border: solid;
    border-width: 3px;
    border-color: black;
    max-width: 33%;
    margin-right: 12px;
    }
.image-33-right {
    float: right;
    border: solid;
    border-width: 3px;
    border-color: black;
    max-width: 33%;
    margin-left: 12px;
    }
.avatar-right {
    z-index: 7;
    float: right;
    border: solid;
    border-width: 3px;
    border-color: black;
    max-width: 120px;
    margin-left: 12px;
    }
.avatar-left {
    float: left;
    border: solid;
    border-width: 3px;
    border-color: black;
    max-width: 120px;
    margin-right: 12px;
    }
.divider {
    width: 170px;
    margin-top: 10px;
    margin-bottom: 10px;
    }
.extra-space {
    margin-top:20px;
    }