/* 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." */


body {
  background-color: darkblue;
  color: white;
  font-family: comic;
  font-size: 24px;
  line-height: 1.5;
  background-size: 1%;
  border: 50px solid black;
}


header {
  font-family: "Spicy Rice", comic;
  background-color: #0016DF;
  color: #000;
  padding: 20px;
  position: sticky;
  top: 0;
  text-align: center;
}


p {
  text-align: center;
  color: white;
  font-size: xx-large;
  line-height: 1.6;
}


a {
  color: #23FF95;
  text-decoration: wavy;
  font-weight: bold;
  font-size: x-large;
}

table {
  color: #7E18C3;
}

.art-background {
  background-color: aliceblue;
  text-align: center;
  color: black;
}


.hero {
  background-color: #0016DF;
  color: white;
  padding: 4rem 0;
  text-align: center;
  margin-bottom: 2rem;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}


.blog-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.post-card {
  background: black;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  border: solid 10px #23FF95;
}

.post-card:hover {
  transform: translateY(-5px);
}

.post-image {
  height: 20px;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.post-content {
  padding: 1.5rem;
}

.post-content h2 {
  margin-bottom: 0.5rem;
  color: #FC1AA6;
}

.post-meta {
  color: #EFFE5D;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.post-excerpt {
  margin-bottom: 1rem;
  color: #0016DF;
}

.read-more {
  display: inline-block;
  color: #7E18C3;
  text-decoration: none;
  font-weight: bold;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .blog-posts {
    grid-template-columns: 1fr;
  }
}

.label {
  width: 300px;
  height: 2px;
  background-color: #0016DF;
  border-radius: 15%;
  color: black;
  padding: 20px 32px;
  text-align: center;
  display: inline-block;
  font-size: 20px;
  font-family: "comic-neue-bold";
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.img-size {
  width: 310px;
  height: 310px;
}

.img-size-presentation {
  width: 350px;
  height: 340px;

}

.col {
  width: 100%;
}


.align-text {
  text-align: center;
}

.row-flex {
  display: flex;
  gap: 5px;
  margin: 5px 0;
}

.header-link {
  font-size: x-large;
  font-family: comic;
  text-align: center;
}

.container {
  max-width: 750px;
  margin: 0 auto;
  padding: 0px;
}

.content-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  margin-top: 20px;
}

.image-container {
  flex: 1;
  min-width: 30px;
  border-radius: 10px;
  overflow: hidden;
}

.img-size:hover {
  transform: scale(1.02);
}

.text-content {
  flex: 1;
  min-width: 100px;
  font-size: 10px;

}

.subtitle {
  text-align: center;
  color: gray;
  margin-bottom: 30px;
  font-size: 1.2rem;
}

.decorative-element {
  height: 4px;
  width: 80px;
  margin: 15px 0;
  border-radius: 2px;
}

.gray-text {
  color: gray;
  font-size: x-large;
  text-align: center;
  text-shadow: 1px 1px #000;
}

.pink-big-text {
  color: #FC1AA6;
  font-size: 100px;

  text-align: center;
  text-shadow: 10px 2px #00063f;
}

.green-big-text {
  color: #23FF95;
  font-size: 100px;

  text-align: center;
  text-shadow: 10px 2px #00063f;
}


.yellow-big-text {
  color: #EFFE5D;
  font-size: 100px;

  text-align: center;
  text-shadow: 10px 2px #00063f;
}

.purple-big-text {
  color: #7E18C3;
  font-size: 100px;

  text-align: center;
  text-shadow: 10px 2px #00063f;
}

.blue-big-text {
  color: #0016DF;
  font-size: 100px;

  text-align: center;
  text-shadow: 10px 2px #00063f;
}



.pink-little-text {
  color: #FC1AA6;
  font-size: 40px;
  text-align: center;
  text-shadow: 1px 1px #00063f;
}

.green-little-text {
  color: #23FF95;
  font-size: 40px;
  text-align: center;
  text-shadow: 1px 1px #00063f;
}


.yellow-little-text {
  color: #EFFE5D;
  font-size: 40px;
  text-align: center;
  text-shadow: 1px 1px #00063f;
}

.purple-little-text {
  color: #7E18C3;
  font-size: 40px;
  text-align: center;
  text-shadow: 1px 1px #00063f;
}


.center-gifs {
  text-align: center;
  font-size: 90px;
  text-align: center;

}


.comic-neue-light {
  font-family: "Comic Neue", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 300;
  font-style: normal;
}

.comic-neue-regular {
  font-family: "Comic Neue", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.comic-neue-bold {
  font-family: "Comic Neue", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
}

.comic-neue-light-italic {
  font-family: "Comic Neue", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
}

.comic-neue-regular-italic {
  font-family: "Comic Neue", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-style: italic;
}

.comic-neue-bold-italic {
  font-family: "Comic Neue", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700;
  font-style: italic;
}

.spicy-rice-regular {
  font-family: "Spicy Rice", serif;
  font-weight: 400;
  font-style: normal;
}

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.main-nav li a {
  font-family: "Spicy Rice", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 30px;
  color: black;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.main-nav li a:hover {
  background-color: #0016DF;
  color: #000000;
}



.comic-neue-regular p {
  font-size: x-large;
  line-height: 1.6;
}