/* INIZIO STILE GLOBALE */
@import url('https://fonts.cdnfonts.com/css/haettenschweiler');
@import url('https://fonts.cdnfonts.com/css/eras-demi-itc');

/* Basic styling for your articles */

#articles {
  background-color:white;
  padding-top:6rem;
}

.container-articles {
  padding-bottom: 8rem;
  max-width:;
}

.boxes a {
  text-decoration:none;
}

.boxes a:hover {
  text-decoration:none;
}

.boxes a:hover {
  transform-box: fill-box;
}

.article-box {
  width: 20rem;
  height: 15rem;
  border: 4px solid #0095f6;
  border-radius: 10px;
  margin: 0 auto;
  margin-bottom:3rem;
  background-repeat:  no-repeat;
  background-size: cover;
}

@media screen and (max-width: 1200px) {
.article-box {
  width: 18rem;
  height: 13rem;
  border: 4px solid #0095f6;
  background-color: white;
  border-radius: 10px;
}
}

.article-box img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.article-box h3 {
  color: white;
  font-size: 1.2rem;
  margin-top:10rem;
  margin-bottom:0rem;
  padding:0.5rem;
  font-family: Eras Demi Itc, sans-serif;
  background-color:#5c16c5;
}

@media screen and (max-width: 1200px) {
.article-box h3 {
  font-size: 0.8rem;
  margin-top:8.5rem;
  margin-bottom:0rem;
  padding:0.5rem;
}
}

.article-box h4 {
  color: white;
  font-size: 1rem;
  margin-top:0rem;
  padding:0.2rem;
  font-family: Eras Demi Itc, sans-serif;
  background-color: #0095f6;
}

@media screen and (max-width: 1200px) {
.article-box h4 {
  font-size: 0.8rem;
  margin-top:0rem;
  padding:0.2rem;
}
}

.article-box p {
  color: black;
  font-size: 0.8rem;
  margin-top:1rem;
  font-family: Eras Demi Itc, sans-serif;
}

/* Style for the full article display page */
#article-content {
  padding:1rem;
}

#article-content img {
  max-width:100%;
  max-height:500px;
  padding:1rem;
}

@media screen and (max-width: 768px) {
#article-content img {
  max-width:100%;
  max-height:350px;
  padding:1rem;
}
}

#article-content h1 {
  font-family: Eras Demi Itc, sans-serif;
  font-size: 2rem;
  color:white;
  background-color:#5c16c5;
  padding: 1rem;
  margin-top:4rem;
}

@media screen and (max-width: 1200px) {
#article-content h1 {
  font-size: 1.5rem;
  margin-top:2rem;
}
}

#article-content h4 {
  font-family: Eras Demi Itc, sans-serif;
  font-size: 1.5rem;
  background-color:#0095f6;
  color:white;
  padding: 0.5rem;
  margin-bottom:4rem;
}

@media screen and (max-width: 1200px) {
#article-content h4 {
  font-size: 1.3rem;
}
}


#article-content p {
  color:black;
}