header {
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    padding-top:20px;
}
nav {
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    padding-top:20px;
}
a {
    text-decoration:none;
    color:black;
    font-size:30px;
    transition: transform 0.3s ease, font-size 0.3s ease, color 0.3s ease;
}
a:hover {
    color:lightgreen;
    text-decoration:underline;
    font-size: 38px;
    transform: scale(1.05);
}

.volume-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.volume-actions button {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #111;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.volume-actions button:hover {
    transform: scale(1.05);
}

.settings-toggle {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

.settings-toggle input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.settings-status {
    min-height: 20px;
    margin: 8px 0 0;
    color: #9ae59a;
    font-size: 14px;
    text-align: center;
    max-width: 440px;
}

main {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    height:calc(100vh - 120px);
}
#mainBox {
    gap:20px;
    background-color:black;
    width:50%;
    min-height:50%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border-radius:20px;
    color:white;
    padding: 28px 24px;
    box-sizing: border-box;
}
body {
    margin:0;
    background-color:grey;
}