:root {
    --c-green: #66C655;
    --c-red: #FF445D;

    --c-window-header: #f8faff;
    --window-border-radius: 15px;
}

[type="checkbox"]:checked + body {
    --c-window-header: black!important;
}

.window-header 
{
    background-color: var(--c-window-header);
    width: 100%;
    box-sizing: border-box;
    padding: 10px 17px;

    display: flex;
    display: flex;
    align-items: center;
}

.window-headline 
{
    width: 100%;
    text-align: center;
}

.window-btn {
    width: 15px;
    height: 15px;
    position: absolute;
    border-radius: 50%;
}

.close-btn {
    background-color: var(--c-red);
}

.close-btn:hover {
    background-color: #B80E41;
}

.max-btn {
    left: 40px;
    background-color: var(--c-green);
}

.max-btn:hover {
    background-color: #09A186;
}

.window-header > span {
    width: 100%;
    text-align: center;
}

.window-content-wrapper {
    padding: 17px 17px 17px 17px;
    box-sizing: border-box;
}

.window {
    padding: 17px;
    color: var(--c-black-60);
    box-sizing: border-box;
    width: max-content;
    height: max-content;
    background-color: white;
    border-radius: var(--window-border-radius);
}

.bottom-border {
    border-bottom: 2px solid var(--c-window-header);
}

draggable-container {
    transform: translate(-50%, -50%); /* Center the object */
    position: absolute;
    cursor: move;
    width: fit-content;
    height: fit-content;
    transition: width 0.3s, height 0.3s; /* Smooth transition effect */
}

draggable-container > img {
    border-radius: var(--window-border-radius);
}

.maxi-button {
    position: absolute; /* Add position: absolute */
    width: 15px;
    height: 15px;
    left: 40px;
    background-color: #66C655;
    border-radius: 15px;
}

.floating-img > div {
    text-align: center;
}

.floating-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 5px 30px;
    backdrop-filter: blur(2.5px);
    color: black!important;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 50px;
}

.floating-img > img {
    width: 25vw;
}

.round {
    width: 175px;
    height: 175px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.round > img {
    width: 90%;
    height: auto;
}