.pre {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image: url('/src/imgs/pre_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.pre a {
    display: block;
    width: auto;
    justify-self: center;
    font-family: 'Chopsic', sans-serif;
    font-size: 4em;
    background: linear-gradient(to top, #444, white);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 0 2vh;
    transform: translateY(-100%);
    transition: transform 1s ease-in-out;
}

.pre a:hover {
    background: none;
    color: red;
    text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black,
    1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
}

.pre img {
    width: 64%;
    height: auto;
    justify-self: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.pre h2 {
    font-size: 2.5em;
    text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black,
    1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
    transform: translateY(100%);
    transition: transform 1s ease-in-out;
}