:root, html {
    --color-default1: skyblue;
    --clr-accent1: hotpink;
    --clr-accent2: yellowgreen;
}

body, #container {
    background-color: var(--color-default1);
    /* min-height: 100vh; */

}

header {

}

h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: clamp(5em, 20vw, 20em);
    color: transparent;
    text-shadow: 0px 0px 15px aliceblue;
    position: fixed; left: -40px; top: 0px; transform: translateY(-30%);
    z-index: -1;

}

main {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    gap: 10px;
    margin-top: 14em;
}

.item {
    border: 4px solid blueviolet;
    flex-grow: 0;
    flex-basis: 20%;
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    background-image: url(../images/GuitarImg.jpg);
    background-size: cover;
    background-size: cover;
    background-position: center center;
}

.item:nth-child(1){
    background-image: url(../images/idk.jpg);
}
.item:nth-child(2){
    background-image: url(../images/GuitarImg.jpg);
}
.item:nth-child(3){
    background-image: url(../images/max-verstappen-sim-rig.jpg);
}
.item:nth-child(4){
    background-image: url(../images/wave_logo.jpg);
}
.item:nth-child(5){
    background-image: url(../images/yeti.jpg);
}
.item:nth-child(6){
    background-image: url(../images/my_Guitars.jpeg);
}

.item h2 {
    position: absolute; top: 20px; left: -30px;
    background-color: var(--clr-accent2);
    color:aqua;
    text-transform: lowercase;
    padding: 4px 40px;
    text-align: center;
    transform: rotate(-30deg);
}

footer {
    position: fixed; left: 0; bottom: 0;
    width: 100%; height: 220px;
    background-image: url(https://www.rrphillips.ninetyfive.dev/cis195/images/mountains.svg);
    background-repeat: repeat-x;
    background-position: center 40px;
}