@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

body {
    background-color: rgb(40, 40, 40);
    width: 100%;
}

/* text colors */

.text-grey {
    color: rgb(235, 235, 235);
}

.text-green {
    color: rgb(0, 70, 0);
}

.text-blue {
    color: rgb(0, 100, 210);
}

.text-red {
    color: red;
}

hr {
    color: rgb(190, 190, 190);
}

/* background colours */

.bg-lightgrey {
    background-color: rgb(235, 235, 235);
}

.bg-red {
    background-color: rgb(120, 0, 0);
}

.bg-green {
    background-color: rgb(0, 120, 0);
}

.bg-complete {
    background-color: rgb(30, 255, 0);
}

.bg-incomplete {
    background-color: rgb(215, 90, 90);
}

.bg-disabled {
    background-color: #474747;
}

.disabled {
    background: rgba(0, 0, 0, 1);
    color: white;
}

/* Set up font families for app */
header {
    background-color: rgb(235, 235, 235);
    height: 80px;
    font-family: Rowdies, Helvetica, sans-serif;
    border-bottom: 3px solid white;
}

main {
    font-family: Ubuntu, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/* start button */

.btn-green {
    border: 2px solid rgb(190, 190, 190);
    background-color: rgb(0, 70, 0);
    font-size: 30px;
}

.btn-green:hover {
    background-color: rgb(130, 250, 138);
}

#help {
    font-size: 50px;
    cursor: pointer;
    padding: 10px;
    color: rgb(0, 120, 0);
}

#help:hover {
    color: rgb(130, 250, 138);
}

/* modal close button */

.btn-red {
    font-size: 20px;
    border: 1px solid black;
    background-color: rgb(120, 0, 0);
    color: rgb(190, 190, 190);
}

.btn-red:hover {
    background-color: red;
}

/* footer */

footer {
    height: 20px;
}

/* ---------- checklist page --- */

/* back button */

.btn-reset {
    padding: 5px;
    border: 1px black solid;
    background-color: rgb(0, 70, 0);
    color: rgb(190, 190, 190);
    font-size: 20px;
}

.btn-reset:hover {
    background-color: rgb(130, 250, 130);
}

.task-header {
    color: rgb(190, 190, 190);
    text-transform: capitalize;
    text-decoration: underline;
    text-underline-position: under;
    padding-left: 90px;
}

.task-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    color: rgb(190, 190, 190);
}

.taskText {
    margin-left: 10px;
}

.count-field {
    height: 60px;
    border-radius: 10px;
    border: 1px solid white;
}

.complete-text {
    font-size: 30px;
}

#completeField {
    height: auto;
}

.small-push {
    height: 40px;
}