:root {
    --slide-bg-color: rgb(125, 57, 144);
}

* {
    margin: 0;
    padding: 0;
}

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

.slide {
    position: fixed;
    height: 100vh;
    width: 100vw;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(4, 1fr);
    padding-bottom: 10px;
    padding-top: 5px;

    background-color: var(--slide-bg-color);
    color: white;

    .slide_images {
        grid-column: 3 / 11;
        grid-row: 2 / 3;
        align-self: center;
    }
    h1 {
        grid-column: 5 / 9;
        grid-row: 1 / 2;
        text-align: center;
        align-self: end;
        margin-bottom: 20px;
    }
    h2 {
        grid-column: 5 / 9;
        grid-row: 1 / 2;
        text-align: center;
        margin-bottom: 20px;
    }
    p {
        grid-column: 4 / 10;
        grid-row: 3 / 4;
        text-align: center;
        margin-top: 20px;
    }
    .button {
        grid-row: 4 / 5;
    }
    .button_1 {
        grid-column: 3 / 5;
    }
    .button_2 {
        grid-column: 9 / 11;
    }
    .button_3 {
        grid-column: 6 / 8;
        align-self: center;
    }
    .title_button {
        grid-column: 6 / 8;
        grid-row: 3 / 4;
    }
    .haileyCat {
        grid-column: 5 / 9;
        grid-row: 2 / 3;
        align-self: center;
        width: 100%;
        height: 100%;
    }

}