body {
    background-color: #6a004e;
    color: white;
    flex: content;
    align-items: center;
    text-align: center;
    height: 100vh;
}

:root {
    --pinky: #ff69db;
}

/* Generic label equivalent */
.label,
label {
    color: white;
}

.no-border {
    border: none;
}

/* Buttons (JavaFX .button equivalent) */
button {
    background-color: #c50196;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.15s, background-color 0.15s;
}

button a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

button:hover {
    background-color: #a2007c;
    transform: scale(1.05);
}

button:focus {
    outline: 2px solid white;
}

nav {
    margin-top: 10px;
    margin-bottom: 20px;
}

nav img {
    border-radius: 60px;
}

h1.title {
    text-shadow: 2px 1px black;
    color: white;
    font-size: 26px;
    line-height: 0px;
    margin: 0px;
    padding: 0px;
}

h1.title span {
    font-size: 16px;
}

h2 {
    font-size: 20px;
    padding-top: 10px;
}

/* Textarea styling */
textarea {
    background-color: #c50196;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px;
    width: 100%;
    resize: none;
}

/* Choice box equivalent (for dropdowns / selects) */
select {
    background-color: #c50196;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 16px;
    appearance: none;
    cursor: pointer;
}

select:hover,
select:focus {
    background-color: #c50196;
    outline: none;
}

/* Dropdown menu equivalent (JavaFX .context-menu) */
select option {
    background-color: #ff69db;
    color: white;
}

select option:checked,
select option:hover {
    background-color: #c50196;
}


/* Reusable color styles (optional helper classes) */
.bg-pink {
    background-color: #ff69db;
}

.loadingbox {
    padding: 5px;
    border: 1px solid var(--pinky);
}

.custom-player {
    padding: 10px;
    border: 1px solid var(--pinky);
}

.custom-player .volume {
    float: right;
    margin-left: 10px;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: rgb(244, 120, 255);
}

input[type="range"]::-moz-range-track {
    background: rgb(246, 142, 255);
}

.custom-player .volume input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: var(--pinky);
    border: 2px solid #000000;
    /* optional */
    border-radius: 50%;
}

.custom-player .volume input[type="range"]::-moz-range-thumb {
    border: 2px solid #000000;
    background: var(--pinky);
}


.custom-player .progress .progress-bar {
    background-color: var(--pinky);
}

.custom-player .progress {
    background: none;
    border: 1px solid var(--pinky);
}

.custom-player button {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 20px;
}

.custom-player .time {
    height: 20px;
}

.custom-player .time p.elapsed {
    float: left;
}

.custom-player .time p.total {
    float: right;
}

.pinkbox {
    border: 1px solid var(--pinky);
    min-height: 250px;
}

.text-light-pink {
    color: rgb(253, 191, 248);
}

.text-white {
    color: white;
}

.text-darkpink {
    color: #c50196;
}

.btn-pink {
    background-color: var(--pinky);
}

.btn-pink:hover {
    background-color: rgb(184, 3, 201);
    ;
}