@import "SC-reset.css";

.tinos-regular {
  font-family: "Tinos", serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather {
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

body {
    display: flex;
    flex-flow: column;
    place-items: center;
    gap: 10px;
    height: 100vh;
}

h1 {
    font-size: 5vw;
}

nav {
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
    width: 100%;
}

a {
    font-size: 2vw;
    text-decoration: none;
    color: black;
    border: 2px solid black;
    padding: 5px;
    padding-right: 20px;
    padding-left: 20px;
    box-shadow: 10px 10px;
}

h2 {
    font-size: 3vw;
    margin-top: 30px;
}

#grid {
    display: grid;
    grid-template-areas: 
    "hd1 hd2 hd3 hd4"
    "img1 img2 img3 img4"
    "hd5 hd6 hd7 hd8"
    "img5 img6 img7 img8";

    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr auto 1fr;

    column-gap: 1vw;
    row-gap: 1vh;
}

img {
    width: 20vw;
    height:250px;
}

header {
    font-weight: bold;
    text-decoration: underline;
    font-size: larger;
}

#hd1 {
    grid-area: hd1;
}

#hd2 {
    grid-area: hd2;
}

#hd3 {
    grid-area: hd3;
}

#hd4 {
    grid-area: hd4;
}

#hd5 {
    grid-area: hd5;
}

#hd6 {
    grid-area: hd6;
}

#hd7 {
    grid-area: hd7;
}

#hd8 {
    grid-area: hd8;
}

#img1 {
    grid-area: img1;
}

#img2 {
    grid-area: img2;
}

#img3 {
    grid-area: img3;
}

#img4 {
    grid-area: img4;
}

#img5 {
    grid-area: img5;
}

#img6 {
    grid-area: img6;
}

#img7 {
    grid-area: img7;
}

#img8 {
    grid-area: img8;
}

#loco {
    font-weight: normal;
    text-decoration: underline;
    font-size: larger;
}

footer {
    font-size: 1vw;
    border: 2px solid black;
    width: 99%;
    text-align: center;
}