html {
    --scale: 1.4055636896;

    -webkit-transform: scale(var(--scale));
        -ms-transform: scale(var(--scale));
            transform: scale(var(--scale));

    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
        transform-origin: 0 0;

    width: calc(100vw / var(--scale));
    height: calc(100vh / var(--scale));

    /* On mobile, certain browser elements can shrink the html element 
       (vertically), so 100% can be smaller than 100vh. */
    max-height: calc(100% / var(--scale));
}

@media only screen and (max-width: 1600px) { html { --scale: 1.17130307467; } }
@media only screen and (max-width: 1536px) { html { --scale: 1.12445095168; } }
@media only screen and (max-width: 1440px) { html { --scale: 1.0541727672; } }
@media only screen and (max-width: 1366px) { html { --scale: 1; } }
@media only screen and (max-width: 1280px) { html { --scale: 0.93704245973; } }
@media only screen and (max-width: 1024px) { html { --scale: 0.74963396778; } }
@media only screen and (max-width: 768px) { html { --scale: 0.56222547584; } }

body {
    --col-night-black: #11151C;
    --col-blue: #212D40;
    --col-pink: #FBC3BC;
    --col-white: #FFFFFA;

    --col-green: #256D1B;
    --col-yellow: #E3B505;
    --col-red: #C03221;

    margin: 0;
    min-height: 100%;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    background-color: #0C1017;

    font-family: noto-sans, sans-serif;
    color: var(--col-white);
}

.canvas {
    --box-shadow: inset 0px 0px 150px rgba(0, 0, 0, 0.47);
    --trans-time: 0.08s;

    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;

    position: relative;
    min-height: 100%;
    
    background: var(--col-night-black);
}

.cta-btn {
    --padding-x: 51.5px;
    --padding-y: 23.5px;

    --box-shadow:
        0px 17px 36px rgba(0, 0, 0, 0.23),
        inset -3px -5px 9px rgba(17, 21, 28, 0.43),
        inset 3px 5px 9px rgba(255, 255, 250, 0.72);

    padding: var(--padding-y) var(--padding-x);
    margin-top: 60px;

    background: var(--col-pink);
    border-radius: 38px;
    cursor: pointer;
    
    font-weight: 600;
    font-size: 31.5px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: var(--col-night-black);

    -webkit-transition: background var(--trans-time);
    -o-transition: background var(--trans-time);
    transition: background var(--trans-time);
}
/* Prevent sticky hover on mobile */
@media (hover: hover) {
    .cta-btn:hover {
        background: #CC9E99;
    }
}
.cta-btn:active {
    --padding-offset-x: 1px;
    --padding-offset-y: 2px;
    --box-shadow:
        inset 3px 5px 9px rgba(17, 21, 28, 0.43),
        inset -3px -5px 9px rgba(255, 255, 250, 0.72);

    padding:
        calc(var(--padding-y) + var(--padding-offset-y))
        calc(var(--padding-x) - var(--padding-offset-x))
        calc(var(--padding-y) - var(--padding-offset-y))
        calc(var(--padding-x) + var(--padding-offset-x));

    background: #CC9E99;
}


/* ——— Utilities ——— */

.hidden {
    display: none !important;
}

.invisible {
    position: absolute;
    opacity: 0;
    cursor: unset;
    height: 0;
    width: 0;
}

.box-shadow {
    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.line-clamp {
    --max-lines: 2;

   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--max-lines);
           line-clamp: var(--max-lines);
}

.flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.flex-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}