@import url('https://fonts.googleapis.com/css2?family=Imperial+Script&family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap');

body {
    margin: 0;
    background-color: #FFFBDD;
}

section:nth-of-type(1) {
    display: flex;
    flex-direction: row;
    height: 100vh;
    padding: 48px;

    > div:nth-of-type(1) {
        position: relative;
        flex-grow: 1;

        > div:nth-of-type(1) {
            position: absolute;
            left: 15%;
            top: 10%;
            transform: rotate(-1.5deg);

            > img:nth-of-type(1) {
                position: absolute;
                left: 40%;
                top: -10%;
                height: 60px;
                width: 200px;
            }

            > img:nth-of-type(2) {
                position: absolute;
                height: 360px;
                width: 588px;
                z-index: -1;
                object-fit: cover;
                box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.4);
            }

            > div {
                transform: translate(20%, 25%);
                width: 500px;

                h1 {
                    font-size: 3rem;
                    /*font-family: 'Imperial Script', cursive;*/
                }
            }
        }
    }

    > div:nth-of-type(2) {
        > h1, > h2, > h3, > h4, > h5, > h6 {
            text-align: right;
        }

        > h1 {
            font-size: 4rem;
            margin-bottom: 0;
            margin-top: 0;
        }

        > div {
            position: relative;

            > .tape {
                position: absolute;
                height: 100px;
                z-index: 1;
            }

            > .tape:nth-of-type(1) {
                transform: translate(-20px, -22px) rotate(100deg);
            }

            > .tape:nth-of-type(3) {
                bottom: 0;
                right: 0;
                transform: translate(10px, 15px) rotate(94deg);
            }

            > img:nth-of-type(2) {
                aspect-ratio: 3 / 4;
                object-fit: cover;
                max-width: 450px;
                transform: rotate(2deg);
                box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.4);
            }
        }
    }
}

#music {
    display: flex;
    position: absolute;
    background-color: rgba(0,0,0,0.6);
    width: 800px;
    height: 150px;
    bottom: 25%;
    left: 10%;
    border-radius: 15px;
    padding: 12px;
    gap: 12px;

    > img {
        aspect-ratio: 1 / 1;
        background-color: white;
        height: 100%;
        object-fit: contain;
        border-radius: 3px;
    }

    > div {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        max-width: 638px;
        h5 {
            margin: 0;
            color: rgba(255, 255, 255, 0.6);
        }
        h2 {
            color: white;
            margin-top: 12px;
            margin-bottom: 8px;
            font-size: 2.5rem;
            text-wrap: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100%;
        }
        h4 {
            color: rgba(255, 255, 255, 0.6);
            margin-top: 0;
            margin-bottom: 0;
            font-size: 1.5rem;
        }

        > div {
            display: flex;
            flex-grow: 1;
            align-items: center;
            margin-top: 8px;

            > .progress {
                background-color: white;
                height: 10px;
                flex-grow: 1;
                border-radius: 15px;
                margin-left: 12px;
                margin-right: 12px;
            }
        }
    }
}

* {
    font-family: "Inclusive Sans";
    font-weight: normal;
}