@layer reset, defaults, themes, utilities;



/* ===========
	THEMES
=========== */

@layer themes {

:root {
	--fore-colour: #343947;
	--back-colour: white;
	--hot-colour: crimson;
	--cold-colour: mediumBlue;
    --green: #47ff6f;
	--lightPurple: #6e2543bd;
	--darkPurple: #440f49;
	
}
@media (prefers-color-scheme: dark) {
	:root {
		--fore-colour: rgb(255, 164, 217);
		--back-colour: #343947;
		--hot-colour: #318a59;
		--cold-colour: #4dad67;
	}
}
            :root {

            }

    @font-face {
    font-family: BasicHandwriting;
    src: url("./BasicHandwriting.ttf")format("truetype");
    }

    @font-face {
    font-family: Extrude;
    src: url("./Extrude.ttf")format("truetype");
    }

    @font-face {
    font-family: PressStart;
    src: url("/fonts/Press\ Start\ DX.ttf")format("truetype");
    }

    @font-face {
    font-family: James;
    src: url("/fonts/James-regular.otf")format("opentype");
    }

    @font-face {
    font-family: Citree;
    src: url("/fonts/Citree\ regular.otf")format("opentype");
    }

    .atkinson-hyperlegible-regular {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.atkinson-hyperlegible-bold {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.atkinson-hyperlegible-regular-italic {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.atkinson-hyperlegible-bold-italic {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* =========== END THEMES */ }



/* ==========
	RESET
========== */

@layer reset {

*,
::before,
::after {
	box-sizing: border-box;
}

/* ========== END RESET */ }



/* ==============
	UTILITIES
============== */

@layer utilities {

.uppercase {
	text-transform: uppercase;
}
.lowercase {
	text-transform: lowercase;
}
.undo-case {
	text-transform: none;
}

/* ============== END UTILITIES */ }



/* ==============
	DEFAULTS
============== */

@layer defaults {

/* STRUCTURE */

:root {
	--gap: 1.5rem;
	--line: 2px solid var(--fore-colour);
	--interface-font-size: 1em;
	--meta-font-size: 0.8em;
}

body {
	font-size: 18px;
	font-family: Atkinson Hyperlegible;
	margin: 0;
	color: var(--fore-colour);
	background-color: var(--back-colour);
	line-height: 1.5;
	background-image: url('../images/assets/bg1.png');
	background-attachment: fixed;
    cursor: url(/images/sitewide/cursor1.cur), auto;
}
#skip-link {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	color: var(--back-colour);
	background-color: var(--fore-colour);
	clip-path: inset(50%);
	&:focus {
		clip-path: unset;
	}
}

.flex-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-inline-start: 0;
	list-style-type: "";
}

/* HEADER */

#header {
	font-family: BasicHandwriting;
	color: var(--back-colour);
	background-color: var(--fore-colour);
	* {
		margin-block: 0;
	}
}
#main-topbar {
	a {
		display: block;
		padding-block-start: 0.3em;
		padding-block-end: 0.2em;
		padding-inline: 0.4em;
        font-size:8pt;
		color: var(--back-colour);
		text-decoration: unset;
		&:hover {
			background-color: var(--hot-colour);
		}
	}
}
#headBox {
	display:flex;
	justify-content: space-between;
}

#header-message {
    position:relative;
    width:350px;
	font-size:10px;
    font-family: PressStart;
    letter-spacing: -2px;
	padding-block-start: 0.3rem;
	padding-block-end: 0.2rem;
	padding-inline: 0.5rem;
	border-block-start: var(--line);
	a {
		color: inherit;
		background-color: inherit;
	}
}

marquee {
    position:absolute;
    width:170px;
    margin: 0px 2px 0px 2px;
    letter-spacing:0px;
    font-size:10pt;
    font-family: BasicHandwriting;
}

/* TEXT */
:is(h1, h2, h3) + * {
	margin-block-start: 0;
}
h1 {
	margin-block-start: 1rem;
	margin-block-end: 0;
}
h2 {
	margin-block-start: 3rem;
	margin-block-end: 0.25rem;
}
h3 {
	margin-block-start: 2rem;
	margin-block-end: 0.25rem;
}
details {
	margin-block: 1rem;
	margin-inline-start: var(--gap);
}
summary {
	cursor: pointer;
	font-weight: bold;
	margin-inline-start: -1rem;
	& + * {
		margin-block-start: 0;
	}
}
a{
    cursor: url(/images/sitewide/cursor2.cur), auto;
}
a:link {
	color: var(--cold-colour);
}
a:visited {
	color: var(--hot-colour);
}
a:hover {
	color: var(--back-colour);
	&:link {
		background-color: var(--hot-colour);
	}
	&:visited {
		background-color: var(--cold-colour);
	}
}

code {
	font-size: 0.8em;
}
.code-block {
	display: block;
	margin-block: 1rem;
	color: var(--back-colour);
	background-color: var(--fore-colour);
	overflow-x: auto;
	white-space: pre;
	tab-size: 4ch;
}
blockquote {
	margin-inline: var(--gap);
}
::marker {
	color: var(--hot-colour);
}

/* MEDIA */

img {
	display: block;
	margin-inline: auto;
}
figure {
	margin-inline: var(--gap);
}
figcaption {
	text-align: center;
	blockquote + &::before {
		content: "\2014 \a0"; /* em dash + non-breaking space */
	}
}
.gallery {
	--gallery-cols: 1;
	display: grid;
	grid-template-columns: repeat(var(--gallery-cols), 1fr);
	gap: calc(2rem / var(--gallery-cols));
	padding-left: 0;
	list-style-type: "";
	&:has(:nth-child(2)) {
		--gallery-cols: 2;
	}
	&:has(:nth-child(5)) {
		--gallery-cols: 3;
	}
	&:has(:nth-child(10)) {
		--gallery-cols: 4;
	}
	img {
		height: 100%;
		width: 100%;
		aspect-ratio: 1;
		object-fit: cover;
	}
}
iframe {
	max-inline-size: 100%;
	display: block;
	margin-block: 1rem;
	border: var(--line);
}

/* POST LISTS */

.post-list {
	list-style-type: "";
	font-size: 20px;
}

.post-list a {
	font-size: 22px;
}

#tag-index {
	padding-inline-start: 0;
	list-style-type: "";
	details {
		margin-block: 0;
	}
	[open] {
		margin-block-end: 1rem;
	}
	summary {
		font-size: var(--interface-font-size);
	}
}



/* POSTS */
#post-date {
    font-family:BasicHandwriting;
}
article {
    padding:20px;
}

article > header {
	margin-block-end: 1rem;
	padding-block-end: 1rem;
	border-block-end: var(--line);
	h1 {
		margin-block-end: 0.5rem;
		font-size: 2.2rem;
	}
	& + * {
		margin-block-start: 0;
	}
}

.postCWs {
    color:red;
}

.postCWsNone {
    color:rgb(0, 199, 0);
}

.subline {
    text-align: center;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

#post-tags {
	margin-block: 0;
	& > li:not(:last-child)::after {
		content: ",\a0"; /* comma + non-breaking space */
	}
	a::before {
		content: "#";
	}
}
#postNav > ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:10rem;
	padding-inline-start: 0;
	list-style-type: "";
	& > :first-child > a::before {
		content: "\2190 \a0"; /* left arrow + non-breaking space */
	}
	& > :last-child {
		text-align: right;
		a::after {
			content: "\2192 \a0"; /* right arrow + non-breaking space */
		}
	}
}
#postNav {
    width:100%;
    display:flex;
    justify-content: space-between;
}

#postNav a {
    font-size: 12pt;
}

/* FOOTER */

#footer {
	font-family: PressStart;
    font-size: 12pt;
    text-align: center;
	padding-block-start: 1rem;
	border-block: var(--line);
	[rel="return"]::before {
		content: "\2191 \a0"; /* up arrow + non-breaking space */
	}
}

#contact-links {
	& > li:not(:last-child)::after {
		content: "\a0 |\a0"; /* non-breaking space + pipe + non-breaking space */
	}
}

.postBlock {
    background-color: #d1007a1f;
    background: linear-gradient(0deg,rgba(197, 0, 181, 0.164),hsla(332, 100%, 72%, 0.157));
    width:95%;
    padding:5px;
    margin:5px;
}

.postBlock hr {
        width:100%;
        border-width: 2px 0 0 0;
        border-style: solid;
        border-color: #6e0342; 
    }

/* ============== END DEFAULTS */ }

            nav {
                z-index: 9;
                color:var(--green);
                background-color: var(--darkPurple);
                background-image: url("../images/sitewide/navgif.gif");
                background-size: 100%;
                background-repeat: no-repeat;
                background-position-y: 97%;
                position:fixed;
                padding: 10px;
                height: 100%;
                width: 200px;
                transform: translate(-220px);
                transition: .2s;
                cursor: url(/images/sitewide/cursor1.cur), auto;
                font-size:18px;
            }

            .navlink {
                font-family: Citree;
                text-align: center;
                text-transform:uppercase;
                margin-top:70px;
                min-width:210px;
            }

            .navlink img {
                width:210px;
            }

            .navlink a:hover {
                color: #b3f0f2;
                text-decoration: underline;
            }

            .dropdown {
                position: relative;
                display: block;
                color: var(--green);
                z-index:999;
            }

            #homePage {
                background-size: contain;
                background-repeat: no-repeat;
                background-position: 55px;
                width:200px;
                height:175px;
                background-image: url(/images/sitewide/homebutton.png);
            }

            #homePage:hover {
                background-image: url(/images/sitewide/homebutton_hover.png);
                background-position: 0px;
                transform: scale(1.1);
                cursor: url(/images/sitewide/cursor2.cur), auto;
            }

            .dropdown-content {
                display: none;
                top: -20px;
                left:210px;
                position: absolute;
                background-color: #6e2543;
                width: 200px;
                z-index:999;
                border:2px solid var(--green);
            }

            .dropdown-content:after,
            .dropdown-content:before {
                right: 100%;
                top: 33px;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
            }

            .dropdown-content:after {
                border-color: rgba(136, 183, 213, 0);
                border-right-color: var(--green);
                border-width: 10px;
                margin-top: -10px;
            }

            .dropdown-content:before {
                border-color: rgba(194, 225, 245, 0);
                border-right-color: var(--green);
                border-width: 13px;
                margin-top: -13px;
            }

            .dropdown-content a {
                padding: 10px;
                text-decoration: none;
                display: block;
                color: #4ddf59;
                text-align: center;
                z-index:999;
                border: 1px solid var(--green);
                border-bottom:0px;
            }

            .dropdown-content a:hover {
                background-color: #a88fed;
                color: #000;
            }

            .dropdown:hover .dropdown-content {
                display: grid;
            }

            .dropdown:hover {
                cursor: url(/images/sitewide/cursor2.cur), auto;
            }

            #openNav {
                z-index:9;
                margin: 0px;
                padding: 0px;
                position:fixed;
                text-align: center;
                left:0px;
                width:50px;
                height:100%;
                background-color: var(--lightPurple);
                transition: .2s;
                border-right:2px solid var(--green);
                cursor: url(/images/sitewide/cursor2.cur), auto;
            }

            #openNav:hover {
                transform: scaleX(1.1);
            }

            #openNav h1 {
                position: absolute;
                font-size: 35px;
                color: var(--green);
                transform: rotate(-90deg);       
                font-family: James;
                top:40%;
                left:-10px;
                text-shadow:
                0 0 7px #13db1d57,
                0 0 10px #c8ffd4a2,
                0 0 20px #c5eece71;
            }

            #openNavBtn {
                display: none;
            }

            .openNavArrow {
                position:absolute;
                z-index:99;
                top:42%;
                left:55px;
                width: 0px;
                height: 0px;
                border-style: solid;
                border-width: 25px 0 25px 25px;
                border-color: transparent transparent transparent var(--green);
                opacity: .1;
                transition: .5s;
                visibility: visible;
            }

            #openNav:hover > .openNavArrow {
                opacity:1;
                transition: .5s;
                transform: translateX(10px);
            }
            
            #openNavBtn:checked + label > div {
                left:220px;
                transition: .2s;
            }

            #openNavBtn:checked + label > nav {
                transform: translate(0px);
            }

            #openNavBtn:checked + label .openNavArrow {
                visibility: hidden;
            }

    p {
        font-size:14pt;
        font-family: Atkinson Hyperlegible;
    }

    ul, li {
        font-size:10pt;
        letter-spacing: -2px;
        font-family: PressStart;
        line-height: 27px;
    }

    h1,h2 {
        font-family: BasicHandwriting;
        text-align: center;
        font-size: 30px;
    }

    #content li {
        line-height: 25px;
    }

    header a:hover, header a:focus {
        background-color: #ffbedb;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .right {
        float: right;
        margin-left: 20px;
    }

    .left {
        float: left;
        margin-right: 20px;
    }

    .center {
        display: block;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    @media only screen and (min-width: 600px) {
  .small {
      max-width: 40%;
      height: 100%;
      margin-left: -40px;
        }
    }

    .caption {
        margin-top: 0;
        font-size: 0.9em;
        font-style: italic;
    }

    #container {
        margin-left:20%;
        margin-top:10px;
        margin-right:100px;
        width: 900px;
        height:875px;
        color: #214457; 
        border-radius: 3px;
        overflow: auto;
        box-shadow: 0 0px 10px 0 #000000;
        background-color: #ffd1df;
        background-blend-mode: overlay;
        background-image: url('../images/assets/lovetiny2.gif');
        scrollbar-color: #fff7fd rgb(116, 72, 113);
        scrollbar-width: thin;
    }

    .title-bar-controls button {
        display: block;
        min-height: 14px;
        min-width: 16px;
        padding: 0;
        background:rgb(255, 84, 164);
    }

    .title-bar {
        font-family: Atkinson Hyperlegible;
        -webkit-font-smoothing: none;
        font-size: 11px;
        align-items: center;
        background: linear-gradient(90deg,rgb(128, 0, 117),#d0106a);
        display: flex;
        justify-content: space-between;
        padding: 3px 2px 3px 3px;
        box-shadow: inset -1px -1px #690358,inset 1px 1px #ff91e7,inset -2px -2px rgb(83, 4, 44),inset 2px 2px #ff91e7;
        padding: 3px 2px 3px 3px;
        display: flex;
    }

        .title-bar-text {
          font-weight: bold;
          color: white;
          letter-spacing: 0;
          margin-right: 24px;
        }

        .title-bar-controls {
          display: flex;
        }

        .title-bar-controls button {
          padding: 0;
          display: block;
          min-width: 16px;
          min-height: 14px;
        }

        .title-bar-controls button:active {
          padding: 0;
        }

        .title-bar-controls button:focus {
          outline: none;
        }

        .title-bar-controls button[aria-label="Minimize"],
        .title-bar-controls button[aria-label].minimize {
          background-image: svg-load("./icon/minimize.svg");
          background-repeat: no-repeat;
          background-position: bottom 3px left 4px;
        }

.title-bar-controls button[aria-label="Maximize"],
.title-bar-controls button[aria-label].maximize {
  background-image: svg-load("./icon/maximize.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}

.title-bar-controls button[aria-label="Maximize"]:disabled,
.title-bar-controls button[aria-label].maximize:disabled {
  background-image: svg-load("./icon/maximize-disabled.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}

.title-bar-controls button[aria-label="Restore"],
.title-bar-controls button[aria-label].restore {
  background-image: svg-load("./icon/restore.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}

.title-bar-controls button[aria-label="Help"],
.title-bar-controls button[aria-label].help {
  background-image: svg-load("./icon/help.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 5px;
}

.title-bar-controls button[aria-label="Close"],
.title-bar-controls button[aria-label].close {
  margin-left: 2px;
  background-image: svg-load("./icon/close.svg");
  background-repeat: no-repeat;
  background-position: top 3px left 4px;
}

    #postlistdiv ul {
        text-align: center;
        font-size: 20px;
        padding: 0;
        list-style-type: none;
    }

    #recentpostlistdiv ul {
        font-size: 20px;
        padding: 0;
        list-style-type: none;
    }

    .moreposts {
        font-size: 0.8em;
        margin-top: 0.2em;
    }

    #nextprev {
        font-family: BasicHandwriting;
        font-size:25px;
        text-align: center;
        margin-top: 20px;
    }

    #footer p {
        text-align: center;
        font-size: 6pt;
        padding: 2px;
    }

    .postBlock  p {
    font-size:8pt;
    font-family: PressStart;
}

.return:hover {
background-color: #ffffff00;
}

.readMore {
	font-family: BasicHandwriting;
	float: right;
	transition:.2s;
    padding:3px;
    border-radius: 30%;
}

.readMore:hover {
	transform: translateX(10px);
	transition:.2s;
    background-color: rgb(199, 252, 206);
}



    @media (max-width: 450px) {
        #container {
            min-width:80%;
        }
        #sidebar {
            position: inherit;
            margin:20px;
            min-width:50%;
        }
        #header li {
            display: block;
            margin:10px;
        }
        #header li a {
            width:100%;
        }
    }