:root {
    --Palette-Burgundy-Burgundy: hsla(0, 58%, 20%, 1);
    --Palette-Burgundy-Burgundy-900: hsla(3, 44%, 25%, 1);
    --Palette-Burgundy-Burgundy-800: hsla(6, 35%, 31%, 1);
    --Palette-Burgundy-Burgundy-700: hsla(7, 28%, 36%, 1);
    --Palette-Burgundy-Burgundy-600: hsla(8, 23%, 43%, 1);
    --Palette-Burgundy-Burgundy-500: hsla(9, 18%, 50%, 1);
    --Palette-Burgundy-Burgundy-400: hsla(10, 19%, 58%, 1);
    --Palette-Burgundy-Burgundy-300: hsla(11, 20%, 66%, 1);
    --Palette-Burgundy-Burgundy-200: hsla(12, 20%, 75%, 1);
    --Palette-Burgundy-Burgundy-100: hsla(13, 19%, 86%, 1);
    --Palette-Burgundy-Burgundy-50: hsla(20, 20%, 94%, 1);
    --Palette-Pomegranate-Pomegranate: hsla(359, 84%, 53%, 1);
    --Palette-Pomegranate-Pomegranate-900: hsla(5, 85%, 57%, 1);
    --Palette-Pomegranate-Pomegranate-800: hsla(9, 85%, 60%, 1);
    --Palette-Pomegranate-Pomegranate-700: hsla(10, 86%, 65%, 1);
    --Palette-Pomegranate-Pomegranate-600: hsla(12, 86%, 68%, 1);
    --Palette-Pomegranate-Pomegranate-500: hsla(14, 87%, 73%, 1);
    --Palette-Pomegranate-Pomegranate-400: hsla(15, 88%, 77%, 1);
    --Palette-Pomegranate-Pomegranate-300: hsla(16, 89%, 82%, 1);
    --Palette-Pomegranate-Pomegranate-200: hsla(18, 91%, 87%, 1);
    --Palette-Pomegranate-Pomegranate-100: hsla(18, 94%, 93%, 1);
    --Palette-Pomegranate-Pomegranate-50: hsla(18, 100%, 97%, 1);
    --Palette-Misc-Black: hsla(0, 0%, 0%, 1);
    --Palette-Misc-White: hsla(0, 0%, 100%, 1);
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('https://place-of-interest.com/assets/typography/PPNeueMontreal-Regular.woff2') format('woff2'),
        /* Best compression */
        url('https://place-of-interest.com/assets/typography/PPNeueMontreal-Regular.woff') format('woff');
    /* Legacy support */
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

body{
    cursor: none;
    background-color: var(--Palette-Burgundy-Burgundy);
    color: var(--Palette-Burgundy-Burgundy-100, #E2D7D4);
    font-family: 'PP Neue Montreal', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    /* Chrome, Safari, newer Edge */
    -moz-osx-font-smoothing: grayscale;
    /* Firefox on macOS */
    text-rendering: optimizeLegibility;
    overflow: hidden;
}

.is-get-notified .content{
    margin: auto;
}

.wrapper{
    display: flex;
    width: 100%;
    height: 100vh;
    padding: 2.5rem;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    container-type: inline-size;
    container-name: content-area;
}

@container content-area (max-width: 500px) {
    .wrapper .poi-logo {
        width: 100%;
    }
}

.content {
    width: clamp(10vw, 96.8182vw - 69.8182px, 75vw);
    max-width: 500px;
}

h1{
    font-size: 0.1px;
    color: var(--Palette-Burgundy-Burgundy);
    position: absolute;
    top: 0;
    left: 0;
}

p, a{
    leading-trim: both;
    text-edge: cap;
    font-family: "PP Neue Montreal";
    font-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

p{
    margin-bottom: 3em;
    letter-spacing: 1px;
}

a{
    color: var(--Palette-Burgundy-Burgundy-100);
    /* display: inline; */
}

a:hover{
    color: var(--Palette-Misc-White);
}


.poi-logo{
    width: 50vw;
}

#arrow-cursor {
    position: fixed;
    /* Positions the cursor relative to the viewport */
    width: 50px;
    height: 50px;
    /* SVG encoded in a data URI for the arrow shape */
    background-image: url('https://place-of-interest.com/assets/poi-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    /* Prevents the cursor div from blocking mouse events on elements underneath it */
    pointer-events: none;
    /* Centers the rotation point of the arrow */
    transform-origin: center;
    /* Smooths the rotation animation */
    transition: transform 0.1s ease-out;
    z-index: 9999;
}

body:has(.target:hover) #arrow-cursor {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    /* Adds a smooth fade out */
}

/* Optional: Bring back the default pointer so the user knows they can click */
.target:hover {
    cursor: pointer;
}

.btn{
    text-decoration: none;
    font-size: 18px;
    color: var(--Palette-Pomegranate-Pomegranate);
    border: 1.5px solid var(--Palette-Pomegranate-Pomegranate, #EC2327);
    display: inline;
    padding: 1.125rem 1rem;
    border-radius: 99rem;
}

.btn:hover {
    background-color: var(--Palette-Pomegranate-Pomegranate);
    color: var(--Palette-Misc-White);
}

/* Get Notified */

.is-get-notified .intro{
    margin-bottom: 2rem;
}