:root {
    --white: #fff1e6;
    --black: #000000;
    --periwinkle: #cddafd;
    --lavender: #dfe7fd;
    --petal: #fad2e1;
    --blush: #fde2e4;
    --pink: #edd0ed;
    --green: #c0e5ce;
    --gray: #eae4e9;
    --border-size: 3px;
}

body {
    background-color: var(--white);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

#window-container {
    padding: 2rem;
    column-count: 1;
    column-gap: 2rem;
    display: inline-block;
    width: 100%;
    max-width: 32rem;
}

.window {
    width: 100%;
    background-color: var(--white);
    border-radius: 0.75rem;
    box-shadow:
        0 0 0 var(--border-size) var(--black),
        6px 6px var(--black);
    overflow: hidden;
    max-width: 32rem;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 2rem;
}

.window-frame {
    padding: 0.25rem 0.5rem;
    box-shadow: 0 var(--border-size) var(--black);
    display: flex;
    justify-content: space-between;
}

.window-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.window-controls > img {
    width: 1rem;
    height: 1rem;
}

.window-content {
    padding: 0rem 0.5rem;
    overflow: auto;
}

.window-title {
    font-family: "Fredoka", sans-serif;
}

.text {
    font-family: "Fredoka", sans-serif;
}

p {
    line-height: 175%;
}

#spotify-art,
#discord-avatar {
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 5rem;
    height: 5rem;
    border-radius: 0.5rem;
    box-shadow: 3px 3px var(--black);
}

#spotify-title,
#discord-name {
    display: inline-block;
    position: absolute;
    top: 1.5rem;
    left: 7rem;
    font-weight: 500;
    text-overflow: ellipsis ellipsis;
    overflow: hidden;
    text-wrap: nowrap;
    width: calc(100% - 8rem);
}

#spotify-artist,
#discord-username {
    display: inline-block;
    position: absolute;
    top: 3rem;
    left: 7rem;
    font-size: 0.8rem;
    text-overflow: ellipsis ellipsis;
    overflow: hidden;
    text-wrap: nowrap;
    width: calc(100% - 8rem);
}

#spotify-track {
    position: absolute;
    top: 5rem;
    left: 7rem;
    width: calc(100% - 8rem);
    height: 0.5rem;
    background-color: var(--green);
    border-radius: 0.25rem;
    overflow: hidden;
}

#spotify-thumb {
    height: 0.5rem;
    background-color: var(--black);
    border-radius: 0.25rem;
    transition: width 1s;
}

.info-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.info-row > img {
    width: 1rem;
    height: 1rem;
}

a {
    color: var(--black);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#discord-status {
    display: inline-block;
    position: absolute;
    top: 4.5rem;
    left: 7rem;
    font-size: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    text-wrap: nowrap;
    width: calc(100% - 8rem);
}

#discord-status-indicator {
    position: absolute;
    top: 5.5rem;
    left: 5.5rem;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    box-shadow:
        0 0 0 2px var(--black),
        3px 3px 0 1px var(--black);
}

/*@media screen and (min-width: 768px) {
	#window-container {
		column-count: 2;
		max-width: 66rem;
	}
}*/