/* This is what a comment looks like in CSS! */
/* CSS is how you style the HTML elements of your website. You can change colors, fonts, and
   the positioning of your HTML content. To learn how to do something, just try searching Google
   like "css change link color". */

/* set correct box model */
* {
    box-sizing: border-box;
}

body {
  background-color: seashell;
  color: #4D302A;
  font-family: Verdana;
  margin: 0px;
}
  
.bordered {
  border: 3px solid floralwhite;
  margin: 5px;
  padding: 10px;
}

.fit img {
  width: 100%;
  height: auto;
}

.centered {
  text-align: center;
}

/* flexbox container */
.holy-grail-flexbox {
  display:flex;
  flex-wrap:wrap;
}

/* columns (mobile) */
.holy-grail-flexbox > * {
  width:100%;
  padding:1rem;
}

/* background colors */
.header {
  background: rosybrown;
}
.main-content {
  background: seashell;
}
.left-sidebar {
  background: rosybrown;
}
.right-sidebar {
  background: rosybrown;
}
.footer {
  background: indianred;
}

/* tablet breakpoint */
@media (min-width:768px) {
  .left-sidebar,
  .right-sidebar {
    width:50%;
  }
}


nav {
  display: flex;  /* Allow children to be positioned with formatting */
  justify-content: space-between;  /* Horizontally distribute children */
  align-items: center;  /* Vertically align children */
  width: 100%;
  height: 2rem;  /* 1rem = computed font size (usually 16px) */
  background: indianred;
}

nav a {
  text-decoration: none;
  font-weight: bold;
  color: white;
}

nav a:hover {
  color: orangered;
}


.header {
  display: flex;
  align-items: flex-end; 
  height: 10rem;
  background-image: url("/assets/polka.JPG");
  background-position-x: center;
  background-position-y: center;
}

nav {
  display: flex;  /* Allow children to be positioned with formatting */
  justify-content: space-between;  /* Horizontally distribute children */
  align-items: center;  /* Vertically align children */
  width: 100%;
  height: 3.5rem;  /* 1rem = computed font size (usually 16px) */
  background: indianred;
  
}

nav a {
  text-decoration: none;
  font-weight: bold;
  color: floralwhite;
}

nav a:hover {
  color: lightpink;
}        
          
        
/* desktop breakpoint */
@media (min-width:1024px) {
  .header {
    order:-2; /* header first */
  }
  .left-sidebar {
    /* left sidebar second (first in second row) */
    order:-1; 
  }
  .main-content {
    width:50%;
  }
  .left-sidebar,
  .right-sidebar {
    width:25%;
  }


a {
  color: floralwhite; /* Replaces the blue with your choice of color */
}


.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}



html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#position-container {
   min-height:100%;
   position:relative;

}
#body {
   margin-left:10%;
   padding:1rem;
   padding-bottom:60px;	/* Height of the footer */
   background:seashell
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:3.5rem; /* Height of the footer */
   background:indianred;
}


}