*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    display: grid;
    color: #fff;
    background-color: #3C3C3C;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@media (min-width: 50em) {
    .index-grid-container{
    max-width: 99.5%;
    margin: 0 .25% .25% .25%;
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-areas:
        "box1   box1   box1   box1"
        "box2   box2   box2   box2"
        "box3   box3   box3   box3"
        "box4   box4   box4   box4"
        "box5   box5   box5   box5"
        "box6   box6   box6   box6"
        "box7   box7   box7   box7"
        "footer footer footer footer";
}
}

@media (max-width: 76.5em) {
    .index-grid-container{
    max-width: 99.5%;
    margin: 0 .25% .25% .25%;
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-areas:
        "box1"  "box2"  "box3"  "box4"   "box5"
        "box6"   "box7"  "footer";
}
}

.grid-item{
    display: flex;
    flex-direction: column;
    place-content: center;
    text-align: center;
    background-color: #000;
    z-index: 1;
}

.wrapper {
    width: 100%;
    max-width: 1512px;
    padding: 4rem;
    place-self: center;
}

.title-wrapper {
    width: 100%;
    place-items: center;
    text-align: left;
    gap: 2.5rem;
}
.content-wrapper {
    display: grid;
    width: 100%;
    place-items: start;
    text-align: left;
    gap: 2rem;
}

img {
    width: 100%;
}

a {
    color: #fff;
    text-decoration: none;
}
.buttons {
    display: flex;
    align-items: center;
    gap: 3.5rem;
}
button {
    display: inline-block;
    background-color: #000;
    color: #D15706;
    padding: 1rem 2.5rem;
    margin-top: 8svh;
    border: 1px solid #d1570669;
    border-radius: 8px;
    font-size: large;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 1px 1px 25px 10px rgba(255, 255, 255, 0.4);
    border: .25px solid orangered;
}
button:hover {
    box-shadow: 1px 1px 25px 10px #d15706aa;
    color: #eee;
  }


.grid-item-1{
    grid-area: box1;
    background: url(./noise.svg) repeat fixed center;
    background-size: contain;
    border-bottom: .25px solid #d1570669;
}
.grid-item-1-wrapper{
    width: 100%;
    max-width: 95%;
    margin: auto;
    padding: 10svh 5%;
    place-self: center;
    text-align: left;
}
.grid-item-1 h1 {
    font-size: clamp(3.3rem, 4vw, 60rem);
    font-weight: 500;
    filter: drop-shadow(0rem 0rem 1rem #0008);
    color: #D15706;
}
.grid-item-1 p {
    font-size: clamp(1.8rem, 1.2vw, 60rem);
    font-weight: 300;
    filter: drop-shadow(0rem 0rem 1rem #0008);
    color: #eee;
}
#color {
    font-size: clamp(2.8rem, 3vw, 60rem);
    color: rgb(98, 97, 97);
}

.grid-item-2{
    grid-area: box2;
    background: transparent;
    height: 100svh;
}

.grid-item-3{
    grid-area: box3;
    background: url(./noise.svg) repeat fixed center;
    background-size: contain;
    height: 100svh;
}

.grid-item-4{
    grid-area: box4;
    background: transparent;
    height: 100svh;
}

.grid-item-5{
    grid-area: box5;
    background: url(./noise.svg) repeat fixed center;
    background-size: contain;
    height: 100svh;
}

.grid-item-6{
    grid-area: box6;
    background: transparent;
    height: 100svh;
}

.grid-item-7{
    grid-area: box7;
    background: url(./banner-image1.png) no-repeat fixed center;
    background-size: cover;
    height: 100svh;
}

.grid-item-footer{
    grid-area: footer;
    border-radius: 0 0 8px 8px;
    background: url(./noise.svg) repeat fixed center;
    background-size: contain;
    height: 20svh;
}