* {
    box-sizing: border-box;
    margin: auto;
    font-size: 10px;
}

:root {
    --main-title: #FFFFFF;
    --badge-title: #5EEAD4;
    --badge-bg: rgb(94, 234, 212, .1);
    --grad-color-1: #246683;
    --grad-color-2: #073145;
    --grad-color-3: #073145;
}

body {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;

    max-width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    /* Radial Gradient */
    background: var(--grad-color-1);
    background: radial-gradient(circle at 0% -50%, var(--grad-color-1) 0%, var(--grad-color-2) 50%, var(--grad-color-3) 100%);
}


.wrapper {
    width: 100%;
    height: auto;
    max-width: 630px;

    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}

img {
    width: 47.7%;
    height: auto;
}

h1 {
    font-size: clamp(6rem, -2.0000rem + 22.2222vw, 12rem);
    color: var(--main-title);
    align-self: center;
}
/* Scale font-size based on this explanation: https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ */
span.badge {
    font-size: clamp(2.25rem, -0.0833rem + 6.4815vw, 4rem);
    color: var(--badge-title);

    /* Badge Background */
    background-color: var(--badge-bg);
    width: min(12em, 65%);
    padding: .5em;    
    border-radius: 100px;

    display: flex;
    justify-content: center;

}