body {
    text-wrap: pretty;
    opacity: 0;
}

.bold {
    font-weight: bold;
}

.itl {
    font-style: italic;
}

/* New font size system that uses variables to control min & max */
h1, h2, h3, h4, h5, h6, p, li, span, p b {
    /* Defaults */
    --max-font-size: 16;
    --min-font-size: calc(var(--max-font-size) * 0.8);
    --max-screen-width: 1400;
    --min-screen-width: 450;
    /* Formulas */
    --font-size-calc: calc((var(--min-font-size) * 1px) + (var(--max-font-size) - var(--min-font-size)) * ((100vw - (var(--min-screen-width) * 1px)) / (var(--max-screen-width) - var(--min-screen-width))));
    --clamp-max: calc(var(--max-font-size) * 1px);
    --clamp-min: calc(var(--min-font-size) * 1px);
    font-size: clamp(var(--clamp-min), var(--font-size-calc), var(--clamp-max));
}

/* Different defaults since span and b tags are always nested in other tags. */
span, p b {
    --max-font-size: inherit;
    --min-font-size: inherit;
}

/* Font setup */

h1, h2, .archivo {
    font-family: "Archivo Black", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
}

h3, h4, p, li, .montserrat {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

@font-face {
    font-family: 'BrittanySignatureRegular';
    src: url('https://motivace.com/showcase-static/css/BrittanySignatureRegular.woff2') format('woff2'),
        url('https://motivace.com/showcase-static/css/BrittanySignatureRegular.woff') format('woff');
    font-display: swap;
}

h5 {
    font-family: 'BrittanySignatureRegular', sans-serif;
    font-weight: normal;
    font-style: normal;
}

/* Font sizes and styling */
p, li {
    --max-font-size: 18;
    --min-font-size: 16;
    font-weight: 500;
}

p {
    margin-block: 1em;
    line-height: 150%;
}

ul {
    margin-block: 0.9375em;
    line-height: 150%;
}

li {
    margin-left: 1.25em;
    margin-top: 0.3125em;
    margin-bottom: 0.4125em;
    line-height: 150%;
}

h1 {
    --max-font-size: 75;
    --min-font-size: 40;
    line-height: 1.1em;
}

h2 {
    --max-font-size: 55;
    --min-font-size: 35;
    line-height: 1.1em;
}

h3 {
    --max-font-size: 30;
    --min-font-size: 22;
    font-weight: 500;
    line-height: 1.3em;
}

h4 {
    --max-font-size: 22;
    --min-font-size: 18;
    font-weight: 800;
    line-height: 1.3em;
}

h5 {
    --max-font-size: 75;
    --min-font-size: 45;
    line-height: 100%;
    padding-block: 0.4em 0.7em;
    margin-block: -0.3em -0.3em;
}

p:last-child, li:last-child {
    margin-bottom: 0px;
}

/* Let's Chat Text */
#lets_chat {
    cursor: pointer;
    position: relative;
    text-decoration: none;
    display: inline-block;
}

#lets_chat h3 {
    color: #fff;
    display: inline;
}

#lets_chat:after {
    content: "";
    height: min(9px, 2vw);
    position: absolute;
    top: 116%;
    left: 0px;
    background: #ece151;
    width: 100%;
    transform: scaleX(0.6);
    transform-origin: 0% 0%;
    transition: transform 0.5s ease-in-out;
}

@media (hover: hover) {
    #lets_chat:hover:after {
        transform: scaleX(1);
    }
}

/* show by default on mobile since there's no hover */
@media (hover: none) {
    #lets_chat:after {
        transform: scaleX(1);
    }
}


/* Custom video play button styles */
.video-with-play-button {
    position: relative;
    cursor: pointer;
}

.video-play-button {
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;

    /* Styling */
    width: min(100px, 20%);
    aspect-ratio: 1;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    cursor: pointer;
    border: unset;
    backdrop-filter: blur(2px);

    /* The "play" triangle */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;

    /* Smooth transition */
    transition: background-color 0.25s ease;
}

@media (hover: hover) {
    .video-play-button:hover {
        background-color: rgba(0, 0, 0, 1);
    }
}