* {
    --bg_col: rgb(19, 33, 38); /*rgb(40, 40, 40);*/
    --col: rgb(220, 233, 233); /*rgb(215,215,215)*/

    --col_red: rgb(250, 146, 117);
    --col_green: rgb(135, 246, 125);
    --col_yellow: rgb(219, 252, 155);

    /*
    --col_red: rgb(255, 121, 85);
    --col_green: rgb(135, 245, 91);
    --col_yellow: rgb(219, 227, 113);
    */
}

body {
    background-color: var(--bg_col);
    color: var(--col);

    padding: .5em 1.5em;
}

a {
    text-decoration: underline wavy;
    font-style: italic;
    font-weight: lighter;
}

a:hover {
    text-decoration: underline;
    font-weight: normal;
}

a:active {
    opacity: 90%;
}


button {
    padding: .25em;
    color: var(--bg_col);
    background-color:  var(--col);
    cursor: pointer;
    border-radius: .2em;
}

button:hover {
    outline: .1em solid var(--col);
}

button:active {
    outline: none;
    box-shadow: inset 0 0 .5em 0 var(--bg_col);
}

ol {
	list-style-type: decimal;
	list-style-position: inside;
}

input {
	border-radius: .2em;
}

input[type=text] {
	color: var(--bg_col);
	background-color: var(--col);
}

img {
	object-fit: contain;
}

.debug * {
	outline: 1px solid rgba(255, 0, 0, 0.1);
}

.center {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 1em;
}

.icon {
    font-family: FontAwesome;
    font-style: normal;
    text-decoration: none;
}

.clickable:hover {
    cursor: pointer;
    opacity: 80%;
    text-decoration: none;
}

.clickable:active {
    opacity: 60%;
}

.music_player {
    position: absolute;
    top: .5em;
    right: 1em;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:end;

    gap: 1em;
}

.back {
    position: absolute;
    top: .5em;
    left: 1em;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:end;

    gap: 1em;
}

.hide {
    /*display: none !important;*/
	opacity: 0 !important;
	pointer-events: none !important;
}

.unscrollable {
    overflow: hidden;
}