:root {
    --back: #2A3C57;
    --front: #773372;
    --frontHover: #2A3C57;
    --text: #D4F1F4;
    --link: #D4F1F4;
    --border: #282733;

    --button: #ECF87F;
    --buttonText: #3D550C;
    --buttonBorder: #DBE8D8;
    --buttonHover: rgb(145, 255, 0);
    --wrong: #FF2511;
    
    --kitty1: #2A3C57;
    --kitty2: #773372;
    --kitty3: #282733;
    --kitty3: #82809B;

    --msg: #273751;
}

@font-face {
    font-family: 'RubikBubbles';
    src: url('../poznamky/fonts/RubikBubbles-Regular.ttf');
}

.msg {
    padding: 10px;
    background-color: var(--msg);
    text-align: center;
    border-radius: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.msg-text {
    margin-bottom: 0;
}

.msg-img {
    max-width: 600px!important;
}

.body {
    background-color: var(--back);
    color: var(--text);
}

a {
    color: var(--link);
    font-size: 18px;
}

.header {
    display: flex;
    justify-content: center;
}

.header__text {
    font-family: "Source Code Pro", monospace;
    /* font-size: 4em; */
    font-weight: 200;
    will-change: font-weight;
    margin: 15px 0;
}

.header__text:hover {
    animation-name: getBold;
    /* animation-duration: 2500ms; */
    animation-duration: 500ms;
    animation-iteration-count: 1;
    font-weight: 800;
}

.header__text:not(:hover) {
    animation-name: getThin;
    /* animation-duration: 2500ms; */
    animation-duration: 500ms;
    animation-iteration-count: 1;
    font-weight: 200;
}

@keyframes getBold {
    0% {
        font-variation-settings: "wght" 200;
    }
    100% {
        font-variation-settings: "wght" 800;
    }
}

@keyframes getThin {
    0% {
        font-variation-settings: "wght" 800;
    }
    100% {
        font-variation-settings: "wght" 200;
    }
}

.contents {
    display: flex;
    justify-content: center;
}

.contentsChild {
    display: inline-block;
    background-color: var(--front);
    padding: 10px;
}

.linkBox {
    background-color: var(--front);
    border: 2px solid var(--border);
    border-radius: 5%;
    padding: 10px 10px 0px 10px;
    color: var(--link)!important;
    transition: .25s;
}

.todo-li {
    background-color: var(--front)!important;
    color: var(--link)!important;
    /* max-width: 60em; */
}

.todo-item {
    max-width: 90%;
    margin-bottom: 0;
}

.todo-date {
    padding: 4px;
    margin-right: 4px;
    border: 2px solid var(--border);
    border-radius: 5%;
}

.researchLink {
    color: var(--link)!important;
    transition: .25s;
}

.researchLink:hover {
    color: var(--buttonHover)!important;
}

.authBox {
    background-color: var(--front);
    border: 2px solid var(--border);
    border-radius: 5%;
    padding: 10px 10px 0px 10px;
    color: var(--link)!important;
}

.authInput {
    color: var(--text)!important;
    background-color: var(--border)!important;
    border-color: var(--border)!important;
}

.authInput:focus {
    box-shadow: none!important;
    border-color: var(--frontHover)!important;
}

.authButton {
    font-family: 'RubikBubbles'!important;
    transition: .25s!important;
}

.authButton:hover {
    background-color: var(--buttonHover)!important;
    border-color: var(--buttonHover)!important;
}

.linkBox:hover {
    background-color: var(--frontHover);
}

.wrongPasswd {
    color: var(--wrong);
}

ul {
    padding-left: 18px;
}

.btn.btn-success {
    color: var(--buttonText);
    background-color: var(--button);
    border-color: var(--button);
  }
  .btn.btn-success.focus,
  .btn.btn-success:focus {
    color: var(--buttonText);
    background-color: var(--button);
    border-color: var(--button);
    outline: none;
    box-shadow: none;
  }
  .btn.btn-success:hover {
    color: var(--buttonText);
    background-color: var(--button);
    border-color: var(--button);
    outline: none;
    box-shadow: none;
  }
  .btn.btn-success.active,
  .btn.btn-success:active {
    color: var(--buttonText);
    background-color: var(--button);
    border-color: var(--button);
    outline: none;
  }
  .btn.btn-success.active.focus,
  .btn.btn-success.active:focus,
  .btn.btn-success.active:hover,
  .btn.btn-success:active.focus,
  .btn.btn-success:active:focus,
  .btn.btn-success:active:hover {
    color: var(--buttonText);
    background-color: var(--button);
    border-color: var(--button);
    outline: none;
    box-shadow: none;
  }