:root {
  --grey-bg:#989898;
  --main-bg:#333333; /* black */
  --left-sidebar-bg:#ff2d2d;
  --right-sidebar-bg:#00c5ff;
}

body, html {
    font-size: 16px; /* font size for ALL text */
    padding:0; /* Not sure this one is necessary */
    margin:0; /* Removes unnecessary white space around the content */
    background-image: url(Images/greengrid.jpg);
    font-family: Cantoria, serif;
}

header, nav, main, aside {
  border:1px solid black; /* Note that this is not for the sections within the main and the sidebar, only the outer containers, looks kinda naked without it, suggest keeping it */
}

header, nav, footer {
    background-color: var(--grey-bg);
    text-align: center;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    font-family: 'Press Start 2P', cursive;
}

/* Begin header and nav */

header {
  max-height:200px;
  height:200px;
  margin-bottom: 10px;
  background-color: var(--grey-bg);
    font-family: 'Press Start 2P', cursive;
}

header h1 {
    text-align: center;
}

nav {  /* This is the selector for the navbar itself */
  max-height:25px;
  height:25px;
  margin-bottom: 10px;
  background-color: var(--grey-bg);
}

.navlinks {  /* This is the selector for the whole <ul> list  */
    margin-top: 5px;
    text-align: inherit;
}

.navlinks li {  /* This is the selector for each <li> in the unordered list on the navbar */
    display: inline-block; /* This makes the navbar links line up horizontally */
    padding-left:30px;
    padding-right: 30px; /* I'm not smart enough to align the navbar links without padding. Looks fine for now but I would eventually like to fix, low priority */
}

.navlinks li a {
  color:black;
  font-weight: bold;
}

/* End header and nav */

/* Begin flexbox, main, sidebars */

.flex {
  display: flex;
  margin-top: 20px; /* Space between navbar and main content/sidebars */
  justify-content: center; /* Absolutely vital, this centers all the main/sidebar content in the middle of the screen  */
  max-width: 100%; /* Test this on mobile to see how it affects things. Sidebars might still be too big */
}

.subtitle {
    border: 1px solid black;
    background-color:var(--main-bg);
    font-weight: bold;
    color: white;
    text-align: center;
    font-size: 18;
}

h6 {
    background-color:var(--main-bg);
    color: white;
    text-align: center;
    padding: 1px 1px;
    margin: 10px 300px;
}

main {
  width:100%; /* Currently this is pointless since I have .flex width set at 100% but i may need this for responsiveness */
  background-color:var(--main-bg); /* This is the black screen in the center */
  max-width: 800px; 
  margin: 0 5px; /* Keep as-is to retain it looking like a switch */ 
  flex-grow: 2;
  flex-shrink: 0;
}

main .subtitle {
    text-transform: uppercase;
}

aside {
  max-width: 230px;
  flex-shrink: 2;    
}

aside section {
  border:1px solid black;
  margin-bottom:10px; /* Margin between sidebar sections */
  text-overflow: wrap;
}

.yw-widget-full {
    max-width: 80%;
}

article {
    border:1px solid black;
    margin: 10px 15px;
    color: #ebebeb; /* Need this for readability on all main text, don't put in individual elements */
}

article p {
    margin-left: 10px;
}

article h2, h3, h4, h5 {
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
}

article figure {
    text-align: center;
    max-width: 100%;
}


figcaption {
    font-style: italic;
    text-align: center;
}

article p a {
    color: ghostwhite;
}

article img {
    text-align: center;
    max-width: 100%;
}

.left-sidebar {
  background-color:var(--left-sidebar-bg);
}

.sidebar-section {
    margin: 5px 5px;
    padding: 5px 10px;
}

.right-sidebar {
  background-color:var(--right-sidebar-bg);
}

/* End flexbox, main, sidebars */

/* Begin links styling */

.links {
    list-style-type:none;
}

.links li {
    margin-bottom: 3px;
}

.links li a:link {
  color:black;
  font-weight: bold;
}

main a:link {
    color:whitesmoke;
}

main a:visited {
    color:darkgrey;
}

.left-sidebar a:link {
    color:black;
}

.left-sidebar a:visited {
    color: black;
}

.right-sidebar a:link {
    color: blue;
}

.right-sidebar a:visited {
    color: black;
}

/* End links styling */

/* Begin footer styling */

footer {
  max-height:25px;
  height:25px;
}

footer p {
    text-align: center;
}

.centerimg {
    text-align: center;
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/* Begin widgets */

#statuscafe {
    padding: .5em;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

.commentbox {
   text-align: center;
}


@media (max-width: 1200px) {
    aside {
        display: none;
    }
    .navlinks {
        display: none;
    }
    .navbar {
        display: none;
    }
}

@media (min-width: 1201px) {
    #mobileMenu {
        display: none;
    }
}

.boxart {
    max-height: 100%;
    max-width: 100%;
    height: 450px;
    width: 400px;
}

@media (max-width: 768px) {
    .boxart {
        height: 100%;
        width:100%;
    }
}

.boxartrow {
    display: flex;
  margin-top: 5px; /* Space between navbar and main content/sidebars */
  max-width: 100%; /* Test this on mobile to see how it affects things. Sidebars might still be too big */
}

.boxartcollage {
    width: 100%;
    height:100%;
}

.boxartfull {
    width: 100%;
    height:100%;
}

.gallery {
    display: flex;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px;
    border-color:black;
    border-style: solid;
    padding: 10px 10px;
    flex-wrap: wrap;
}

.youtuber {
    margin: 20px 20px;
}

.guestbookwrapper {
      display: flex;
justify-content: center;
    align-items: center;
}

.guestbook {
    width: 95%;
    height:1000px;
}

.centertext {
    text-align: center;
}

/* Start mobile menu */

#menuShowHide {
    display: none;
}

@media (max-width:1200px) {
	body {
		padding:0;
	}
	#mobileMenu {
		display:none;
		overflow:hidden; /* wrap floats and margins */
		padding:0.25em;
	}
	#mobileMenu li {
		float:left;
		width:50%;
	}
	#mobileMenu a {
		display:block;
		padding:0.75em;
		margin:0.25em;
		background:var(--right-sidebar-bg);
        color: black;
        word-wrap: break-word;
	}
	#menuShowHide + label {
		display:block;
		padding:1em;
		margin-bottom:1em;
		text-align:center;
		font-weight:bold;
		background:var(--left-sidebar-bg);
		color:#FFF;
	}
	#menuShowHide + label:active,
	#menuShowHide + label:focus,
	#menuShowHide + label:hover {
		background:var(--right-sidebar-bg);
	}
	#menuShowHide + label:before {
		content:"Show menu";
	}
	#menuShowHide:checked + label {
		margin:0;
	}
	#menuShowHide:checked + label:before {
		content:"Hide Menu";
	}
	#menuShowHide:checked ~ #mobileMenu {
		display:block;
	}
}

/* End mobile menu */

/* @media (max-width: 700px)  {
    body {
      color:antiquewhite
    }
}

/* N64 palette: Grey is #C1BED1 RGB(193,190,209) https://www.colourlovers.com/palette/1898124/N64
Green is #069330 RGB(6,147,48)
Yellow is #FFC001 RGB(255,192,1)
Blue is #011DA9 RGB(1,29,169)
Red is #C20D02 RGB(194,13,2)

SNES controller palette: https://www.color-hex.com/color-palette/47707
#a7a4e0	(167,164,224)
#514689	(81,70,137)
#b2b4b2	(178,180,178)
#54585a	(84,88,90)
#707372	(112,115,114) */