/* Your CSS goes here --------------------- */

@font-face {
    font-family: 'HKG';
    src: url(fonts/HKGrotesk-Regular.ttf);
}

header h1 {
    font-family: 'HKG';
}

#input {
    background-color: rgb(186, 181, 238);
    display: flex;
    flex-direction: column;
    width: 20%;
}

.h-s {
    font-family: 'HKG';
}

#text-1 {
    width: 100%;
    position: absolute;
    text-align: center;
    top: 20px;
    z-index: 2;
}

#text-2 {
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 20px;
    z-index: 2;
}

#output-canvas > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}