@font-face {
	font-family: 'Atkinson';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url(./fonts/Atkinson-Hyperlegible-Regular-102a.woff2);
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html.dark #button-dark-mode #light-mode-icon {
	@apply hidden;
}
html:not(.dark) #button-dark-mode #dark-mode-icon {
	@apply hidden;
}

html {
	font-size: 13pt;
	font-style: normal;
	font-variation-settings:
		"wdth" 100;
	font-family: "Atkinson", sans-serif;
	background-color: initial;
	margin: 0 17%;
	background-color: #fff;
	color: #0A0A0A;
}

button {
	background-color: #0f0f0f;
    color: #FC92FA;
}

.dark {
	background-color: #0f0f0f;
	color: #fef;
}

.dark button {
	background-color: #fef;
    color: #8C038A;
}

html {
	box-sizing: border-box;
	height: 100%;
	padding: 0;
}

body {
	display: flex;
	flex-direction: column;
    box-sizing: border-box;
    height: calc(100% - 0.9rem);
    padding: 0;
}

main {
	flex-grow: 1;
}

footer {
	font-size: 0.8rem;
    padding-bottom: 1rem;
	/*width: 90%; /* wow you can subtract percentages? this rocks. */
}

header, nav, footer {
	flex-grow: 0;
	flex-shrink: 0;
}

/* general color and font size */
h1, h2, h3, h4 {
	font-weight: 500;
}

h4 {
	font-size: 1.1rem;
}

h1, h2, h3, h4, h5, p, div, li, header, span, hr, footer, table, td {
    color: inherit;
}

.colour, a:link, a:visited, :is(h1, h2, h3, h4, h5) strong, :is(header h1, nav) :is(a, a:visited), .continue, .continue:link, .continue:visited, .continue :is(a:link, a:visited), th{
    color: #8C038A;
}

.dark :is(.colour, a:link, a:visited, :is(h1, h2, h3, h4, h5) strong, :is(header h1, nav) :is(a, a:visited), .continue, .continue:link, .continue:visited, .continue :is(a:link, a:visited)), th {
    color: #FC92FA;
}

.no_colour {
    color: #0A0A0A;
}

html.dark .no_colour {
    color: #fef;
}

a[href]:where(
    [href^="http"]
)::after {
    content: "↗";
}

a[href]:where(
    .no_arrow,
    [href$="internet-time.html"]
)::after {
    content: none;
}

a:hover{
    text-decoration: none;
}

/* This all of the nav bar stuff */ 
nav li {
    list-style-type: none;
} /* hide typical list indicators in nav */

nav ul {
    display: flex;
    align-items: center;  
    justify-content: center;
    padding-left: 0px;
} /* flexbox for nav */

nav li a {
    margin: 14px 16px;
    text-decoration: none;
} /* making nav standout and not show typical link underlines */

nav li a:hover {
    text-shadow: 0 0 7px #808;
} /* creating fun indications for nav buttons when highlighted */

.dark nav li a:hover {
    text-shadow: 0 0 7px #F9F;
}

.here {
    text-shadow: 0 0 7px #808;
}

.dark .here {
    text-shadow: 0 0 7px #F9F;
}

/* fun classes */
.smaller {
    font-size: 0.8em
} /* fun little small text :3 */

/* header stuff */
header {
    text-align: center;
} /* for the site title on each page */

header h1 a {
    text-decoration: none;
} /* to make sure that the link in the site title doesnt show */

.directory {
    column-count: 2;
    padding-bottom: 0.5em;
}

/* when.html */
.updated {
    text-align: center; 
    padding-bottom: 0.5rem;
    column-count: 4;
} /* used in when.html for standout colours */

.updated p {
    margin: 0;
}

.updated del {
    color: red;
} /* used in when.html to strikeout previous updates */

/* tables */
table {
    margin-left: auto;
    margin-right: auto;
}

.description {
    font-size: 0.8rem;
    margin: 0 5rem; 
    text-align: center;
}

/* asides */

aside {
    width: 30%;
    padding-left: 0.5rem;
    margin-left: 0.5rem;
    float: right;
    font-style: italic;
    font-size: 0.8rem;
    border-top: 1.5 px solid #0f0f0f;
    border-left: 1.5px solid #0f0f0f;
    border-bottom: 1.5px solid #0f0f0f;
    border-bottom-left-radius: 1em;
	border-top-left-radius: 1em;
} /* creating similar aside features as in Quarto */ 

.dark aside {
    border-top: 1.5px solid #eee;
	border-left: 1.5px solid #eee;
	border-bottom: 1.5px solid #eee;
}

aside > p {
    margin: 0.2rem 0.5rem;
} /* inset text within the aside */

hr {
    color: #eee
}

/* who.html and webring flexbox nicities stuff */
.wrapper {
    display: flex
}

.wrapper piece {
    flex: 1;
}

.wrapper piece ul {
    padding-left: 10px;
}

/* used in articles for a simpler 'float: right;' */
.date {
    float: right;
    margin-bottom: 0;
}

/* i wanna stop writing margin-top all the damn time */
.mt {
	margin-top: 0;
}

/* for the webring in the footer */
.webring {
    text-align: center;
}

.webring a::before, .webring a::after{
    content: "✧";
}

/* for the little hr bars*/
.divider {
    margin: 0 1em;
}

/* for the little bulleted lists */
.ontheme {
  list-style-type: disc;
}
.ontheme .offtheme {
  list-style-type: circle;
}
.ontheme .hidden {
  list-style-type: square;
}

.dorgen {
    color: #fff;
} /* To make Alice's name not show, set as the same colour as the background */

.dark .dorgen {
    color: #0f0f0f;
}

.dark .snow {
  color: pink;
}

.dark .lucah {
  color: white;
}

.dark .ali {
  color: red;
}

.snow {
    color: rebeccapurple;
}

.lucah {
    color: black;
}

.ali {
    color: deepskyblue;
}

.alice {
    color: #002647;
} /* Yes, non-darkmode alice is no longer aliceblue */

.dark .alice {
    color: aliceblue;
} 

.back2top {
    position: fixed; /* Fixed/sticky position */
    bottom: 0.5em; /* Place the button at the bottom of the page */
    right: 1em; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    color: #feebe2; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 0.2em; /* Some padding */
    font-size: 8pt;
}

/* call after everything it modifies */
/* "responsive web design" */
@media only screen and (max-width:1080px){
    html {
        margin: 0 0.5em;
    }

    nav li a {
        margin: 0.5em 0.2em;
    }

    .description {
        margin: 0 1rem;
    }

    .directory {
        column-count: 1;
        margin-left: 0;
    }
}