@charset "UTF-8";

body {
    padding: 0px;
    margin: 0px;
    text-align: center;
    background-color: rgba(119,134,10,1.00);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

header {
    height: 121px;
    width: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    border-radius: 2px;
    border-left: 2px solid rgba(255,255,255,1.00);
    border-right: 0px solid rgba(255,255,255,1.00);
    border-bottom: 2px solid rgba(255,255,255,1.00);
    border-top: 2px inset rgba(47,47,47,1.00);
    background-color: #2E2D2D;
    color: #FDFBFB;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 50px;
    font-style: normal;
    font-variant: normal;
    text-shadow: 3px 1px #000000;
}


nav {
    position: relative; 
    z-index: 10000;
    width: 100%;
    height: 125px;
    margin: 20px auto 0px auto;
    background-color: rgba(52,52,52,1.00);
    border: 2px solid rgba(51,51,51,1.00);
    border-radius: 300px;
    white-space: nowrap;
    color: #FCFAFA;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
}


nav ul  {
	margin: 0px; 
	padding: 0px; 
	list-style-type: none; 
	display: flex; 
	justify-content: center; 
}

nav ul li  {
    display: block; 
    height: 125px;
    background-color: #313131; 
    border-left: 2px solid white; /* A nice left border to divide our buttons from one another */
    position: relative;
}


nav ul li:last-child /* This pseudo-class selector selects the last object in your HTML file that meets the criteria of the selector. In this case it's looking for the last list item inside an unordered list inside a <nav> tag. */ {
	border-right: 2px solid white; /* This adds a nice right border on our last button container to cap our navigation */
}


nav ul li a /* This selector controls the buttons in our navigation bar. The compound selector is looking for instances of <a> tags that are inside of <li> tags which are inside of <ul> tags that are themselves inside of <nav> tags */ {
    display: block;
    height: 125px; /* Our buttons are the same height as the nav containing them */
    padding: 0px 35px; /* This padding property adds 35px of padding to the left and right of the word inside the button. That lets the word determine the width of the button */
    background-color: #2E2D2D; /* Our buttons are PINK. P I N K, I tell you! */
    color: #FAF8F8; /* White text in our buttons */
    font-weight: bold; /* Bold text in our buttons */
    text-decoration: none; /* No link underline */
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; /* A nice font for buttons */
    font-size: 1.5em; /* A nice text size for our button links */
    line-height: 125px; /* Vertically center our type in our buttons */
}

nav ul li a:hover /* This pseudo-class selector changes the button whenever it is rolled over by a mouse */ {
	background-color: chocolate;
	background-image: url("../images/duckys-evil-twin.jpg"); /* THE DUCK SEES THROUGH YOUR LIES. H E  S E E S ! */
}

nav ul li ul /* This is the style to control the list for our dropdown menus */ {
    display: none;   /* This hides the menu from prying eyes */
    position: absolute; /* This keeps the menu's width from strteching the button */
    flex-direction: column; /* This makes sure our buttons stack vertically */
    border-left: 2px solid white;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    left: -2px;
    /* margin-left: -115px; This "centers" our menu */
}

nav ul li:hover > ul /* This selector means that when an <li> tag containg a <ul> tag is rolled over, then these properties are applied to that <ul> tag */ {
    display: block; /* This makes our hidden menu visible when it's container <li> is rolled over */
}

nav ul li ul li /* This styles our button containers on our dropdown menu */ {
    height: 65px;
    border-top: 2px solid white;
    border-left: none;
    border-right: none;
    border-bottom: none;
    position: relative;
}

nav ul li ul li:last-child /* This stripps off the last-child border we applied to the main menu */ {
    border-right: none;
}

nav ul li ul li a /* This styles the buttons in a dopdown menu */ {
    height: 65px;
    line-height: 65px;
    background-color: mediumseagreen;
}

nav ul li ul li:nth-child(3) a /* This one selects <a> tags that are in the third <li> tag in our dropdown menu */ {
    background-color: lime; /* YOU ASKED FOR IT! */
}

nav ul li ul li ul {
    display: none;
    top: -2px;
    left: 100%;
}

nav ul li ul li:hover ul {
    display: block;
}

nav ul li ul li ul li a {
    background-color: brown;
}


main {
    width: 75%;
    padding: 30px;
    margin: 41px auto 0px auto;
    border: 4px inset rgba(251,250,251,1.00);
    border-radius: 17px;
}


h1 {
    color: rgba(248,245,249,1.00);
    font-size: 3.93em;
    line-height: 1.15em;
    text-shadow: -3px -3px 5px rgba(0,0,0,1.00);
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
}

h2 {
    color: rgba(249,248,249,1.00);
    font-size: small;
    letter-spacing: 1em;
    text-shadow: 0px 0px 5px rgba(1,1,1,1.00);
    word-wrap: break-word;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
}


p {
	color: rgba(255,255,255,1.00);
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	line-height: 1.35em;
	text-align: justify;
}


.button /* This class style controls our big standalone button */ {
	display: block; /* This allows us to apply block level styling (margin, padding, etc.) */
	background-color: rgba(255,0,0,1.00);
	background-image: url("../images/shifting-back.gif"); /* This is what I get for listening to you people */
	width: 55%;
	margin: 20px auto;
	padding: 40px; /* Keeps out button THICC around our link type */
	border: 2px solid rgba(255,255,255,1.00);
	border-radius: 25px;
	color: rgba(255,255,255,1.00); /* White link type */
	text-decoration: none; /* No link underline beneath our type */
	font-weight: bold; /* Bold link type */
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; /* Pretty link type */
	font-size: 1.75em; /* Big link type */
}


.button:hover /* This pseudo-class selector controls what happens to our big standalone button when it gets rolled over by a mouse*/ {
	background-color: rgba(0,0,0,1.00); /* The V O I D */
	background-image: none; /* NO SHIFTING COLORS */
}


.flexbox-playpen {
    display: flex; /* This enables us to set whether we want any objects inside this container to display in a vertical stack or a hoizontal stack */
    flex-direction: row; /* This property indicates we want our objects inside to display in a row in the order that they appear in the HTML stack */
    flex-wrap: wrap; /* This makes the items inside our container wrap so that as our items approach the edge of the container, they snap doen to the next line */
    justify-content: center; /* This horizontally aligns our boxes in the center */
    align-items: center; /* This vertically aligns our boxes in the center */
	background-color: rebeccapurple;
	padding: 30px;
	border: 2px solid rgba(255,201,0,1.00);
    border-radius: 13px;
	-webkit-box-shadow: inset 5px 5px 10px 3px rgba(20,0,52,1.00);
	box-shadow: inset 5px 5px 10px 3px rgba(20,0,52,1.00); /* look at that beautiful inset drop shadow. What depth! */
    margin: 50px 0px;
}

.flexbox-playpen div /* A general style for all our flexbox divs */ {
    background-color: bisque; /* B I S Q U E */
    height: 150px;
    width: 150px;
    margin: 20px;
    text-align: center;
    line-height: 150px;
    font-size: 3em;
}

.flexbox-playpen div:nth-child(3) /* This selects the third of our <div> tags */ {
    background-color: tomato; /* To-may-to? To-mah-to? */
    flex-basis: 600px; /* This property overrides the width specified above and widens our big, stretchy, tomato boi out to 600px wide. */
}

.position-playpen {
    height: 175px;
    width: 80%;
    min-width: 600px;
    position: relative; /* This makes sure our absolutely positioned objects within stay within this container (good luck) */
	background-color: cadetblue;
	padding: 30px;
	border: 2px solid rgba(0,255,171,1.00);
	border-radius: 13px;
	-webkit-box-shadow: inset 5px 5px 10px 3px rgba(0,36,52,1.00);
	box-shadow: inset 5px 5px 10px 3px rgba(0,36,52,1.00);
	margin: 50px 0px;
}

.position-playpen div /* Here are some base styles for our <div> tags */ {
    background-color: darksalmon;
    height: 150px;
    width: 150px;
    text-align: center;
    line-height: 150px;
    font-size: 3em;
}

.position-playpen div:nth-child(1) /* This one styles the first <div> */ {
    background-color: khaki;
    position: absolute; /* This enables us to absolutely control the position of this <div> tag within the container */
    right: 10%; /* Each edge is represented by it's own property. The numbers indicate proximity to that property */
    bottom: -3%; /* This one's sticking out the bottom. Lol! */
}


.position-playpen div:nth-child(2) /* This one styles the second <div> */  {
    background-color: slategrey;
    color: white;
    position: fixed /* This enables us to absolutely control the position of this <div> tag within the browser window */;
    left: 25px;
    top: 20px;
}

.position-playpen div:nth-child(3) /* This one styles the third <div> */ {
    background-color: deeppink;
    position: absolute;
    z-index: 5; /* This controls z-axis placement (i.e. how close they are to the viewer) */
    left: -20px;
}

.position-playpen div:nth-child(4) /* This one styles the fourth <div> */  {
    background-color: yellow;
    position: absolute;
    left: 71px;
    top: 42px;
    z-index: 6; /* FOUR ontop of THREE! Madness! Madness, I tell you! */
}


.some-columns /* Add three columns to any text with just the simple addition of this class selector */ {
    column-count: 3; /* How many columns you want */
    column-gap: 50px; /* How much space between columns */
    column-rule: 2px dotted rgba(255,255,255,255); /* What does the pretentious line between your columns look like? */
}


.someword {
	color: rgba(6,255,0,1.00);
	line-height: 2.45em;
	text-align: right;
}


footer {
    width: 85%;
    height: 200px;
    /* Why are these separated instead of being individual values on a margin: property? Because Dreamweaver writes them separately */
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/full_White_2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    /* Okay, these boders are a little wild. But I wanted to demonstrate that you can do a different border for each side */
    border-top: 15px dotted rgba(0,255,55,1.00);
    border-bottom: 31px double rgba(89,89,89,1.00);
    border-left: 10px groove rgba(123,30,0,1.00);
    border-right: 17px inset rgba(50,50,50,1.00);
    border-bottom-right-radius: 65px;
}