/* 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: #5C0D16;
  color: black;
  font-family: Didot, serif;
  margin: 0px;
}
  
.bordered {
  border: 3px solid black;
  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 {
  display: flex;
  align-items: flex-end; 
  height: 10rem;
  background-image: url("/assets/websiteheaderconcept2.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: 2rem;  /* 1rem = computed font size (usually 16px) */
  background: black;
}

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

nav a:hover {
  color: #C24F89;
}
.main-content {
  background: #CCA3A5;
}
.left-sidebar {
  background: #5C0D16;
}
.right-sidebar {
  background: #5C0D16;
}
.footer {
  background: #330A0E;
}

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

          
        
          
        
/* 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%;
  }
}