/*
 * style.css
 * Copyright (C) 2023 kevin
 *
 * Distributed under terms of the MIT license.
 */
/*
 * {
 box-sizing: border-box;
 } */

:root {

} 

:root {
	--black: #2b303b;
	--red1: #bf616a;
	--green1: #a3be8c;
	--yellow1: #ebcb8b;
	--blue1: #8fa1b3;
	--magenta1: #b48ead;
	--teal1: #96b5b4;
	--lightgrey: #c0c5ce;
	--grey: #65737e;
	--red2: #bf616a;
	--green2: #a3be8c;
	--yellow2: #ebcb8b;
	--blue2 #8fa1b3;
	--magenta2: #b48ead;
	--teal2: #96b5b4;
	--white: #eff1f5;
	--foreground: #eff1f5;
	--background: #4f5d66;
	background-image::url('/assets/images/water1.gif');
	color: var(--foreground);
	--main-color: var(--grey);
	--main-color-dk: var(--lightgrey);
	--accent-1:var(--teal);
	--accent-2:var(blue1);
	--content-spacing:5px;
	--background-img:url('/assets/images/water1.gif');
	--banner:url('/assets/images/banner.png');
	--titleBars:url('/assets/images/titlebar.png');
	--text-color:white;
	--link-color:var(--green1);
	--border:1px solid black;
	--arrows:url('/assets/images/arrow.png');
}

html,body {
	margin:0;
	box-sizing:border-box;
	font-family:"Courier";
}

body{
	background-image:var(--background-img);
	color:var(--text-color);
	background-attachment:fixed;
}

.topbar {
	background-image:var(--banner);
	height:150px;
	margin-bottom:var(--content-spacing);
	border:var(--border);
}

#container {
	max-width:850px;
	margin:0 auto;
}

#container a {
	color:var(--link-color);
}

#container {
	border-top:none;
}

#flex {
	display:flex;
	max-width:850px;
}

aside {
	width:30%;
	margin-left:var(--content-spacing);
	border-left:var(--border);
	background-color:var(--background);
}

.title,.sidebar-title {
	background-image:var(--titleBars);
	font-weight:bold;
	border:var(--border);
	font-size:20px;
}
main {
	width:74%;
	background-color:var(--background);
}
nav {
	position:sticky;
	top:20px;
}
nav ul {
	list-style-image:var(--arrows);
	margin-left:0;
	padding-left:30px;
}
nav ul li a {
	color:var(--accent-1);
}
.content {
	padding:25px;
}
footer {
	border:var(--border);
	height:25px;
	margin-top:var(--content-spacing);
	background-image:var(--titleBars);
	text-align:center;
}

#themeDiv {
	position:sticky;
	top:550px;
}

@media only screen and (max-width: 640px){
	nav ul{list-style-image:none;list-style-type:none;}
	#flex{flex-wrap:wrap;}
	main{width:100%;order:2;}
	aside{display:block;width:100%;order:1;margin-left:0;}
	nav ul{display:flex;flex-wrap:wrap;}
	nav ul li{padding-right:10px;}
	nav ul > ul{display:none;}
}
@media only screen and (max-height: 640px){
	nav ul > ul{display:none;}
}

/*! CSS Used from: Embedded */
.copyButton {
	width:88px;
	font-size:10px;
	background-color:black;
	color:#79DC77;
	height:21px;
	margin-bottom:10px;
}

/*! CSS Used from: Embedded */
.update {
	border:2px dashed var(--main-color);
	padding:5px;
}

main {
	background-color:transparent!important;
}
.content {
	background-color:var(--background);
}
.title {
	margin-top:var(--content-spacing);
}
.title:first-child {
	margin-top:0!important;
}
.myButton {
	display:flex;
	margin:0 auto;
	width:150px;
}
/*! CSS Used fontfaces */
@font-face {
	font-family:"FreePixel";
	src:url("https://sadhost.neocities.org/fonts/FreePixel.ttf") format("truetype");
}