/* COLORS: */
:root { /* this lets you give the colors you use other names that can be used in the code, the advantage is that if you want to change all of your green borders to red (for example) you just have to type that in here instead of going through the whole stylehseet and changing each border (and it just helps to create a consistent color pallete) */
  --color-zero: skyblue;
  --color-one: darkslateblue;
  --color-two: aliceblue;
  --color-three: #5FB85F;
  --color-four: greenyellow;
  --color-five: black;
  --color-six: deepskyblue;
  --color-seven: honeydew;
}

/* ELEMENTS: */
body {
  background-color: var(--color-zero);
  font-family: ; /* this is where you could change the font of the entire page, googlefonts or whatever its called has a bunch of free ones you can use. you can also use different fonts for different elements if you want to */
}

*  {box-sizing: border-box;} /* lowkey don't worry about this just make sure you use it */

p,h1,h2,h3,h4,li { /* these are pretty much all of the text elements, being used here to give them all the same color */
  color: var(--color-one);
}

h1,h2,h3,h4 { /* all the headings are the same size... */
  font-size: 30px;
}

p,li,a { /* ...and all the regular text, links, and list items are the same size */
  font-size: 18px;
}

li.li2 { /* this is for taking away the bullet point/circle/whatever to the left of some of the list items in the navigation section */
  list-style-type: none;
}

a {color: var(--color-three);}

a:hover {color: var(--color-four);} /* i want the links to be a different color when hovering over them... */

a:active {color: var(--color-one);} /* ...and when you click them */

/* MOBILE ADJUSTMENTS: */
/* THIS IS FRANKLY A DISASTER AND THE LEAST ORGANIZED PART OF MY FUCKASS CODE UHH I DON'T EVEN WANT TO GO THROUGH THIS... BUT BASICALLY ANYTHING IN THIS SECTION IS A CHANGE MADE TO A CERTAIN ELEMENT IF THE WEBSITE IS BEING VIEWED ON A PHONE/OTHER SMALL SCREEN SO THE PAGE DOESN'T LOOK LIKE SHIT */
@media (max-width: 600px) {
  .wrapper {flex-direction: column!important;}
  .wrapper iframe,.archive {width: 100%!important;}
  div#title {height: 100px !important;}
  div#nav {order: 2!important;}
  div#home {order: 1!important;}
  h1,h2,h3,h4 {font-size: 20px!important;}
  p,li,a {font-size: 15px!important;}
  p.title,a#linktitle {font-size: 18px!important;}
  div.post,div#left,div#right,div.wpost {width: 100%!important;}
  div#right {padding: 0!important;}
  .staff {width: 33%!important;}
  div#lwdisplay,div.lwpost,div#patternviewer,div#patterncontrol {width: 100%!important}
  div#patterncontrol {margin-left: 0!important; margin-right: 0!important;}
}

/* CLASSES: */
.wrapper { /* This is what I call my invisible boxes.. I've set up the page using "flexbox" which you should research, it's fairly simple and probably the best way to organize content in a way that can be easily altered depending on screen size */
  display: flex;
  flex-direction: row;
}

.candy { /* this is the visible content inside the invisible boxes */
  border: 2px dotted var(--color-five);
  margin: 5px;
}

/* DIVS: */
div#wholepage {
  width: 100%;
}

div#title { 
  margin: 5px;
  flex-grow: 1;
  background-image: url("img/home.png"); /* THIS IS WHERE YOU CHOOSE YOUR HEADER IMAGE, I recommend storing all your images in a folder/multiple folders as is shown in the file path here, just for organization purpose*/
  background-size: 100%;
  background-position: center;
  height: 300px;
  background-color: var(--color-two);
  cursor: pointer;
}

div#nav {
  order: 1;
  flex-grow: 1;
  padding: 20px;
  background-color: var(--color-two);
}

div#home {
  order: 2;
  flex-grow: 16;
  padding: 20px;
  background-color: var(--color-two);
}

div#footer {
  flex-grow: 1;
  padding: 5px;
  text-align: center;
  background-color: var(--color-two);
}