:root {
     --bs-primary: #b07c4b;
     --bs-secondary: #ffffff;
}

body {
     background-color: #ffcfa4;
     font-family: "studio-mn", sans-serif;
     font-weight: 400;
     font-style: normal;
}
h1 {
     font-family: "journal", sans-serif;
     font-weight: 600;
     font-style: normal;
}
h2 {
     font-family: "journal", sans-serif;
     font-weight: 400;
     font-style: italic;
}
.card {
     background-color: #b07c4b;
     font-family: "journal", sans-serif;
     font-weight: 600;
     font-style: normal;
     color: white;
}
.card-2 {
     height: 100x;
     width: 300px;
     background-color: #b07c4b;
     font-family: "journal", sans-serif;
     font-weight: 600;
     font-style: normal;
     color: white;
}
.card-mon-text{
     font-family: "journal", sans-serif;
     font-weight: 600;
     font-style: normal;
     color: white;
     font-size: 18px;
}
.navbar {
     font-family: "journal", sans-serif;
     font-weight: 600;
     font-style: normal;
     color: #ffffff;
     background-color: #b07c4b;
     height: 100px;
}
.footer {
     font-family: "journal", sans-serif;
     font-weight: 600;
     font-style: normal;
     color: #ffffff;
     background-color: #b07c4b;
     height: 50px;
     --bs-border-color: #bc9067;
     --bs-border-width: 3px;
     --bs-border-style: dashed;
}
.card-img-top{
     margin-top: 10px;
     align-self: center;
     max-width: 75%;
}
.img-card-dragon {
     background-color: #b07c4b;
     width: 600px;
     max-width: 90%;
}
.img-card-beholder {
     background-color: #b07c4b;
     width: 600px;
     max-width: 90%;
}
.img-card-illithid {
     background-color: #b07c4b;
     width: 600px;
     max-width: 90%;
}
.img-card-mimic {
     background-color: #b07c4b;
     width: 600px;
     max-width: 90%;
}
@media screen and (min-width: 1200px) {
     .img-card-dragon{
          width: 700px;
     }
     .img-card-beholder{
          width: 1000px;
     }
     .img-card-illithid {
          width: 700px;
     }
     .img-card-mimic {
          width: 1000px;
     }
}
@media screen and (max-width: 600px) {
     .img-card-dragon{
          width: 400px;
     }
     .img-card-illithid {
          width: 600px;
     }
     .img-card-mimic {
          width: 600px;
     }
}