@import "SoulCatsCss.css";

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

.bodoni-moda {
  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

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

a {
	text-decoration: none;
	color: white;
	font-size: 20px;
}

h1 {
	font-size: 7vw;
	color: white;
}

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

    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 8vh 1fr 8vh 1fr;
    column-gap: 1vw;
}

#hd1 {
    grid-area: hd1;
}

#hd2 {
    grid-area: hd2;
}

#hd3 {
    grid-area: hd3;
}

#hd4 {
    grid-area: hd4;
}

#hd5 {
    grid-area: hd5;
}

#img1 {
    grid-area: img1;
}

#img2 {
    grid-area: img2;
}

#img3 {
    grid-area: img3;
}

#img4 {
    grid-area: img4;
}

#img5 {
    grid-area: img5;
}

#hd6 {
    grid-area: hd6;
}

#hd7 {
    grid-area: hd7;
}

#hd8 {
    grid-area: hd8;
}

#hd9 {
    grid-area: hd9;
}

#hd10 {
    grid-area: hd10;
}

#img6 {
    grid-area: img6;
}

#img7 {
    grid-area: img7;
}

#img8 {
    grid-area: img8;
}

#img9 {
    grid-area: img9;
}

#img10 {
    grid-area: img10;
}

header {
    color: white;
    font-size: 2.5vw;
    margin-left: 1vw;
}

img {
    width: 15vw;
    height: 20vh;
    margin-left: 1vw;
}

#submit {
    background-color: white;
    color: black;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 35%;
}

#message {
    width: 90%;
    height: 150px;
}

input {
    border-radius: 10px;
    margin: 5px;
    padding: 3px;
}

label {
    color: white;
}

fieldset {
    border-radius: 10px;
    display: inline;
	border: white solid 2px;
    width: 40vw;
}

label::after {
    content: '*';
    color: red;
}

footer {
	align-self: flex-start;
	color: white;
}

@media screen and (max-width: 411px) {
    #grid {
        grid-template-areas: 
        "hd1 hd2"
        "img1 img2"
        "hd3 hd4"
        "img3 img4"
        "hd5 hd6"
        "img5 img6"
        "hd7 hd8"
        "img7 img8"
        "hd9 hd10"
        "img9 img10";

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

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

    img {
        width: 30vw;
        height: 20vh;
    }

    h1 {
        font-size: 14vw;
    }

    a {
        font-size: 4vw;
    }

    header {
        font-size: 4vw;
    }

    fieldset {
        width: 80vw;
    }

    footer {
        font-size: 2vw;
    }
}