html {
	user-select: none;
    --main-color: #002749;
    --text-color: #005799;
    --main-color-light: #dff0ff;
    --brand-color: rgb(from var(--main-color) r g b / 20%);
    --icon-size: 64px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-height: 100vh;
    background: radial-gradient(circle, var(--main-color-light), var(--main-color)) bottom center;
    background-size: 100% 200%;
}
body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-noise {
	--noise-opacity: .5;
    &::after {
		content: "";
		position: absolute;
		background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeBlend mode='screen'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
		mix-blend-mode: lighten;
		inset: 0;
		pointer-events: none;
		opacity: var(--noise-opacity, .5);
		filter: invert(0);
		z-index: 10000;
	}
}

.drop-shadow {
    --dropshadow: 0px .5rem 1rem;
    --dropshadow-color: 0, 0, 0;
    --dropshadow-opacity: 0.15;
    filter: drop-shadow( var(--dropshadow) rgba( var(--dropshadow-color), var(--dropshadow-opacity) ) );
}

.drop-shadow.blue {
    --dropshadow: 0px 1rem 2rem;
    --dropshadow-color: 5, 73, 168;
    --dropshadow-opacity: 0.45;
}

.container {
    background: linear-gradient(180deg, rgb(from #fff r g b / 80%) 0%, rgb( from var(--main-color-light) r g b / 90%));
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    max-width: 80vw;
    margin: 1rem;
    user-select: none;
}

.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../img/neoqm_logo_blue.svg') no-repeat center;
    background-size: var(--icon-size);
}

.icon svg {
    animation: rotate 4s linear infinite;
    width: calc( var(--icon-size) / 100 * 125);
    height: calc( var(--icon-size) / 100 * 125);
    fill: var(--brand-color);
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

h1 {
    font-size: 2rem;
    font-weight: 500;
    margin: 0;
    color: var(--text-color);
    letter-spacing: -.075rem;
}

.message {
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--text-color);
    padding: 1rem;
    border-top: 1px solid rgb(from var(--text-color) r g b / 10%);
    margin-top: 1rem;
}

.signature {
    font-size: 1rem;
}

@media (min-width: 576px) {
    .container {
        max-width: 80vw;
    }
    .message {
        font-size: .72rem;
    }
}

/* Medium devices (tablets, ≥768px) */
@media (min-width: 768px) {
    .container {
        max-width: 50vw;
    }
    .message {
        font-size: 1rem;
    }
}

/* Large devices (desktops, ≥992px) */
@media (min-width: 992px) {
    .container {
        max-width: 600px;
    }
    .message {
        font-size: 1.2rem;
    }
}