/* The main font... */
.bree-serif-regular {
  font-family: "Bree Serif", serif;
  font-weight: 400;
  font-style: normal;
}  

.texty {
  font-family: "Bree Serif", serif;
  font-weight: 400;
  font-style: normal;
  color: white;
}  

.heed{
  background-color: rgb(204, 0, 0);
  color: white;
  font-family: "Bree Serif", serif;
  font-weight: 100;
  font-style: normal;
  width: 100%;
  height: 100px;
  padding: 0px;
  display: inline-block;
  text-align: center;
  font-size: 72px;
  text-shadow: 3px 4px 3px rgb(69, 48, 102);
}

.hero{
  background-image:url("https://static0.gamerantimages.com/wordpress/wp-content/uploads/2023/08/pokemon-wcs-machop-machoke-machamp-1.jpg");
  background-size: cover; 
    background-repeat: no-repeat;
    background-position: center; 
  color: white;
  color: black;
  font-family: "Bree Serif", serif;
  font-weight: 400;
  font-style: normal;
  width: 100%;
  height: 350px;
  padding: 0px;
  display: inline-block;
  padding-left: 8px;
}

        /* Box stuff is separate into the left and right boxes for the different sides of the screen. */
/* For workout stuff */

/* sample */
.workleft{
  background-color: rgb(168, 55, 83);
  color: white;
  font-family: "Bree Serif", serif;
  font-weight: 400;
  font-style: normal;
  justify-content: center;
  border: solid black;
  padding-left: 8px;
  width: 40%;
  height: fit=content;
    display: flex;
    left: 25px;
    margin-top: 25px;
    border-radius: 8px 8px 8px 8px;
}

.workright{
  background-color: rgb(168, 55, 83);
  color: white;
  font-family: "Bree Serif", serif;
  font-weight: 400;
  font-style: normal;
  border: solid black;
  justify-content: center;
  padding-left: 8px;
  width: 40%;
  height: fit-content;
    display: flex;
    
    right: 25px;
    margin-top: 25px;
    border-radius: 8px 8px 8px 8px;
}

/* For the Pokemon stuff */
.pokeleft{
  background-color: rgb(185, 155, 185);
  color: rgb(0, 0, 0);
  font-family: "Bree Serif", serif;
  font-weight: 400;
  font-style: normal;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border: solid black;
  padding-left: 8px;
  width: 40%;
  height: fit-content;
  left: 40px;
  margin-top: 50px;
  border-radius: 8px 8px 8px 8px;
}

.pokeright{
  background-color: rgb(185, 155, 185);
  color: rgb(0, 0, 0);
  font-family: "Bree Serif", serif;
  font-weight: 400;
  font-style: normal;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border: solid black;
  padding-left: 8px;
  width: 40%;
  height: fit-content;
  right: 40px;
  margin-top: 50px;
  border-radius: 8px 8px 8px 8px;
}

.pressy{
  width: auto;
  background-color: rgba(255, 255, 255, 0.76);
  text-align: center;
  margin: auto;
}

/* The modal... very WIP */
.pcmodal{
  display: flex;
  position: absolute;
  margin: auto;
  padding-left: 25px;
  top: 0; bottom: 180;
  left: 0; right: 0;
  background-image: linear-gradient(rgb(156, 8, 8), rgb(160, 160, 160));
  color: rgb(255, 255, 255);
  font-family: "Bree Serif", serif;
  font-weight: 400;
  font-style: normal;
  width: 480px;
  height: 480px;
  position: absolute;
  border: solid black;
}

.task-card {
  width: calc(33.33% - 20px); 
  margin: 10px; 
  display: inline-block; 
  vertical-align: top; 
  background-color: #2e1414; 
  padding: 10px; 
  box-sizing: border-box; 
}


.task-name {
  font-size: 18px; 
  margin-bottom: 5px; 
}

.task-image {
  width: 100%; 
  height: auto; 
  border-radius: 5px; 
  margin-bottom: 5px;
}
.pokemon-container {
  display: flex;
  flex-wrap: wrap;
}
.pokemon-container div {
  width: calc(15% - 20px); /* Adjust the width as needed */
  margin: 10px;
}