:root {
    --main-bg-color: rgb(25, 24, 28);
    --main-highlight-color: rgb(199, 83, 219);
    --main-highlight-color-50p: rgba(199, 83, 219, 0.5);
    --main-highlight-color-80p: rgba(199, 83, 219, 0.8);
    --main-tag-color: rgb(242, 160, 35);
    --main-text-color: rgb(250, 250, 250);
    --main-shadow-color: rgb(0, 0, 0, 20%);
    --main-font-family: 'Cascadia Code', sans-serif;
    --link-color: rgb(245, 237, 150);
    --link-visited-color: rgb(239, 225, 18);
    --code-bg-color: rgb(49, 56, 192);
    --code-font-family: 'Cascadia Mono', monospace;
    --code-text-color: rgb(250, 250, 250);
}

/* Buttons */

.btn-theme {
    background-color: var(--main-highlight-color);
    border: none;
    color: var(--main-bg-color);
    padding: 10px 10px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 15px;
    font-size: 15px;
    box-shadow: 10px 10px rgba(18, 18, 32, 0.2);
}

.btn-theme:hover {
    background-color: var(--code-bg-color);
    color: var(--code-text-color);
    cursor:pointer;
}

img {
    filter: sepia(90%) saturate(200%) brightness(50%) hue-rotate(-100deg);
}

body {
	background-color: var(--main-bg-color);
	background-image: url("/images/backgrounds/kari-batties-bg.png");
	background-attachment: fixed;
	margin: 0;
	padding: 0; 
	color: var(--code-text-color);
	font-family: 'Atkinson Hyperlegible Next', sans-serif;
	font-weight: 300; 
	font-size: 17px;
	line-height: 1.5;
    display: flex;
    flex-direction: column;
}

body, html {
	cursor: url("/images/cursors/kari-bat-cursor-2.png"), pointer;
    height: 100%;
}

a {
	color: var(--main-highlight-color);
}

.footer {
	background: var(--main-bg-color);
	color: var(--main-text-color);
    flex-shrink: 0;
}

/* Scrollbar */

.scrollable-element {
    scrollbar-color: var(--main-highlight-color) var(--main-bg-color);
}

::-webkit-scrollbar {
    background-color: var(--main-bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--main-highlight-color);
    border-radius: 5px;
}

/* Header */

h1 {
    font-size: 50px;
    line-height: 1.3;
	font-family: var(--main-font-family);
    font-weight: 700;
    margin:  0;
}

h2 {
    font-size: 30px;
	font-family: var(--main-font-family);
    font-weight: 500;
    margin:  0;
}

/* Projects */

.projects a {
	color: var(--main-highlight-color);
}

.projects .btn {
    color: var(--main-bg-color);
    background: var(--main-highlight-color);
}

.projects .btn:hover {
    background: var(--main-highlight-color-80p);
}

/* Tooltips */

.tooltipcont {
    position: relative;
    display: inline-block;
}

.tooltipcont .tooltip {
    background-color: var(--main-bg-color); 
    color: var(--main-text-color); 
    border: 1px dashed var(--main-highlight-color);
}

.tooltipcont .tooltip::after {
    border-color: var(--main-highlight-color) transparent transparent transparent;
}

.footer {
	background: var(--main-bg-color);
	color: var(--main-highlight-color);
}

@-webkit-keyframes fallers-fall {
    0% {
        top: -10%
    }
    100% {
        top: 100%
    }
}

@-webkit-keyframes fallers-shake {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    50% {
        -webkit-transform: translateX(80px);
        transform: translateX(80px)
    }
}

@keyframes fallers-fall {
    0% {
        top: -10%
    }
    100% {
        top: 100%
    }
}

@keyframes fallers-shake {
    0%,
    100% {
        transform: translateX(0)
    }
    50% {
        transform: translateX(80px)
    }
}