/* FONTS IMPORTED FROM GOOGLE */
.arsenal-regular {
  font-family: "Arsenal", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.arsenal-regular-italic {
  font-family: "Arsenal", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.ewert-regular {
  font-family: "Ewert", serif;
  font-weight: 400;
  font-style: normal;
}

/* BACKGROUND (LAYER 0) */
body {
  font-family: "Arsenal", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: rgb(255, 136, 115);
}

/* DECLARING THE PAGE LAYOUT */
@media (max-width: 620px) {
  .container {
    grid-template:
      "header"
      "sidebar"
      "main"
      "footer";
      width: 100%;
  }
   Lside {
    display: none;
  }
  Rside {
    display: none;
  } 
}

.container {
  display: grid;
  grid-gap: 10px;
  grid-template:
    "header header header"
    "sidebar main sidebar2"
    "sidebar footer sidebar2"
    / 1fr 4fr 1fr;
  background-color: rgb(255, 136, 115);
  padding: 5px;
  gap: 5px;
}

/* ASSIGNING PAGE LAOUT TERMS TO LAYOUT ELEMENTS */
header { grid-area: header; }
Lside { grid-area: sidebar; }
Rside { grid-area: sidebar2; }
main { grid-area: main; }
footer { grid-area: footer; }

/* LAYOUT ELEMENTS DEFINITIONS AND STYLES */
.container header {
  background-color:rgb(255, 99, 71);
  color:white;
  padding:10px;
  font-size: 30px;
  text-align: center;
}

.container Lside {
  background-color: #f1f1f1;
  color: #000;
  padding: 10px;
  font-size: 16px;
  text-align: left;
}

.container Rside {
  background-color: #f1f1f1;
  color: #000;
  padding: 10px;
  font-size: 16px;
  text-align: center;
}

.container main {
  background-color: #f1f1f1;
  color: #000;
  padding: 10px;
  font-size: 16px;
  text-align: center;
}

.container footer {
  background-color: #f1f1f1;
  color: #000;
  padding: 10px;
  font-size: 16px;
  text-align: center;
}

 /* DEFAULT FORMATTING */