@font-face {
    font-family: Roboto;
    src: url(../resources/Roboto.ttf);
}

@font-face {
    font-family: Metro;
    src: url(../resources/metropolis-regular.otf);
}

@font-face {
    font-family: Poppins;
    src: url(../resources/Poppins-Regular.ttf);
}

@font-face {
    font-family: Consolas;
    src: url(../resources/Consolas.ttf);
}

::selection {
    background: #696969;
    color: #1d1d1d;
}

* {
    font-family: Roboto;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    background: #1c1c1c;
    color: #dbdbdb;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    animation: fadeInAnimation ease-in-out 0.3s;
    animation-iteration-count: 1;
    overflow: hidden;
}

.taskbar {
    display: flex;
    width: 100%;
    height: min-content;
    align-items: center;
    margin: 10px 0 1em 10px;
}

.settingscb {
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    transition: ease 0.4s;
}

.settingscb:hover {
    cursor: pointer;
    background-color: #7bf490;
}

.settingscb:hover .settingsc {
    color: #23682f;
}

.settingsc {
    width: 50%;
    height: 50%;
    color: white;
    transition: ease 0.2s;
}

.title {
    color: #dbdbdb;
    border-left: 3px solid #dbdbdb;
    padding-left: 10px;
    margin-left: 7px;
    font-family: Poppins;
    font-size: 25px
}

.settings {
    width: 100%;
    height: min-content;
    display: grid;
    justify-content: center;
}

.cat {
    width: 38em;
    height: min-content;
    text-align: center;
    display: grid;
    justify-items: center;
}

.cat .title {
    border: none;
    margin: 0;
    font-size: 19px;
    width: min-content;
    padding: 0;
}

.border-bottom {
    width: 100%;
    height: 4px;
    background-color: white;
    border-radius: 22px;
    overflow: hidden;
}

.btns {
    display: flex;
    flex-wrap: wrap;
    width: 17em;
    height: max-content;
    margin-top: 9px;
    justify-content: center;
}

.btn {
    margin-right: 6px;
    font-size: 16px;
}

.btn.terminal {
    background-color: #000;
    color: #56b056;
    border: 1px solid #393939;
    outline: 1px solid #000;
    border-radius: 4px;
    height: max-content;
    width: max-content;
    font-family: Consolas;
    padding: 6px;
    transition: ease 0.5s;
}

.btn.terminal:hover {
    background-color: #000;
    color: #56b056;
    border: 1px solid #000;
    outline: 1px solid #56b056;
}

.btn.night {
    background-color: #0e0a40;
    color: #ffe688;
    border: 1px solid #201a68;
    outline: 1px solid #0e0a40;
    border-radius: 4px;
    height: max-content;
    width: max-content;
    font-family: Metro;
    padding: 6px;
    transition: ease 0.5s;
}

.btn.night:hover {
    background-color: #0e0a40;
    color: #ffe688;
    border: 1px solid #0e0a40;
    outline: 1px solid #ffe688;
}

.btn.active {
    box-shadow: 0px 0px 9px 2px #151515;
}

.btn {
    background-color: #242424;
    color: white;
    border: 1px solid #404040;
    outline: 1px solid #242424;
    border-radius: 4px;
    height: max-content;
    width: max-content;
    font-family: Metro;
    padding: 6px;
    transition: ease 0.5s;
    margin-bottom: 7px;
}

.btn:hover {
    background-color: #151515;
    color: white;
    border: 1px solid #2b2b2b;
    outline: 1px solid #151515;
    cursor: pointer;
}

.btn.input:hover {
    background-color: #151515;
    color: white;
    border: 1px solid #2b2b2b;
    outline: 1px solid #151515;
    cursor: text;
}

.btn.input {
    width: 8em;
}