* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 60px;
}

.tittle_block {
    width: 700px;
}

.tittle_end {
    background: linear-gradient(to right, #f61616, #fa6f0c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.theme, .create, .cancel {
    padding: 0.6vh 1.5vh;
    border-radius: 1vh;
    background-color: #fff;
    border: 0.1vh solid #e7eaf0;
    box-shadow: 0 0.1vh 0.1vh rgb(0 0 0 / 8%);
    color: #16192c;
    cursor: pointer;
    transition: background 200ms;
    margin: 0 1vh;
}

.cancel {
    margin: 0; !important;
}

.main {
    padding: 5vh;
}

.note {
    box-shadow: 0 0 20px #d0d0d0;
    height: 45vh;
    width: 30vh;
    border-radius: 1vh;
    margin: 1vh;
    display: inline-flex;
    flex-direction: column;
}

.note_text p {
    overflow: scroll;
    padding: 0 2vh;
    height: 30vh;
    width: 100%;
}

.note_controls {
    display: flex;
    height: 100%;
}

.note_controls button:nth-child(1) {
    height: 100%;
    width: 100%;
    border: none;
    background: transparent;
    color: #ee9209;
    font-size: 2.3vh;
    border-radius: 0 0 0 1vh;
    filter: none;
    cursor: pointer;
    transition: 200ms;
}

.note_controls button:nth-child(1):hover {
    color: white;
    background: #ee9209;
    filter: drop-shadow(0px 0px 10px rgba(238, 146, 9, 0.63));
}

.note_controls button:nth-child(2) {
    height: 100%;
    width: 100%;
    border: none;
    background: transparent;
    color: #ff3030;
    font-size: 2.3vh;
    border-radius: 0 0 1vh 0;
    filter: none;
    cursor: pointer;
    transition: 200ms;
}

.note_controls button:nth-child(2):hover {
    color: white;
    background: #ff3030;
    filter: drop-shadow(0px 0px 10px rgba(255, 48, 48, 0.6));
}

.theme:hover, .create:hover, .save_button:hover, .cancel:hover {
    background: #e7eaf0;
}

.vipe {
    padding: 0.6vh 1.5vh;
    border-radius: 1vh;
    background-color: #fc3a3a;
    border: none;
    filter: drop-shadow(0px 4px 5px rgba(255, 0, 0, 0.29));
    color: white;
    cursor: pointer;
    transition: 200ms;
    margin: 0 1vh;
}

.vipe:hover {
    background: #cc2f2f;
    filter: none;
}

.controls {
    display: flex;
}

.mobile_controls {
    display: none;
}

select {
    width: auto;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 8px;
    margin: 0 1vh;
    cursor: pointer;
}

.date {
    margin: 1vh 0;
    padding: 2vh;
    color: #a2a2a2;
}

.display {
    width: 100%;
    height: 100%;
    position: fixed;
    pointer-events: all;
    background: rgba(0, 0, 0, 0.38);
    z-index: 1;
    opacity: 1;
    transition: 300ms;
    display: flex;
    align-items: center;
    justify-content: center;
}

.display.hidden {
    opacity: 0;
    pointer-events: none;
}

.edit_block {
    min-height: 54vh;
    min-width: 70vh;
    background: white;
    padding: 3vh;
    border-radius: 1vh;
}

.edit_block textarea {
    margin-top: 1vh;
    width: 100%;
    min-height: 40vh;
    overflow-y: scroll;
    border-radius: 2vh;
    border: none;
    background: #e8e8e8;
    padding: 2vh;
    resize: none;
}

.save_button {
    width: 100%;
    padding: 1vh;
    border-radius: 1vh;
    background-color: #fff;
    border: 0.2vh solid #e7eaf0;
    box-shadow: 0 0.1vh 0.1vh rgb(0 0 0 / 8%);
    color: #16192c;
    cursor: pointer;
    transition: background 200ms;
}

.empty_block {
    width: 100%;
    display: none;
    justify-content: center;
    color: gray;
}

@media screen and (max-width: 896px) {
    .controls {
        display: none;
    }
    .mobile_controls {
        display: flex;
    }
    .note {
        width: 35vh;
    }
    .edit_block {
        min-height: 50vh;
        min-width: 40vh;
    }
}

@media screen and (max-width: 375px) {
    .tittle_block {
        font-size: 2vh;
    }
    .note {
        width: 42vh;
    }
}

@media screen and (max-width: 360px) {
    .tittle_block {
        font-size: 2vh;
    }
    .note {
        width: 36vh;
    }
}

@media screen and (max-width: 820px) {
    .tittle_block {
        font-size: 2vh;
    }
    .note {
        width: 36vh;
    }
    .note_text p {
        font-size: 3vh;
    }
    .edit_block textarea {
        font-size: 2vh;
    }
}

@media screen and (max-width: 768px) {
    .tittle_block {
        font-size: 2vh;
    }
    .note {
        width: 36vh;
    }
    .note_text p {
        font-size: 3vh;
    }
    .edit_block textarea {
        font-size: 2vh;
    }
}

@media screen and (max-width: 912px) {
    .tittle_block {
        font-size: 2vh;
    }
    .note {
        width: 36vh;
    }
    .note_text p {
        font-size: 3vh;
    }
    .edit_block textarea {
        font-size: 2vh;
    }
}

@media screen and (max-width: 280px) {
    .tittle_block {
        font-size: 1.5vh;
    }
    .note {
        width: 33vh;
    }
    .note_text p {
        font-size: 3vh;
    }
}

@media screen and (max-width: 412px) {
    .tittle_block {
        font-size: 1.5vh;
    }
    .note {
        width: 33vh;
    }
    .note_text p {
        font-size: 3vh;
    }
}

.madeby {
    width: 100%;
    display: flex;
    justify-content: center;
}
.madeby a, .madeby a:visited {
    color: #a2a2a2;
}