body{
    background: rgb(1,75,0);
background: linear-gradient(0deg, rgba(1,75,0,1) 0%, rgba(25,25,55,1) 37%, rgba(105,66,19,1) 69%, rgba(224,0,255,1) 100%);
}
h1, h2, h3{
    font-family: "Creepster", system-ui;
    font-weight: 400;
    font-style: normal;
}
header{
    width: 90%;
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns:20% 20% 20% 20% 20%;
    justify-items: center;
    grid-template-areas:
    ". . header . . "
    ". . couch . ."
    "info info info info info";
    
    div:first-child{
        display: flex;
        flex-direction: row;
        img{
            width: 70px;
            height: auto;
        }
        h1{
            display: flex;
            flex-direction: column;
            span:first-child{
                font-size: 2.5rem;
            }
            span:last-child{
                font-size: 1.15rem;
            }
        }
    }
    .item_c{
        display: none;
    }
    .item_d{
        display: block;
    }
}
@media screen and (min-width: 400px) {
    .item_c{
        display: block !important;
    }
    .item_d{
        display: none;
    }
    header{
        grid-template-columns:20% 30% 30% 20%;
        grid-template-areas:
        ". header header ."
        "deer info info couch ";
    }
}
@media screen and (min-width: 800px) {
    .item_d{
        margin-top: 1rem;
        display: block !important;
    }
    header{
        grid-template-columns:20% 30% 30% 20%;
        grid-template-areas:
        ". header header ."
        "deer info info couch ";
    }
}



.item_a{
    grid-area: header;
}
.item_b{
    grid-area: couch;
    width: 70px;
}
.item_c{
    grid-area: deer;
    width: 70px;
}
.item_d{
    grid-area: info;
    background-color: black;
    color: white;
    font-style: italic;
    font-size: 1.1rem;
    padding: 1rem;
    margin: 0rem 1rem;
    text-align: center;
}

p, li {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}
.wrapper{
    margin: 0 auto;
    width: 90%;
    margin-top: 1rem;
    margin-bottom: 3rem;
    h2{
        font-size: 4rem;
        text-align: center;
        color: rgb(255, 140, 255);
        margin-bottom: 1rem;
    }
    ul{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2vw;
    place-items: center;
    justify-content: space-around;
    }
}

.item{
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    img{
        width: 200px;
        filter: grayscale(0);
    }
    h3{
        text-align: center;
        font-size: 1.5rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    p{
        text-align: center;
    }
}



.humans{
    background-color: #fffccb;
}
@media screen and (min-width: 400px) {
	.humans{
		order: -10;
        img{
            filter: grayscale(1);
        }
	}
}
@media screen and (min-width: 800px) {
	.humans{
		order: -10;
        img{
            filter: invert(1);
        }
        img:hover{
            filter: invert(0);
        }
	}
}

.animals{
    background-color: #f98adb;
}
@media screen and (min-width: 400px) {
	.animals{
		order: -8;
        img{
            filter: grayscale(1);
        }
	}
}
@media screen and (min-width: 800px) {
	.animals{
		order: -8;
        img{
            filter: invert(1);
        }
        img:hover{
            filter: invert(0);
        }
	}
}

.supernatural{
    background-color: #af461d;

}
@media screen and (min-width: 400px) {
	.supernatural{
		order: -7;
        img{
            filter: grayscale(1);
        }
	}
}
@media screen and (min-width: 800px) {
	.supernatural{
		order: -7;
        img{
            filter: invert(1);
        }
        img:hover{
            filter: invert(0);
        }
	}
}

.electronics{
    background-color: cyan;
}
@media screen and (min-width: 800px) {
	.electronics{
		order: -5;
        img{
            filter: grayscale(1);
        }
	}
}
@media screen and (min-width: 800px) {
	.electronics{
		order: -5;
        img{
            filter: invert(1);
        }
        img:hover{
            filter: invert(0);
        }
	}
}