* {
  box-sizing: border-box;
}

/* PALETTE */
:root {
  /* Background Colors: */
  --background-color: #AAB4D8;
  --content-bg-color: #F4F5F5;
  --sidebar-bg-color: #F4F5F5;
  --bg-grey: #4F5159;

  /* Text Colors: */
  --text-color: #080809;
  --sidebar-text: #080809;
  --link-color: #AAB4D8;
  --link-color-hover: #F4F5F5;
}

html,
body {
    padding: 0;
    margin: auto;
}

html {
    scroll-behavior: smooth;
}

/* Add a gray background color with some padding */
body {
	background: var(--sidebar-text) url(/img/default/andromeda.png) center no-repeat;
	background-size: cover;
	background-attachment: fixed;
  	overflow: hidden;
	position: absolute;
  	width: 100%;
	height: 100%;
  	font-family: 'Courier New', monospace;
  	font-size: 0.9rem;
  	color: var(--text-color);
}
html,
body,
a:link,
a:visited {
	cursor: url("/img/default/moon-cursor.png"), auto;
}
a:active, 
a:hover {
	cursor: url("/img/default/moon-phases.gif"), default;
}

/* IMAGE SETTING */
img,
picture,
video {
  max-width: 100%;
}

.wrapper {
	margin: auto;
  	width: 100%;
	max-width: 100%;
	height: auto;
  /*height: 400px;*/
}

/* Header/Blog Title */
header {
	width: 100%;
	margin: 0 auto;
}
.header {
	font-size: 1.7em;
	text-align: right;
	background: transparent;
	margin: 0 auto;
}
header .content img {
	width: 100px;
	max-width: 100%;
	height: fit-content;
	margin: 10px 0 0 -55px;
	image-rendering: pixelated;
}

/*.header > div {
  margin-right: 12px;
 text-align: right;
}*/
.row {
    width: 100%;
    margin-top: -18px;
}
/* Right Column */
.rightcolumn {   
  float: left;
  width: 70%;
  margin: 0 auto;
  height: auto;
}

/* Left Column */
.leftcolumn {
  float: left;
  width: 30%;
  height: 300px;
  padding-right: 12px;
  margin: 0 auto;
  align-items: center;
  align-content: space-evenly;
}
.main {
  height: 500px;
  width: 100;
}
.columns {
	display: flex;
	gap: 50%;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}
/* TEXT STYLES */
h1, h2, h3, h4 {
  font-family: 'Times New Roman', serif;
  color: var(--var-text);
}
h1 {
	text-align-last: center;
}
hr {
	border: 1.3px dashed var(--bg-grey);
}
ul {
  list-style:  none;
  /*list-style-image: url('sqpurple.gif'); */
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
  text-align: center;
  align-content: center;
}
.profile-img {
  background-color: transparent;
  width: 100%;
  padding: 6px;
  margin: auto;
} 

/* Add a card effect for articles */
.card {
  padding: 9px;
  margin-top: 15px;
  background-color: var(--content-bg-color);
  box-shadow: 6px 10px 5px rgba(79, 81, 89, 0.5);
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.voice {
	vertical-align: middle;
	align-items: center;
	align-content: center;
	justify-content: center;
	display: flex;
	margin: 30vh auto;
	width: fit-content;
	z-index: 0;
}
/* VISUALS */
.container {
  /*margin: 0 auto;*/
    /*width: 600px;*/
    /*height: 50%;*/
    /*max-height: 250px;*/
  	width: 100%;
  	align-items: center;
  	border: 1.5px solid #0C0C0D;
  	border-top-left-radius: 8px;
  	border-top-right-radius: 8px;
	vertical-align: middle;
  	background-color: var(--content-bg-color);
  	box-shadow: 5px 5px 1px rgba(170, 180, 216, 0.5);
}

.dot {
  height: 12px;
  width: 12px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.5px; 
}
.wind {
  padding: 5px;
  margin-bottom: -10px;
  background: var(--text-color);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  text-align: right;
}
.wind-name > p {
  color: white;
  font-size: 2vh;
  margin: 0 5px;
  float: left;
  text-transform: lowercase;
  letter-spacing: 1.3px;
  font-weight: bold;
}
.wind img {
	height: 2vh;
	width: auto;
	max-width: 100%;
}
.content {
	font-size: 1rem;
    /* padding: 5px 6px; */
    margin-left: auto;
	margin-right: auto;
    color: var(--text-color);
	padding: 1em;
	flex-wrap: wrap;
	text-align-last: center;
}

.content .message {
	text-align: center;
	font-size: 0.9em;
}
a, a:active {
	text-decoration: none;
	color: var(--bg-grey);
	font-weight: bold;
	font-variant: all-petite-caps;
	font-size: 1.5rem;
}
a:hover {
	text-decoration-line: underline;
	text-decoration-style: solid;
	color: var(--link-color);
}
.content .scroll {
    font-size: 0.9rem;
    /* margin: 5px -6px; */
	margin: 10px auto;
    overflow-y: scroll;
    width: auto;
    height: 300px;
    padding: 0 12px;
}

.updates {
	font-size: 0.7rem;
  	margin-top: 10px;
  	margin-bottom: 13px;
    /*height: 250px;*/
  	margin-left: auto;
	margin-right: auto;
  	padding: 0;
  	overflow-y: scroll;
  	overflow-x: hidden;
  	width: 100%;
  	height: 100px;
  	min-height: 50px;
}

/*
.content .scroll{
  width: 100%;
  height: 500px;
  margin: 0 auto;
} */

/* LINKS */
.links {
  list-style-type: none;
  padding: 0;
}
.links li {
  border: 1px dashed black;
  margin-bottom: 6px;
  text-align-last: center;
  color: var(--text-color);
  background-color: var(--content-bg-color);
  padding: 2px;
  font-size: .9em;
}
.links li a, .links li a:active {
  text-decoration: none;
  cursor: pointer;
  color: var(--text-color);
}
.links li:hover, .links li a:hover {
  text-decoration: none;
  cursor: pointer;
  color: var(--sidebar-text);
  padding: 3px;
}

/* NAV */
.nav {
	margin: auto 6px;
}
.nav-links li a {
    color: black;
    cursor: pointer;
}
.nav li:hover {
  /*letter-spacing: 3px;*/
  padding: 6px;
  color: var(--text-color);
  background-color: var(--content-bg-color);
  transition-timing-function: ease;
  transition-duration: 1s;
  border-left: 9px solid var(--background-color);
  margin-left: 25px;
}
.nav li a:hover, .nav li a:active {
  color: var(--link-color);
  height: 10px;
}
.nav li a:visited {
  opacity: 0.6;
  color: #672a4e;
}

/* MAIN */
.main {
  height: fit-content;
}
/* SOCIALS */
.bullets {
  list-style-type: circle; 
}
.socials li a {
  color: var(--text-color);
  text-decoration: none;
}
.socials li a:hover, .socials li a:active {
  padding: 6px;
  color: var(--link-color);
  background-color: transparent;
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
}
.socials li a:visited {
  color: var(--bg-grey);
  opacity: 0.6;
}
.socials {
  font-size: small;
  padding: 0;
  margin: 0 -10px;
}

/* WEBRINGS */
.webrings {
	margin: 10px auto;	
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	height: auto;
	text-align: center;
}

/* STAMPS/BUTTONS/BLINKIES */
.container .stamps {
	margin: 10px auto 6px;
	display: inline-flex;
	gap: 3px;
	width: 199%;
	max-width: 100%;
	height: auto;
	justify-content: space-evenly;
	justify-items: center;
	align-content: center;
	align-items: center;
	flex-direction: row;
	border-bottom: 1.5px dashed var(--bg-grey);
	padding-bottom: 5px;
}

/* MISC */
::selection {
	color: var(--background-color);
	background: var(--grey-bg);
}
-moz-::selection {
	color: var(--background-color);
	background: var(--grey-bg);
}
table {
  padding: 1px;
  margin: 0 auto;
  font-size: .7rem;
}
th, td {
	padding: 4px 4px;
    vertical-align: center;
}
th {
    font-size: .8em;
	background: black;
	color: white;
}
.moon {
	border: 0;
	background-image: url(/img/default/moon-divider.png);
	height: 32px;
	width: 100%;
	max-width: 100%;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin: 0;
}
.decor {
	margin: 0;
	float: none;
	z-index: 5;
	width: 30%;
	max-width: 100%;
	position: fixed;
	top: 60vh;
	left: 15%;
	transform: rotate(-20deg);
}
.starpath {
	float: none;
	position: absolute;
	width: 90%;
	z-index: -1;
	margin-top: 0;
	margin-left: 30%;
	max-width: 100%;
	transform: rotate(55deg);
}
.floating {  
	animation: floating 5s ease-in-out infinite;
/*	animation-play-state: paused;
    animation-name: floating;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; */
}
/* .floating:hover {
	animation-play-state: running;
} */
  
@keyframes floating {
    0% { transform: translate(0,  0); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0); }
	
}

/* SCROLLBAR */
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--sidebar-text); 
  border: groove 2.4px var(--content-bg-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--link-color);
  opacity: 0.5;
}
::-webkit-scrollbar-corner {
  border-radius: 10px;
}
/* Footer */
footer {
  text-align: right;
  font-size: 0.9em;
  color: var(--content-bg-color);
  height: 5vh;
  padding: 5px;
  margin: 5px auto;
  font-variant: small-caps;
}
footer a, footer a:active {
  color: var(--bg-grey);
  text-decoration: none;
}

footer a:hover {
  color: black;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  font-weight: bold;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
/*(max-width: 800px)*/
@media screen and (width <= 450px) {
	body {
		margin: auto;
    	display: flex;
    	flex-direction: column;
    	flex-wrap: wrap;
    	align-items: space-evenly;
	  	padding: 2.5vh;
		background-color: black;
		width: 100%;
		
  	}
	.mobileHide {
		margin-bottom: inherit;
		display: none;
	}
	.mobileShow {
		display: inline;
		margin-bottom: inherit;
		
	}
  	img, picture, video {
    	max-width: 100%;
  	}
  	.profile-img {
    	width: 50%;
  	}
  	.wrapper {
	  	margin: 25vh auto;
	  	padding: 0;
	  	width: 90%;
	  	flex-wrap: wrap;
		justify-content: center;
  	}
	.voice {
		right: 0;
		left: 0;
		margin: auto;
		width: 100%;
	}
  	.row {
    	margin: auto;
    	display: grid;
    	row-gap: auto;
  	}
  	.leftcolumn, .rightcolumn {   
    	width: 100%;
    	height: 100%;
    	/*padding: 0; */
    	padding: 0;
    	margin: 0 auto;
  	}
  	header {
	  width: 100%;
	  max-width: 80vh;
	  margin: 0;
	  order: 1;
  	}
	.content .header {
		margin: auto 10px auto 3px;
		height: auto;
		width: auto;
		padding: -33px;
	}
	header .content img {
		width: 45%;
		max-width: 100%;
		margin: 0;
	}
  	.rightcolumn {
    	order: 3;
  	}
  	.leftcolumn {
    	order: 2;
  	}
  	.card, .container {
		margin-bottom: auto;
		flex-wrap: wrap;
		width: 100%;
  	}
	.content {
		width: auto;
		margin: auto;
	}
  	.scroll {
	  	height: 2vh;
	  	max-width: 100%;
  	}
	.decor {
		width: 40%;
		top: -1vh;
		left: 65%;
		transform: rotate(25deg);
	}
  	footer > div {
    	width: 100%;
    	height: .5vh;
    	text-align: left;
    	margin: -5px auto 12px;
  	}
  	footer {
    	order: 4;
  	}
}