:root {
    --color-dark-blue: rgb(9, 10, 14);
    --color-dark-blue-10: rgb(9, 10, 14, .1);
    --color-dark-blue-20: rgb(9, 10, 14, .2);
    --color-dark-blue-30: rgb(9, 10, 14, .3);
    --color-dark-blue-40: rgb(9, 10, 14, .4);
    --color-dark-blue-50: rgb(9, 10, 14, .5);
    --color-dark-blue-60: rgb(9, 10, 14, .6);
    --color-dark-blue-70: rgb(9, 10, 14, .7);
    --color-dark-blue-80: rgb(9, 10, 14, .8);
    --color-dark-blue-90: rgb(9, 10, 14, .9);
    
    --color-white: rgb(225, 218, 243);
    --color-white-10: rgba(225, 218, 243, .1);
    --color-white-20: rgba(225, 218, 243, .2);
    --color-white-30: rgba(225, 218, 243, .3);
    --color-white-40: rgba(225, 218, 243, .4);
    --color-white-50: rgba(225, 218, 243, .5);
    --color-white-60: rgba(225, 218, 243, .6);
    --color-white-70: rgba(225, 218, 243, .7);
    --color-white-80: rgba(225, 218, 243, .8);
    --color-white-90: rgba(225, 218, 243, .9);

    --color-light-blue: rgba(50, 180, 200, 1);
    --color-yellow: rgba(255,200,0, 1);
}

.debug div {
	box-shadow: 0 0 0 1px rgba(255,255,255, .2);
}

.glow {
	box-shadow: 0 0 20px 0 var(--color-white-50);
}
.glow-dark {
	box-shadow: 0 0 20px 0 var(--color-dark-blue-50);
}

*[class^="btn"] {
	cursor: pointer;
}

.btn-bordered {
	border: 1px solid var(--color-white);
	color: var(--color-white);
	background-color: transparent;
    transition: color .2s ease-out,
                background-color .2s ease-out,
                box-shadow .2s ease-out;
}
.btn-bordered:hover {
	color: var(--color-dark-blue);
	fill: var(--color-dark-blue);
	background-color: var(--color-white);
	box-shadow: 0 0 20px 0 var(--color-white-50);
    transition: none;
}

.window-bordered {
    position: relative;
    border: 2px solid var(--color-white);
    border-bottom: 4px solid var(--color-white);
}
.window-bordered::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: -2px;
    width: 100%;
    height: 0;
    border: 2px solid var(--color-white);
    border-top: none;
}

*[class^="window"] .win-title {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--margin);
    line-height: calc(var(--font-size) * 1.8);
    background-color: var(--color-white);
    color: var(--color-dark-blue);
    font-weight: 400;
}

*[class^="window"] .win-title .label {
    opacity: 0.5;
}

*[class^="window"] .win-content {
    padding: 0 var(--margin)
}