/* this is a comment */
/* Comments are used to explain the code, and may help when you edit the source code at a later date. */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #8363c7;
}
        
* {
  box-sizing: border-box;
}
/* Style the header */
        
header {
  background-color: #FFB6C1; /* pinku */
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: #d11fa2; /* this is the header's font color - magenta */
  border-style: dotted;
  border-width: thick;
}
        
/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}
        
/* Style the navigation menu - everything except the text */
nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #9bde95; /* green */
  padding: 10px; /* only affects the green space - can make the green larger or smaller */
}
        
/* Style the list inside the menu - where the text sits */
nav ul {
  list-style-type: none;
  padding: 0;
  background-color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100px;
}

li a {
  display: block;
  padding: 12px 25px;
  text-decoration: none;
  text-align: center
}

/* Change the link color on hover */
li a:hover {
  background-color: #D7F5D5;
}

/* Style the content */
article {
  -webkit-flex: 3;
  -ms-flex: 3; /* this one and the one above it don't appear to change anything */
  flex: 7; /* changing this makes the article section wider or narrower - it also affects the width of the nav bar */
  background-color: #fce562; /* yellow */
  padding: 20px;
}
        
/* Style the footer */
footer {
  background-color: #62a5fc; /* blue */
  padding: 10px;
  text-align: right;
  color: white;
}
        
/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 100px) {
section {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.gallery { /* originally named div.gallery but Neocities says adding div to the beginning is redundant */
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}}