body {
  background-color: #272727;
}

.header {
  overflow: hidden;
  background-color: black;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.logo {
  width: 100px;
  height: 55px;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #7A8093;
  color: rgb(0, 0, 0);
}

/* Style the active/current link*/
.header a.active {
  background-color: #cacdce;
  color: rgb(0, 0, 0);
}

/* Float the link section to the right */
.header-right {
  float: right;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  background-color: #272727;
  padding: 2px;
  column-gap: 2px;
  row-gap: 5px;
  grid-template-areas:
    "main main main sidebar"
    "main main main sidebar"
    "main main main sidebar"
    "main main main sidebar"
    "main main main sidebar"
    "main main main sidebar"
    "main main main sidebar"
    "footer footer footer footer";
}
.grid-item {
  background-color: black;
  border: 1px solid;
  color: #272727;
  padding: 5px;
  font-size: 12px;
  text-align: center;
}
.imgs {
  width: 230px;
  border-radius: 5px;
 
}

.navbar {
  display: flex;
  flex-direction: row;
  padding: 3px;
  margin: 3px;
}
.navbar a {
  padding: 5px;
  margin: 5px;
  background-color: #1D1D1D;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  width: 20px;
}
.navbar a:hover {
  background-color: #b4b4b4;
  color: #ffffff;
}
.navbar a.active {
  background-color: black;
  color: #ffffff;
}

.b {
  text-decoration: none;
  color: #ffffff;
  font-size: 20px;
}
.item-d {
  grid-area: footer;
  background-color: #b68440;
  color: white;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
  background-color: black;
  color: white;
  font-size: 15px;
  padding: 3px;
}
.grid-active {
  background-color: #d5d7d8;
  color: black;
}
.p {
  color: black;
  font-size: 30px;
  text-decoration: none;
}

h1 {
  color: #f8d04d;
  text-align: center;
}

h2{
  color: #f8d04d;
}

.patreon {
  background-color: #ff424d;
  color: #ffffff;
  width: 176px;
  height: 34px;
  font-style: sans-serif;
  font-size: 14px;
  align-items: center;
  padding: 7.5px 16px;
  border-radius: 17px;
  text-decoration: none;
  visibility: visible;
  border: none;
}

footer {
  background-color: black;
  color: #ffffff;
  padding: 20px;
}

/* dropdown menu */

.mobile-container {
  margin: auto;
  background-color: #d5d7d8;
  height: 500px;
  color: black;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: black;
  position: relative;
  padding: 20px 10px;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: #ffffff;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: #1D1D1D;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #1D1D1D;
  color: #ffffff;
}

.active {
  background-color: #04aa6d;
  color: white;
}

.donate {
  background-color: #ffbb00a9;
  color: black;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 18%;
}

.donate a:hover {
  background-color: #ddd;
  color: black;
}

.myProgress {
  width: 100%;
  background-color: rgb(228, 227, 227);
}

.myBar {
  width: 4.7%;
  height: 30px;
  background-color: #ffbb00a9;
  text-align: center;
  line-height: 30px;
  color: black;
}

.button a {
  overflow: hidden;
}

.button {
  background-color: #b6b6b6;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

a:hover {
  background-color: #cacdce;
  color: rgb(0, 0, 0);
}

.menupics {
  width: 35px;
  height: 35px;
}

.menupics69 {
  width: 45px;
  height: 35px;
}

.txt{
  color: #ffffff;

}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
  .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    background-color: #272727;
    padding: 1px;
    column-gap: 2px;
    row-gap: 5px;
    grid-template-areas:
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "main"
      "footer";
  }
  .grid-item {
    background-color: black;
    border: 1px solid black;
    padding: 5px;
    font-size: 25px;
    text-align: center;
  }
  .item-c {
    grid-area: footer;
    background-color: black;
    color: rgb(255, 255, 255);
    font-size: 15px;
  }
  .imgs {
    width: 340px;

    border-radius: 5px;
  }

  .txt{
  color: #ffffff;
   font-size: 20px;
}
}