* {
    margin: 0;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    
}

img {
    display: block;
    max-width: 100%;
}

:root {
    --main-color: #415771; 
    --alt-color: #273c54;
    --body-color: #0e2339;
    --text-color: #eeeeee;
    --link-color: #c7e1ff;
    --card-color: #000c1d;
    --card-text-color: #eeeeee;
    --img-color-filter: brightness(0) saturate(100%) invert(97%) sepia(1%) saturate(5040%) hue-rotate(181deg) brightness(123%) contrast(87%);

    --sidebar-width: calc(max(20vw, 250px));
}

body {
    background-color: var(--body-color);
}

.tab-folder > .tab-content:target ~ .tab-content:last-child, .tab-folder > .tab-content {
    display: none;
}
.tab-folder > :last-child, .tab-folder > .tab-content:target {
    display: block;
}

.tab-content {
    position: absolute;
    margin-left: var(--sidebar-width);
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    min-width: var(--sidebar-width);
    width: 800px;
    overflow: scroll;
    justify-self: center;
}

.tab-content p {
    font-size: 1.1rem;
    margin: 50px 2%;
    color: var(--text-color);
}

.tab-content hr {
    margin: 0% 15% 1% 15%;
    width: 50%;
    border: 2px solid var(--alt-color);
    border-radius: 10px;
}

#palette-selector {
    position: absolute;
    right: 10px;
    top: 10px;
}