@import "nav.css";
@import "footer.css";
@import "header.css";


* {
    /* box-sizing: border-box;
    border: solid red 1px;
    padding: 1px;
    margin: 1px;  */
}


body {
    margin: 0px;
    padding: 0px;
}


#cont-grid{
    display: grid;
    margin: 5px;
    height: auto;
    grid-template: minmax(auto, auto) / repeat(2, 1fr);
    gap: 5px;
    justify-items: stretch;
    grid-template-areas:
    "hd hd"
    "blog-post-1 blog-post-1"
    "newsletter newsletter"
    "blog-post-2 blog-post-2"
    "blog-post-3 blog-post-3"
    "blog-post-4 blog-post-4"
    "blog-post-5 blog-post-5"
    "blog-post-6 blog-post-6"
    "ft ft";
}


@media (min-width: 600px) {
    #cont-grid {
      display: grid;
      margin: 25px;
      height: auto;
      grid-template: minmax(15vh, auto) / repeat(4, 1fr);
      gap: 25px;
      justify-items: stretch;
      grid-template-areas:
      ". hd hd ."
      "blog-post-1 blog-post-1 blog-post-2 blog-post-2"
      "blog-post-1 blog-post-1 blog-post-2 blog-post-2"
      "blog-post-3 blog-post-3 blog-post-4 blog-post-4"
      "blog-post-3 blog-post-3 blog-post-4 blog-post-4"
      "blog-post-5 blog-post-5 blog-post-6 blog-post-6"
      "blog-post-5 blog-post-5 blog-post-6 blog-post-6"
      "newsletter newsletter newsletter newsletter"
      "ft ft ft ft";
    }

    body {
        font-size: 25px;
    }
}    


#top {
    grid-area: hd;
}


#blog-post-1 {
    grid-area: blog-post-1;
    background-image: url("../images/card1.jpg");
}


#blog-post-2 {
    grid-area: blog-post-2;
    background-image: url("../images/card2.jpg");
}


#blog-post-3 {
    grid-area: blog-post-3;
    background-image: url("../images/card3.jpg");
}


#blog-post-4 {
    grid-area: blog-post-4;
    background-image: url("../images/card4.jpg");
}


#blog-post-5 {
    grid-area: blog-post-5;
    background-image: url("../images/card5.jpg");

}


#blog-post-6 {
    grid-area: blog-post-6;
    background-image: url("../images/card6.jpg");
}


#newsletter {
    grid-area: newsletter;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}


#ft {
    grid-area: ft;
}


.card-sec {
    width: 100%;
    background-size: 100% 100%;
    border: solid 1px yellowgreen;
    border-radius: 7px; 
    height: 250px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Anton', sans-serif;
}


.newsletter-cont-flex {
    display: flex;
    flex-flow: row wrap;
    padding: 5px;
}
  

.newsletter-element {
    margin: auto; 
    width: 45%;
}
  

input[type=text], input[type=submit] {
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 12px;
    margin: 0px;
    border: 1px solid #fffaf0;
    box-sizing: border-box;
}
  

input[type=submit] {
    margin-top: 5px; 
    font-size: 0.7em;
    text-align: center;
    background-color: yellowgreen;
    border: 2px solid yellowgreen;
    color: saddlebrown;
    transition: all 0.3s;
    border: none;
}
  

input[type=submit]:hover {
    background-color: transparent;
    border: 2px solid yellowgreen;
    color: #e54b4b;
    transform: scale(0.9);
}
  

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


.card-title:hover {
    color: rgb(255, 255, 255);
}


.author {
    color: rgb(1, 0, 5);
    border-top: 1px dashed black;
    border-bottom: 1px dashed black;
    background-color: rgb(132, 202, 230,0.3); 
    font-family: cursive;
    font-weight: bold;
    font-size: 14px;
}


.btn {
    text-align: center;
    margin: 5px;
}


button { 
    background-color: black;
    border: 2px solid #f6aa1c;
    border-radius: 5px;
    color: #5cc7c2;
}


.btn button a {
    display: block;
    margin: 8px;
}


button:hover {
    font-size: 0.6em;
    margin: 7px;
}


h3 {
    font-size: 20px;
    text-align: center;
}