@font-face {
    font-family: 'Mochiy Pop P One';
    src:          url('../web-fonts/mochiy-pop-p-one/mochiy-pop-p-one_regular.woff2') format('woff2'),
                  url('../web-fonts/mochiy-pop-p-one/mochiy-pop-p-one_regular.woff')  format('woff');
    font-style:   normal;
    font-variant: normal;
    font-weight:  normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html,
body {
    width:            100%;
    height:           100%;
    background-color: #ffffff;
}

html {
    font-size: 24px;
}

@media (min-width: 480px) {
    html {
        font-size: 29px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 37px;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 45px;
    }
}

@media (min-width: 1280px) {
    html {
        font-size: 53px;
    }
}

@media (min-width: 1440px) {
    html {
        font-size: 58px;
    }
}

@media (min-width: 1680px) {
    html {
        font-size: 65px;
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 72px;
    }
}

@media (min-width: 2560px) {
    html {
        font-size: 91px;
    }
}

body {
    padding: 0.25rem;
}

.container {
    width:           100%;
    height:          100%;
    overflow:        hidden;
    display:         flex;
    justify-content: center;
    align-items:     center;
    border-radius:   0.06125rem;
    background:      rgb(34, 193, 195);
    background:      linear-gradient(-5deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
}

.content {
    opacity:     0.95;
    font:        normal normal normal 1.0rem/1.5 'Mochiy Pop P One', sans-serif;
    text-shadow: 0rem 0rem 0.125rem rgba(0, 0, 0, 0.25);
}

.content .first-name {
    color: #ffffff;
}

.content .last-name {
    color: #ffffff;
}