@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --opacity {
  syntax: '<opacity>';
  initial-value: 0.35;
  inherits: false;
}

@property --height {
  syntax: '<height>';
  initial-value: 5px;
  inherits: false;
}

:root {
    color-scheme: only dark;
    background-color: light-dark(#eef5f4, black);
    --header-font: Comfortaa;
    --content-font: Roboto;
    /*font-size: xx-large;*/
    --bg-color: light-dark( #e4f6f3, black);
    --fg-color: light-dark(black, #bbbbbb);
    --cuerdasn-gris: light-dark(#555555, #888887);
    --cuerdasn-gris-light: light-dark(#d9d9d9, #444444);
    --cuerdasn-orange:light-dark( #d17e46,#523f24);
    --text-orange: light-dark( #ff9900, #d17e46);
    --link-blue: #1155cc;
    --cuerdasn-teal: #7ac6b8;
    --cuerdasn-teal-darker: #5cd6b2;
    --cuerdasn-teal-light: #b8f9ee;
    --table-header: light-dark(#4dd0e1, #0f6873);
    --table-gray-light: light-dark(#f9f9f9, #343434);
    --table-gray-dark: light-dark(#f3f3f3, #1a1a1a);
    --image-invert:  light-dark(0.8, 1);
    --prop-small: 30%;
    --prop-big: 70%;
    --time-width: 12%;
    --not-time-width: 88%;
    overflow-x: hidden;
    font-family: var(--header-font);
    input {
        height: 3rem;
        width: calc(100vw - 3rem);
        border: none;
        outline: solid 1px var(--cuerdasn-teal);
        border-radius: 1rem;
        padding: 0 1rem;
        background-color: #011010;
        margin-top: 0.5rem;
    }
    body {
        overscroll-behavior-y: contain;
    }
}
footer {
    bottom: -100%;
    transition: 0.3s ease;
    background-color: var(--bg-color);
    h2 {
        margin-left: 0.5rem;
        align-self: center;
        justify-self: center;
    }
    display: flex;
    flex-flow: column wrap;
    label {
        margin-top: 0.5rem;
        /*margin-left: 1.5rem;*/
        width: calc(100% - 6rem);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
    }
    input {
        /*margin-left: 1rem;*/
        max-width: calc(100vw - 7rem);
        /*width: calc(100vw - 8rem);*/
        min-width: unset !important;
        font-size: large;
        background-color: #011010;
    }
    textarea {
        /*margin-left: 0.5rem;*/
        min-width: calc(100vw - 7rem);
        max-width: calc(100vw - 7rem);
        border-radius: 1rem;
        font-size: large;
        padding: 1rem;
        /*min-width: 80vw;*/
        background-color: #011010;
    }
    button {
        width: calc(100vw - 5rem);
        background-color: var(--table-header);
        font-weight: bolder;
        margin: 1rem 0;
        padding: 0 1rem;
        border-radius: 0.3rem;
        height: 3rem;
        align-self: center;
    }
}
.name-input {
    min-width: 80%;
}
.logo-nowplaying {
    display: flex;
    /*position: absolute;
    top: 0;*/
    width: calc(100vw - 2rem);
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}
.header-logo {
    align-self: center;
    max-width: 20vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin: 0.5rem;
}
.logo {
    max-height: 2.5rem;
    width: auto;
    max-width: 20vw;
    min-width: 5rem;
    filter: invert(var(--image-invert));
}
.columns {
    display: flex;
    flex-direction: row;
}
.list {
    min-width: calc(80% / 4);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /*outline: dashed 1px teal;*/
    padding: 0.75rem;
    max-height: calc(100vh - 10rem);
    overflow-y: scroll;
    mask-image: linear-gradient(to top, var(--bg-color) calc(100% - 1rem), transparent 100%);
}
#now-playing {
    padding-left: 2rem;
    display: flex;
    width: 70vw;
    flex-flow: row wrap;
    align-items: center;
}
#form {
    display: flex;
    flex-direction: row;
    /*flex-wrap: wrap;*/
    align-items: center;
    align-content: center;
    justify-content: space-around;
    width: calc(100vw - 2rem);
}
/*#queue {
    display: none;
}*/
song-card {
    margin: 0.2rem 0;
    max-width: calc(100% - 2rem);
}
.song-list-container {
    display: flex;
    flex-direction: column;
    details {
        summary {
            background-color: var(--table-header);
            color: var(--bg-color);
            font-weight: bolder;
        }
    }
}
@media (max-width: 600px) {
    h2 {
        font-size: large;
    }
    /*form {
        max-width: 80vw;
        flex-direction: column;
        align-items: center;
        label {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
            outline: dashed 1px red;
        }
    }*/
}

.tab-container {
    margin-top: 1rem;
    /*display: flex;*/
    flex-flow: row nowrap;
}

.tab-container input[type="radio"] {
  display: none;
}
.tabs {
    display: flex;
    flex-flow: row nowrap;
    width: calc(50vw - 2rem);
    align-self: center;
    justify-content: space-around;
}
.tab-container label {
    width: calc((100vw - 8rem) / 2);
  display: inline-block;
  padding: 0.5rem 1rem;
  text-align: center;
  border: 1px solid #888;
  align-self: center;
  /*color: #888;*/
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  background: unset;
  transition: all 0.3s ease;
}
.tab-container label:nth-of-type(1) {margin-left: 1rem;}

.tab-container input[type="radio"]:checked + label {
  background-image: linear-gradient( #206060, transparent);
  color: #eff;
  position: relative;
  border-bottom: unset;
  transition: all 0.3s ease;
  /*z-index: 2;*/
}

.tab-content {
  position: relative;
}

.tab-panel {
  display: none;
}

#tab1:checked ~ .tab-content #content1,
#tab2:checked ~ .tab-content #content2 {
  display: block;
}