@import url("https://rianyapson.com/playlist/styles/setup.css");

@font-face {
    font-family: "Creato Display Black";
    src: url("https://rianyapson.com/portfolio/assets/fonts/CreatoDisplay-Black.otf");
}

main {
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    padding: 2rem;
}

main .content {
    height: auto;
    margin: auto;
    display: flex;
    padding: 2.5rem;
    padding-top: 1rem;
    width: max-content;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: var(--color-black-2);
}

main .content .logo {
    width: 5rem;
    height: 5rem;
    padding: 0.5rem;
    margin-top: -3.5rem;
    border-radius: 5rem;
    background-color: var(--color-black-1);
}

main .content .logo svg{
    width: 100%;
    height: 100%;
}

main .content form {
    gap: 0.5rem;
    display: flex;
    overflow: hidden;
    max-height: 50rem;
    width: min-content;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    transition: max-height 0.5s ease 0.5s;
}

main .content form h1 {
    font-size: 4.5rem;
    color: var(--color-green-1);
    font-family: "Creato Display Black";
}

main .content form .money {
    width: 100%;
    gap: 0.5rem;
    display: flex;
    padding: 1rem;
    flex-direction: row;
    border: 0.25rem var(--color-white-1) solid;
}

main .content form .money span {
    font-size: 2rem;
    color: var(--color-white-1);
    font-family: var(--font-medium);
}

main .content form .money input, 
main .content form .money input:focus {
    width: 100%;
    font-size: 2rem;
    font-family: var(--font-medium);
    color: var(--color-white-1);
    background:none;
    outline: none;
    border:none;
}

main .content #qris {
    width: 100%;
    gap: 0.5rem;
    height: auto;
    display: flex;
    overflow: hidden;
    max-height: 50rem;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    transition: max-height 0.5s ease 0.5s;
}

main .content #qris span {
    font-size: 3rem;
    padding-top: 1rem;
    color: var(--color-white-1);
    font-family: var(--font-bold);
}

main .content #qris #qris-code {
    width: 100%;
    height: auto;
    position: relative;
}

button {
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 1rem;
    font-size: 1.25rem;
    color: var(--color-black-1);
    font-family: var(--font-medium);
    background-color: var(--color-green-1);
    transition: background-color 0.25s ease;
}

button:disabled {
    cursor: default;
    background-color: var(--color-gray-2);
}

main[data-show-qris="false"] .content #qris,
main[data-show-qris="true"] .content form {
    max-height: 0px;
    transition: max-height 0.5s ease 0s;
}