@font-face {
    font-family: 'ShantellSans-Regular';
    src: url(font/ShantellSans-Regular.ttf) format('truetype');
    font-style: normal;
    font-weight: normal;
}

html {
    background-color: #c490d1;
    font-family: 'ShantellSans-Regular', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

body, button, input, textarea {
    font-family: 'ShantellSans-Regular', sans-serif;
}

h1 {
    color: #594ece;
    margin-top: -10vh;
    margin-bottom: 0;
}

h2 {
    color: #594ece;
    margin-top: 1vh;
    margin-bottom: 0vh;
}

h3 {
    color: #594ece;
    margin-top: 1vh;
    margin-bottom: 5vh;
}

@keyframes rainbowCycle {
    0% { color: red; }
    14% { color: orange; }
    28% { color: yellow; }
    42% { color: green; }
    56% { color: blue; }
    70% { color: indigo; }
    85% { color: violet; }
    100% { color: red; }
}

#title-span {
    animation: rainbowCycle 4s linear infinite;
}

#qrcodeCanvas {
    margin-bottom: 5vh;
}

#urlInput {
    padding: 1vw;
    width: 60vw;
    background-color: #c1bded;
    color: #594ece;
    border-color: #594ece;
    border-radius: 2vw;
    margin-bottom: 2vh;
}

#copyBtn, #downloadBtn {
    background-color: #594ece;
    border-color: #c1bded;
    color: #c1bded;
    border-radius: 1.5vh;
    padding: 1.5vh;
    cursor: pointer;
    margin: 0 1vw;
}

img {
    width: 4vh;
    height: auto;
}