* {
	margin: 0;
	padding: 0;
    scroll-behavior: smooth;
}

:root{
    --globalcolor:  #f4efef;
    --contrast:  #1a1a13;
    --alternative: #6e9180;
}

::selection {
    background: var(--alternative);
}

body {
    width: 100vw;
    height: 100dvh;
    text-align: center;
    overflow: hidden;
    color: var(--globalcolor);
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    background: var(--contrast) url(../img/background.jpg) no-repeat center / cover;
}

#wrapper {
    position: absolute;
    
    mix-blend-mode: difference;

    -webkit-filter: blur(0.5px);
    -moz-filter: blur(0.5px);
    -o-filter: blur(0.5px);
    -ms-filter: blur(0.5px);
    filter: blur(0.5px);

    width: 25dvw;
    min-width: 300px;
    top: calc(50% - 150px);
    right: 5dvw;
}
#wrapper p {
    font-family: 'Times New Roman', Times, serif;
    opacity: 0.8;
}

#reverie {
    display: inline-block;
    width: 100%;
    height: 8.5dvw;
    background: url(../img/reverie.svg?rld) no-repeat center / contain;
    vertical-align: middle;
    opacity: 0.8;
}

#buttons {
    display: inline-block;
    width: 100%;
    margin-top: calc(1vh + 1dvw);
    vertical-align: middle;
}

#buttons a {
    display: inline-block;
    border: 1px solid var(--globalcolor);
    padding: .7dvw 2dvw;
    border-radius: 50px;
    width: 30%;
    color: var(--globalcolor);
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0.8;
}

#buttons a:hover {
    border: 1px solid white;
    color: white;
    opacity: 1;
}











#footer {
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 8px;
    letter-spacing: 0.1em;
    opacity: 0.5;
}

#footer p, #cookie {
    display: inline-block;
}

#cookie a {
    color: var(--globalcolor);
    margin: 0 10px;
    text-decoration: none;
    line-height: 2em;
    border-bottom: 1px dotted var(--globalcolor);

}
#cookie a:hover {
    color: var(--globalcolor);
}






@media screen and (max-width: 720px) {
    body {
        background: var(--contrast) url(../img/background.jpg) no-repeat 10% / cover;
    }
    #wrapper {
        top: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: 50px;
        width: 100%;
    }
    #reverie, #buttons {
        display: block;
        width: 100dvw;
    }
    p {
        margin: 10px auto 15px auto;
    }
    #buttons a {
        padding: 5px 15px;
    }
    #reverie {
        display: block;
        width: 95dvw;
        height: 90px;
        margin: 0 auto;
    }
    #footer {
        width: 100%;
        right: 0;
    }
    #footer p {
        margin: 0 auto;
    }
    #footer a {
        margin: 0 2px;
    }
}