/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
}

html {
		/* Standard text-settings below */
	font-size: 1em;
    line-height: 1.4em;
}
@font-face {
 font-family: 'murder';
 src: url(musicals.ttf);
}
@font-face {
 font-family: 'murder2';
 src: url(font2.ttf);
}
@font-face {
 font-family: 'murder3';
 src: url(germs.ttf);
}
* {

  box-sizing: border-box;
}

body {
}
body.dark-mode {
    background-color: #333;
    color: #fff;
}
/* Style the header */
header {
  background-color: lightblue;
  padding: 30px;
  text-align: center;
  font-size: 20px;
  color: white;
  font-family: 'murder', Arial, sans-serif;
}
header.dark-mode {
    background-color: black;
    color: lavender;
    font-family: 'murder', Arial, sans-serif;
}
button {
	background-color: lavender;
    color: darkblue;
    border-width: 20px;
    border-color: hotpink;
    font-family: 'murder3', Arial, sans-serif;
}
button.dark-mode {
	background-color: black;
    color: lavender;
    border-width: 20px;
    border-color: green;
    font-family: 'murder2', Arial, sans-serif;
}
img {
    border-width: 0px;

}
img.dark-mode {
    border-color: red;
    border-style: dotted;
    border-width: 10px;
}

/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 30%;
  background: lightyellow;
  padding: 20px;
  font-family: 'murder2', Arial, sans-serif;
}
nav.dark-mode {
    background-color: darkred;
    color: teal;
    font-family: 'murder2', Arial, sans-serif;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  font-size: 1.8vw;
  height: 100%;
  font-family: 'murder', Arial, sans-serif;
}
article p {
	font-family: 'murder3', Arial, sans-serif;
}
article p.dark-mode {
	font-family: 'murder2', Arial, sans-serif;
}
article.dark-mode {
    background-color: #333;
    color: #fff;
    font-family: 'murder', Arial, sans-serif;

}
/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
  background-color: lightgreen;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  color: white;
  font-family: 'murder', Arial, sans-serif;
  height: 1.5wv;
}
footer.dark-mode {
    background-color: black;
    color: lightpink;
    font-family: 'murder', Arial, sans-serif;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}


/* Mobile First CSS: we'll design for phone sizes first, then add media queries for larger screens later */

body {
	
	
}


#container {
	
}









/* ========================================
MEDIA QUERIES!
You can adjust the min-width numbers below, and add as many new media queries as you need.
======================================== */



/* Minimum width for laptops. */
@media all and (max-width: 650px) {
	
	article {font-size: 20px;}
	
	
} /* closes 769px+ */




/* Minimum width for desktop screens. */
@media all and (min-width: 1024px) {
	
	
	
	
} /* closes 1024px+ */