/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@import url(https://fonts.bunny.net/css?family=alegreya:500i);


* {
  font-family: "Abhaya Libre", serif;
  font-style: normal;
} /* establishes font for everything */

h1, h2, h3, h4, h5, h6 {
   font-family: 'Alegreya', serif; /* https://fonts.bunny.net/family/alegreya */
   font-weight: 500;
} /* special italic header font */
body {
  background-color: #a14f53;
  color: #91c2e3;
} /* establishes text and bg color */
button {
  background-color: #008cbc;
  color: black;
  font-weight: bold;
} /* button styling */
button:active {
 background-color: #40afd4;
 opacity: .5;
 color: pink;
} /* button styling when its clicked */
ul li a{
  color: black;
  text-decoration: none;
  font-style: italic;
  font-size: 20px;
} /* cahnges list item hyperlink color */
li::marker{
  color: black;
} /* changes bullet point color */

body, .container {
  min-height: 100vh;
  background-color: black;
}

.container {
  display:flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2em /* top and bottom */ 5em /*left and right */;
}
.center {
 text-align: center; 
} /* [CLASS] centers text */

header{
  flex: 1;
  border-radius: 2em;
  background-color: green;
}

section {
  flex: 4;
  border-radius: 2em;
  display: flex;
}

.container .col-left{
  flex: 1;
  border-radius: 2em;
  background-color: pink;
}
.col-middle {
  flex: 2 ;
  border-radius: 2em;
  background-color: pink;
}
.container .col-right{
  flex: 1;
  border-radius: 2em;
  background-color: purple;

}

.container2 section {
  flex-direction: row-reverse;
}

footer {
  flex: 1;
  border-radius: 2em;
  background-color: green;
}

.col-left{
  flex: 4;
  border-radius: 2em;
  background-color: pink;
}

.col-right{
  flex: 1;
  border-radius: 2em;
  background-color: purple;
}
@media (max width: 968px){
  section, .container2 section{
    flex-direction: column;
  }
  
  .container {
    margin: 1em 2em;
  }
}