/*шрифты*/

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

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

@font-face {
    font-family: Caveat;
    src: url("../fonts/Caveat/static/Caveat-Regular.ttf");
}

/*заглавные стили*/

* {
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    align-items: center;
    background: #e5e5e5;
}

main {
    background: #2F313A;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
}

/*шапка сайта*/

main header {
    width: 100%;
    height: 65px;
    background: #262831;
    box-shadow:
        0 1.7px 2.2px rgba(0, 0, 0, 0.07),
        0 4.1px 5.3px rgba(0, 0, 0, 0.05),
        0 7.8px 10px rgba(0, 0, 0, 0.042),
        0 13.8px 17.9px rgba(0, 0, 0, 0.035),
        0 25.9px 33.4px rgba(0, 0, 0, 0.028),
        0 62px 80px rgba(0, 0, 0, 0.02);
}

main header .app-name {
    font-family: Roboto;
    text-transform: uppercase;
    line-height: 21px;
    letter-spacing: 7px;
    text-align: center;
    color: #00f9b6;
    padding-top: 22px;
}

/*дата и время*/

main .time-date {
    padding: 20px;
}

main .time-date #time {
    padding-top: 20px;
    font-family: Roboto;
    font-size: 55px;
    text-align: center;
    color: #00f9b6;
}

main .time-date #date {
    font-family: Roboto;
    text-align: center;
    color: #7A7979;
    margin-top: -8px;
}

/*список дел*/

main .content {
    box-sizing: border-box;
    width: 60vw;
    margin: auto;
    max-height: 400px;
    overflow: scroll;
}

main .content::-webkit-scrollbar {
    width: 0 !important;
}

main .content .task-list {
    box-sizing: border-box;
    width: inherit;
    padding: 20px;
    padding-bottom: 140px;
    color: #7A7979;
}

main .content .task-list #start-message {
    margin: 15px 0 10px;
    padding: 15px;
    border: 0.5px solid #3e3f42;
    border-radius: 5px;
    background-color: #292a31;
    box-shadow:
        0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802),
        0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
        0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
        0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
        0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
        0px 100px 80px rgba(0, 0, 0, 0.07);
    font-family: Roboto;
    font-size: 18px;
    color: rgb(160, 160, 160);
}

main .content .task-list .task {
    transition: all 1.5s cubic-bezier(.67, -0.06, .89, .65);
    display: flex;
    align-items: center;
    margin: 15px 0 10px;
    padding: 15px;
    border: 0.5px solid #3e3f42;
    border-radius: 5px;
    box-shadow:
        0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802),
        0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
        0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
        0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
        0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
        0px 100px 80px rgba(0, 0, 0, 0.07);
    font-family: Roboto;
    font-size: 18px;
    color: rgb(160, 160, 160);
}

/*кастомный чекбокс*/

main .content .task-list .task .checkbox {
    transition: 1.5s ease-in;
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    transition: .3s ease-in;
    border: 1px solid rgb(150, 150, 150, 0.35);
    border-radius: 50%;
    background-color: rgb(200, 200, 200, 0.15);
}

main .content .task-list .task .checkbox:hover {
    transition: .3s ease-in;
    cursor: pointer;
    border: 1px solid rgba(90, 90, 90, 0.85);
    background-color: rgb(200, 200, 200, 0.70);
}

main .content .task-list .task .checkbox:not(:disabled):active {
    transition: .05s ease-in;
    border: 1px solid rgba(230, 230, 230, 1);
    background-color: rgba(190, 190, 190, 1);
}

main .content .task-list .task p {
    width: 75%;
    text-align: justify;
    text-decoration: none;
    margin-left: 8px;
    word-wrap: break-word;
}

/*иконка редактирование*/

main .content .task-list .task .edit {
    transition: 1.5s ease-in;
    width: 22px;
    cursor: pointer;
    margin-left: 10%;
}

/*мусорка*/

main .content .task-list .task .trash-can {
    transition: 1.5s ease-in;
    width: 22px;
    cursor: pointer;
    margin-left: 2.5%;
}

/*стили к выполненному заданию*/

main .content .task-list .completed {
    transition: all 1.5s cubic-bezier(.67, -0.06, .89, .65);
    margin: 15px 10px 10px;
    padding: 10px;
    background-color: #292a31;
    font-weight: bold;
}

main .content .task-list .completed .checkbox {
    transition: 1.5s ease-in;
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    transition: 1.5s ease-in;
    border: 1px solid rgb(0, 88, 0);
    background-color: green;
}

main .content .task-list .completed p {
    text-decoration: line-through;
    font-size: 16px;
}

main .content .task-list .completed .trash-can {
    transition: 1.5s ease-in;
    width: 20px;
    cursor: pointer;
    margin-left: 2.5%;
}

main .content .task-list .completed .edit {
    transition: 1.5s ease-in;
    width: 20px;
    cursor: pointer;
    margin-left: 10%;
}

/*опция редактирования*/

.edit-text {
    width: 75%;
    padding: 4px;
    box-sizing: border-box;
    text-align: justify;
    margin-left: 8px;
    outline: none;
    resize: none;
    border: none;
    font-family: Roboto;
    font-size: 18px;
    color: rgb(160, 160, 160);
    background-color: #00f9b700;
    box-shadow: 0px 0px 25px 10px rgb(69, 64, 69, .5);
    border-radius: 2px;
}

.edit-text::-webkit-scrollbar {
    width: 0 !important;
}

/*панель добавления новый заданий*/

main .content .input-panel {
    position: fixed;
    width: inherit;
    box-sizing: border-box;
    height: 50px;
    padding: 0 20px;
    display: flex;
    justify-content: start;
    bottom: 0;
}

main .content .input-panel input[type="text"] {
    width: 80%;
    background-color: #2c2c2c;
    color: #7A7979;
    padding-left: 20px;
    border: none;
    outline: none;
    font-family: Roboto;
    text-align: center;
    font-size: 18px;
    border-radius: 2px 0 0 2px;
}

main .content .input-panel input[type="text"]::placeholder {
    color: rgb(175, 175, 175, .25);
    font-weight: bold;
}

main .content .input-panel input[type="button"] {
    width: 20%;
    border: none;
    text-transform: uppercase;
    background-color: #046b4e;
    color: rgb(200, 200, 200);
    border-radius: 0 2px 2px 0;
}

main .content .input-panel input[type="button"]:hover {
    cursor: pointer;
    background-color: #069a70;
    color: white;
}

/*фильтры на список дел*/

main .sort-panel {
    width: 60vw;
    margin: auto;
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    position: relative;
    box-sizing: border-box;
    bottom: 160px;
}

main .sort-panel button {
    transition: .2s ease-in;
    margin: 0 6px;
    padding: 4px;
    background: none;
    border: none;
    color: #cecece;
    font-family: Caveat;
    font-style: italic;
    font-size: 22px;
}

main .sort-panel button:hover {
    transition: .2s ease-in;
    cursor: pointer;
    text-shadow: #FFF 0px 0px 5px,
        #FFF 0px 0px 10px,
        #FFF 0px 0px 15px,
        #FF2D95 0px 0px 20px,
        #FF2D95 0px 0px 30px,
        #FF2D95 0px 0px 40px,
        #FF2D95 0px 0px 50px,
        #FF2D95 0px 0px 75px;
}

main .sort-panel button:active {
    transition: 0s;
    color: #ffffff;
    text-shadow: #FFF 0px 0px 10px,
        #FFF 0px 0px 15px,
        #FFF 0px 0px 20px,
        #FF2D95 0px 0px 25px,
        #FF2D95 0px 0px 40px,
        #FF2D95 0px 0px 50px,
        #FF2D95 0px 0px 60px,
        #FF2D95 0px 0px 90px;
}