/*
Heptagon Theme
[2020 Wikidot Theme]
Created by Oboebandgeek99
Based on the Second Hytoth Theme by DrMacro and NatVoltaic, The Aesthetic Theme by Woedenaz, the Dustjacket Theme by StormBreath, probably the Hilightyear Theme by ROUNDERHOUSE, and cobbled together from just about every other BHL theme.
The Second Hytoth logo is by Taoka.
*/
@import url('https://fonts.googleapis.com/css?family=Charm|Nova+Mono|Montserrat|Oswald&display=swap');
/* All Vars Used */
:root {
/* S-CSS-P Integration */
/* If you're making a new CSS theme, please include the following three variables at minimum. */
--theme-base: "black-highlighter";
/* must be either "black-highlighter" or "sigma9" */
--theme-id: "component:heptagon-theme";
/* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
--theme-name: "Heptagon Theme";
/* set this to your theme's full name */
/* Header */
--logo-image: url("http://topia.wikidot.com/local--files/component:hytoth-theme/second_hytoth_logo5.png");
--header-title: "Church of the Second Hytoth";
--header-subtitle: "For Life, Existence, and Eternity";
/* Typefaces */
--body-font: 'Montserrat', 'Lato', sans-serif;
--header-font: 'Charm', 'Poppins', sans-serif;
--title-font: 'Oswald', 'Poppins', sans-serif;
--mono-font: "Nova Mono", "Andale Mono", "Courier New", Courier, monospace;
/* Standard Colors */
--white-monochrome: 252, 245, 223;
/* whiteish*/
--pale-gray-monochrome: 253, 213, 133;
/* tan beige */
--light-pale-gray-monochrome: 244, 244, 244;
/* very light pale gray for misc. use */
--very-light-gray-monochrome: 215, 215, 215;
/* very light accent gray for misc. use */
--light-gray-monochrome: 247, 201, 183;
/* pale pastel red */
--gray-monochrome: 132, 31, 17;
/* Burgundy */
--dark-gray-monochrome: 216, 93, 2;
/* Burnt Orange */
--black-monochrome: 12, 12, 12;
/* black */
--pale-accent: 230, 40, 60;
/* light red, for visited links */
--bright-accent: 64, 20, 13;
/* dark brown */
--medium-accent: 181, 43, 25;
/* crimsony-red */
--dark-accent: 106, 7, 3;
/* similar to the burgandy, CHANGE THIS COLOR */
--alt-accent: 221, 102, 17;
/* pale orange, for newpage links */
/* Background and Header Colors */
--background-gradient-color: var(--very-light-gray-monochrome);
--header-gradient-color-bottom: var(--gray-monochrome);
--header-gradient-color-top: var(--dark-gray-monochrome);
/* Primary Theme Colors */
--swatch-background: var(--white-monochrome);
--swatch-primary: var(--bright-accent);
--swatch-primary-darker: var(--medium-accent);
--swatch-primary-darkest: var(--dark-accent);
/* Primary Text Colors */
--swatch-text-dark: var(--black-monochrome);
--swatch-text-light: var(--white-monochrome);
--swatch-important-text: var(--bright-accent);
/* Primary Menu Colors */
--swatch-menubg-color: var(--white-monochrome);
--swatch-menubg-light-color: var(--pale-gray-monochrome);
--swatch-menubg-medium-color: var(--light-gray-monochrome);
--swatch-menubg-medium-dark-color: var(--gray-monochrome);
--swatch-menubg-dark-color: var(--dark-gray-monochrome);
--swatch-menubg-black-color: var(--black-monochrome);
--swatch-menubg-hover-color: var(--black-monochrome);
--swatch-menutxt-dark-color: var(--black-monochrome);
--swatch-menutxt-light-color: var(--white-monochrome);
--swatch-border-color: var(--black-monochrome);
/* Primary Header Colors */
--swatch-headerh1-color: var(--white-monochrome);
--swatch-headerh2-color: var(--white-monochrome);
--swatch-topmenu-border-color: var(--black-monochrome);
--swatch-topmenu-bg-color: var(--gray-monochrome);
/* Link Colors */
--link-color: var(--pale-accent);
--visited-link-color: var(--swatch-primary);
--hover-link-color: var(--swatch-primary);
--newpage-color: var(--alt-accent);
--sidebar-links-text: var(--swatch-menutxt-dark-color);
/* Rating Module Colors */
--rating-module-button-color: var(--black-monochrome);
--rating-module-button-plus-color: 0, 200, 0;
--rating-module-button-negative-color: 200, 0, 0;
--rating-module-button-cancel-color: 200, 200, 200;
--rating-module-button-credit-color: 50, 50, 50;
--rating-module-text-color: var(--swatch-menutxt-dark-color);
--rating-module-text-hover-color: var(--swatch-menutxt-light-color);
/* Header Gradients */
--gradient-header: linear-gradient(
to top,
rgb(var(--header-gradient-color-bottom)) 0%,
rgb(var(--header-gradient-color-top)) 100%
);
--gradient-topmenu: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) var(--header-height-on-desktop),
rgba(var(--swatch-topmenu-border-color),1) var(--header-height-on-desktop),
rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + 0.125rem),
rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.125rem),
rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - 0.125rem),
rgba(var(--swatch-topmenu-border-color), 1) 100%);
--gradient-topmenu-mobile: linear-gradient(
to bottom,
rgba(var(--swatch-topmenu-border-color),1) 0,
rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem,
rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.125rem),
rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.125rem),
rgba(var(--swatch-topmenu-border-color),1) var(--topbar-height-on-mobile));
--diagonal-stripes: repeating-linear-gradient(
45deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0) 0.25vh,
rgba(88, 88, 88, 0.1) 0.35vh,
rgba(88, 88, 88, 0.2) 0.5vh
);
--gradient-sidemenu-header: linear-gradient(10deg,
rgba(var(--medium-accent), 0.45) 0%,
rgba(var(--medium-accent), 0.55) 100%
);
--background-gradient-distance: 40rem;
--gradient-background: linear-gradient(
to bottom,
rgba(var(--background-gradient-color),1) 0,
rgba(var(--background-gradient-color),0.987) calc(0.008 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0.951) calc(0.029 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0.896) calc(0.064 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0.825) calc(0.110 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0.741) calc(0.166 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0.648) calc(0.231 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0.550) calc(0.304 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0.450) calc(0.383 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0.352) calc(0.467 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0.259) calc(0.554 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0.175) calc(0.644 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0.104) calc(0.735 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0.049) calc(0.825 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0.013) calc(0.914 * var(--background-gradient-distance)),
rgba(var(--background-gradient-color),0) var(--background-gradient-distance));
/* Spacing Measurements */
/* header measurements */
--header-height-on-desktop: 7.5rem;
--header-height-on-mobile: 7.5rem;
--topbar-height-on-desktop: 1.875rem;
--topbar-height-on-mobile: 3rem;
--header-background-image-size: 100% var(--header-height-on-desktop);
--body-width-on-desktop: 44.25rem;
--sidebar-width-on-desktop: calc((var(--base-font-size) * (14/15)) * 19);
--sidebar-width-on-mobile: calc((var(--base-font-size) * (14/15)) * 16);
--scrollbar-width: 1rem;
--border-styling: solid 0.0625rem rgb(var(--swatch-border-color));
--border-radius-width: 0.0625rem;
/* Box-Shadow 1px Borders */
--box-border-bottom: 0 0.0625rem 0 0 rgb(var(--swatch-border-color));
--box-border-top: 0 -0.0625rem 0 0 rgb(var(--swatch-border-color));
--box-border-left: -0.0625rem 0 0 0 rgb(var(--swatch-border-color));
--box-border-right: 0.0625rem 0 0 0 rgb(var(--swatch-border-color));
--box-border-all: 0 0 0 0.0625rem rgb(var(--swatch-border-color));
/* Sidebar */
--sidebar-transition-timing: 0.5s ease-in-out 0.1s;
--sidebar-internal-border-thickness: 0.125rem;
/* final values */
--base-font-size: 0.9375rem;
--base-line-height: 1.313rem;
--final-header-height-on-desktop: calc(var(--header-height-on-desktop) + var(--topbar-height-on-desktop));
--final-header-height-on-mobile: calc(var(--header-height-on-mobile) + var(--topbar-height-on-mobile));
}
}
/* custom divs */
div.opening {float: center; border: solid 2px #800000; width: 570px; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #fdd3af; margin-bottom: 10px;}
div.opening {float: center; border: solid 2px #800000; width: 570px; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #fdd3af; margin-bottom: 10px;}
div.saduj {float: center; border: solid 2px #43130D; width: 570px; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #ffd6a8; margin-bottom: 10px;}
div.nicole {float: center; border: solid 2px #43130D; width: 570px; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #fbf2b7; margin-bottom: 10px;}
div.sarah {float: center; border: solid 2px #43130D; width: 570px; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #ffab93; margin-bottom: 10px;}
div.bleu {float: center; border: solid 2px #43130D; width: 570px; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #e5ccff; margin-bottom: 10px;}
div.fondation {float: center; border: solid 2px #43130D; width: 570px; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #FCF5E0; margin-bottom: 10px;}
div.inconnu {float: center; border: solid 2px #43130D; width: 570px; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #c0a78e; margin-bottom: 10px;}
div.merle {float: center; border: solid 2px #43130D; width: 90%; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #ffeba9; margin-bottom: 10px;}
div.affiche {float: center; border: solid 2px #43130D; width: 570px; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #bebebe; margin-bottom: 10px;}
div.quatrieme {float: center; border: solid 2px #43130D; width: 570px; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #ff834f; margin-bottom: 10px;}
div.samarah {float: center; border: solid 2px #43130D; width: 570px; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #b2ffb2; margin-bottom: 10px;}
div.st-hubert {float: center; border: solid 2px #43130D; width: 570px; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #0097f2; margin-bottom: 10px;}
div.comptine {float: center; border: solid 2px #43130D; width: 570px; padding: 1px 15px; margin:0 auto; box-shadow: rgba(0,0,0,.2); background-color: #e4717a; margin-bottom: 10px;}