body {
    margin: 0px;
    font-family: "Museo Slab 300";
    color: black;
}

body a {
    cursor: pointer;
    color: #1B99E8;
}

body a:hover {
    color: #D61043;
}

.desktop .main {
    text-align: center;
    font-size: 16px;
}

.mobile .main {
    text-align: center;
    font-size: 30px;
}

.header {
    position: fixed;
    top: 0px;
    width: 100%;
    background: coral;
}

.logo {
    height: 30px;
}

.mobile .logo {
    height: 45px;
}

.header a,
.header a:hover {
    color: white;
}

.desktop .header,
.desktop .header-spacer {
    font-size: 50px;
    padding: 5px 0px;
    color: white;
}

.mobile .header,
.mobile .header-spacer {
    font-size: 70px;
    padding: 20px 0px;
    color: white;
}

.list {
    margin-bottom: 50px;
}

.list-item {
    border: 1px solid blue;
    color: blue;
    padding: 20px;
    margin: 7px 0px;
    background: lightblue;
    width: 50%;
    display: inline-block;
    -webkit-box-shadow: 0px 10px 13px -8px #000000; 
    box-shadow: 0px 10px 13px -8px #000000;
}

.mobile .list-item {
    width: 85%;
    margin: 15px 0px;
    padding: 40px;
}

.entry-item {
    display: inline-block;
    padding: 10px;
    border: 1px solid green;
    border-radius: 10px;
    width: 50%;
    background: lightgreen;
    margin: 30px 0px;
}

.mobile .entry-item {
    width: 85%;
    margin: 40px 0px;
    padding: 10px 20px;
}

.input-area {
    display: inline-block;
    font-size: 20px;
    padding: 5px 10px;
    width: 95%;
    border: 0px;
    background: green;
    color: white;
    margin: 10px 0px;
}

.mobile .input-area {
    font-size: 50px;
    margin: 20px 0px;
}

.input-area::placeholder {
    color: lightgreen;
}

.btn {
    display: inline-block;
    cursor: pointer;
    font-size: 30px;
    margin-left: 10px;
}

.mobile .btn {
    font-size: 60px;
}

.loader {
    font-size: 30px;
    margin: 30px;
}

.mobile .loader {
    font-size: 100px;
}

.add {
    color: green;
}

.delete {
    color: crimson;
}

.complete {
    color: green;
}

table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.list-item .cat {
    width: 10%;
    color: darkblue;
}

.list-item .btns {
    width: 12%;
    text-align: right;
}

.mobile .list-item .btns {
    width: 17%;
    text-align: right;
}

.filter-categories .category {
    display: inline-block;
    cursor: pointer;
    font-size: 30px;
    border: 1px solid darkblue;
    border-radius: 10px;
    color: darkblue;
    padding: 5px 20px;
    margin: 5px;
}

.mobile .filter-categories .category {
    font-size: 60px;
    padding: 10px 40px;
    margin: 10px 20px;
}

.filter-categories .category.active {
    border: 1px solid crimson;
    color: crimson;
}

.entry-categories .category {
    display: inline-block;
    cursor: pointer;
    font-size: 30px;
    border: 1px solid green;
    border-radius: 10px;
    color: green;
    padding: 5px 20px;
    margin: 5px;
}

.mobile .entry-categories .category {
    font-size: 60px;
    padding: 10px 40px;
    margin: 10px 20px;
}

.cat-icon {
    font-size: 25px;
    cursor: pointer;
    display: inline-block;
}

.mobile .cat-icon {
    font-size: 50px;
}

.edit-cat table {
    text-align: center;
}

.btn-text {
    font-size: 10px;
}

.mobile .btn-text {
    font-size: 20px;
}