body,html {
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
}

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    width: 100%
}

main>section {
    background-image: radial-gradient(at center,hsl(219deg 62% 14%) 0,hsl(219deg 61% 14%) 8%,hsl(219deg 60% 13%) 17%,hsl(219deg 59% 12%) 25%,hsl(219deg 58% 12%) 33%,hsl(219deg 57% 11%) 42%,hsl(219deg 55% 10%) 50%,hsl(220deg 54% 10%) 58%,hsl(220deg 53% 9%) 67%,hsl(221deg 53% 8%) 75%,hsl(221deg 54% 8%) 83%,hsl(221deg 56% 7%) 92%,hsl(221deg 61% 6%) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

main>section:nth-child(2) {
    background-image: radial-gradient(at center,hsl(0deg 50% 22%) 0,hsl(359deg 50% 21%) 8%,hsl(359deg 51% 20%) 17%,hsl(358deg 51% 19%) 25%,hsl(358deg 52% 18%) 33%,hsl(357deg 52% 17%) 42%,hsl(357deg 52% 16%) 50%,hsl(357deg 53% 15%) 58%,hsl(357deg 53% 14%) 67%,hsl(357deg 54% 13%) 75%,hsl(358deg 55% 12%) 83%,hsl(359deg 56% 11%) 92%,hsl(0deg 60% 10%) 100%)
}

main section img {
    max-width: 50vw
}

main section a::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
    top: 0;
    left: 0
}

.visit-nudge {
    position: fixed;
    top: auto;
    bottom: 5vh;
    left: 0;
    right: 0;
    z-index: 3;
    background-color: rgba(255,255,255,.4);
    backdrop-filter: blur(5px);
    text-transform: uppercase;
    color: #fff;
    border-radius: 3px;
    letter-spacing: 2px;
    width: fit-content;
    height: fit-content;
    margin: auto;
    padding: .5rem;
    opacity: 0;
    animation: 1s .5s ease fadeInUp forwards
}

@media (max-width: 991px) {
    main section img {
        max-width:30vw
    }
}

@media (max-width: 767px) {
    main {
        grid-template-columns:1fr
    }

    main section img {
        max-width: 50vw
    }

    .visit-nudge {
        top: 0;
        bottom: 0
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(2rem)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}