/* Name: Socks Hickman */
/* Date: 03/10/2025*/

/* Most of the elements have been completed for this exercise */
/* Most of the elements' properties has been completed for this exercise */
/* You need to complete the missing elements and properties */

/* colours
8B0000 (dark red)
FBA149 (orange)
FCD89E (pale orange)
 */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin-top: 50px;
  background-color: #3e138f;
}

#wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  min-width: 576px;
  padding: 50px;
  width: 50%;
  background-color: #bebebe;
  border-style: inset;

}

header {

  align-items: center;
  display: flex;
  justify-content: center;
  padding: 50px;
  background-color: #c1c1c1;
  margin: auto;
  max-width: 84%;
   border-style: inset;
  /* align-items: center;
  display: flex;
  justify-content: center;
  background-color: #72169c;
  padding: 20px; */
}

nav {
  /* vertically center items */
  align-items: center;

  /* display flex; - makes the nav a flex container */
  /* the default is a row */
  display: flex;

  /* adds equal space around each flex items */
  /* remove to flat items left */
  justify-content: space-around;

  /* add some padding - top and bottoms (5rem = 16px */
  padding: 0.5rem 0;
}

nav a {
  /* font colour */
  color: black;

  /* make the link fill the available space */
  display: block;

    /* add some padding - all sides */
  padding: 0.2rem;

  /* makes all text automatically uppercase */
  text-transform: uppercase;

}

nav a:hover {
  background-color: #8B0000;

  /* makes the border of the element rounded */

  color: white;
  border-style: inset;

}

main {
  padding: 1.5rem;
  background-color: #FCD89E;
  border-style: inset;
}

main::after {
  clear: both;
  content: "";
  display: table;
}

h1 {
  color:#ffed9e;
}

h2 {
  color:#6b008b
}

h3 {
  color:#dcebff;
}

.column {
  /* height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #545454;
  overflow-x: hidden;
  padding-top: 20%;
  margin-left: 12.5%; */
  top: 33.8%;
  left: 0;
  height: 100%;
  position: fixed;
  float: left;
  width: 17%;
  background-color: gray;
  border-style: inset;
  margin-left: 8%;
  height: 50%;
  z-index: 1;
  overflow-x: hidden;
  padding-top: 15%;
  padding-bottom: 50%;
  
}

.column2 {
  top: 33.8%;
  right: 0;
  height: 100%;
  position: fixed;
  float: right;
  width: 17%;
  background-color: gray;
  border-style: inset;
  margin-right: 8%;
  height: 50%;
  z-index: 1;
  overflow-x: hidden;
  padding-top: 15%;
  padding-bottom: 50%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

footer {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  padding: 1rem 0;
  background-color: #FCD89E;
  color: #8B0000;
}

section {
  float: left;
  padding: 25px;
  text-align: center;
  width: 33.33%;
  border-style: solid;
  border-width: 1px;
  border-color: #FBA149;
  /*  display the animals in rows of three  */
}

img {
  /*  this targets all images */
  /*  images will be responsive and will fill their container */
  width: 100%;
}


/* the following is our main responsive elements */
/* media queries */
/*  media queries are used to apply styles based on the viewport size */
/* largest to smallest */


/* target medium viewports (992px wide or narrower) */
@media (max-width: 992px) {

  nav {
    align-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }

  nav a {
    flex: 1 1 25%;
    text-align: center;


  }
}


/* target small viewports (576px wide or narrower) */
@media (max-width: 576px) {

  nav {
    /* switch the nav from a horizontal row */
    /* to a vertical column . . . */
    flex-direction: column;

    /* removes the space between nav elements */
    gap: 0;

    /* add small outer spacing */
    margin: 0.2rem;
  }

  nav a {
    background-color: #FCD89E;
    color: #8B0000;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(139, 0, 0, 0.2);

    display: block;
    flex: 0 0 100%;
    text-align: center;
    width: 100%;

    transition: padding 0.2s linear;
  }

  nav a:hover {
    padding: 0.5rem 0;
  }
}