@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.no-select {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

:root {
  --dark-pink: hsl(340, 70%, 62%);
  --light-pink: hsl(340, 77%, 65%);
  --gray-1: hsl(207, 10%, 20%);
  --gray-2: hsl(212, 10%, 26%);
  --gray-3: hsl(217, 7%, 63%);
  --gray-4: hsl(212, 10%, 28%);
  --gray-5: hsl(206, 11%, 88%);
}

body {
  height: 100vh;
  background: linear-gradient(-15deg, var(--dark-pink) 50%, var(--light-pink) 50%) fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  color: var(--gray-5);
  padding: 3.5rem 0;
}

a {
  text-decoration: none;
  color: var(--gray-5);
}

main {
  position: relative;
  background-color: var(--gray-2);
  width: 64vh;
  min-height: 90vh;
  border-radius: 0.5rem;
  overflow-y: hidden;
}

nav {
  display: flex;
  justify-content: space-between;
  padding: 0 18%;
  text-align: center;
  border-bottom: 2px solid var(--gray-1);
  font-weight: 500;
}

nav a {
  display: block;
  width: 100%;
  font-weight: 500;
  padding-bottom: 0.5rem;
  color: var(--gray-3);
  padding: 1.2rem 0;
}

nav a:hover {
  border-bottom: 2px solid var(--light-pink);
  color: var(--gray-5);
  transition: color 500ms, border-color 500ms;
}

.active {
  border-bottom: 2px solid var(--light-pink);
  color: var(--gray-5);
}

.date-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--gray-5);
  text-align: center;
  padding: 10% 28%;
}

.date-section h1 {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.date-section p {
  color: var(--gray-3);
  font-weight: 500;
}

.left-icon:hover,
.right-icon:hover {
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(82%) sepia(10%) saturate(74%) hue-rotate(163deg) brightness(109%)
    contrast(92%);
}

.add-task {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 12%;
}

.task-section {
  height: 510px;
  width: 100%;
  padding: 0 12%;
  margin: 0 auto;
  overflow: auto;
  border-bottom: 2px solid var(--gray-1);
}

.task-section::-webkit-scrollbar {
  display: none;
}

input[type="text"] {
  width: 100%;
  position: relative;
  background: var(--gray-1);
  height: 2.5rem;
  outline: none;
  color: var(--gray-3);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  padding: 1.2rem 8px 1.2rem 46px;
  border-radius: 5px;
  border: 2px solid var(--gray-1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='none' d='M0 0h256v256H0z'/%3E%3Cpath fill='none' stroke='%239a9fa7' stroke-linecap='round' stroke-linejoin='round' stroke-width='8' d='M40 68h176M40 108h128M40.01 148H216M40.01 188H168' class='colorStroke000 svgStroke'/%3E%3C/svg%3E")
    8px center/30px no-repeat;
}

input:focus,
input:hover {
  color: var(--gray-5);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='288' height='288'%3E%3Crect width='256' height='256' fill='none' /%3E%3Cline x1='40' x2='216' y1='68' y2='68' fill='none' stroke='%23dde1e4' stroke-linecap='round' stroke-linejoin='round' stroke-width='8' class='colorStroke000 svgStroke' /%3E%3Cline x1='40' x2='168' y1='108' y2='108' fill='none' stroke='%23dde1e4' stroke-linecap='round' stroke-linejoin='round' stroke-width='8' class='colorStroke000 svgStroke' /%3E%3Cline x1='40.006' x2='216' y1='148' y2='148' fill='none' stroke='%23dde1e4' stroke-linecap='round' stroke-linejoin='round' stroke-width='8' class='colorStroke000 svgStroke' /%3E%3Cline x1='40.006' x2='168' y1='188' y2='188' fill='none' stroke='%23dde1e4' stroke-linecap='round' stroke-linejoin='round' stroke-width='8' class='colorStroke000 svgStroke' /%3E%3C/svg%3E")
    8px center/30px no-repeat;
}

input::placeholder {
  font-style: italic;
}

.task {
  display: grid;
  grid-template-columns: 1fr 10fr 1fr;
  margin-top: 1.5rem;
  position: relative;
}

input[type="checkbox"] {
  appearance: none;
  cursor: pointer;
  outline: none;
  background: var(--gray-4);
  border: 2px solid var(--gray-1);
  height: 20px;
  width: 20px;
  position: relative;
}

input[type="checkbox"]::after {
  font-family: "Font Awesome 6 Pro";
  font-size: 12px;
  content: "\f00c";
  padding: 2px;
  visibility: hidden;
  color: var(--gray-5);
}

input[type="checkbox"]:checked::after {
  visibility: visible;
}

hr {
  border: 1px solid var(--gray-1);
  margin-top: 1.2rem;
}

.memo-text {
  color: var(--gray-3);
  font-size: 0.9rem;
  margin-top: 0.8rem;
}

.menu {
  color: var(--gray-5);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' x='0' y='0' version='1.1' viewBox='0 0 29 29' xml:space='preserve' %3E%3Ccircle cx='14.5' cy='14.5' r='2.5' fill='%239a9fa7' class='color000 svgShape' /%3E%3Ccircle cx='4.5' cy='14.5' r='2.5' fill='%239a9fa7' class='color000 svgShape' /%3E%3Ccircle cx='24.5' cy='14.5' r='2.5' fill='%239a9fa7' class='color000 svgShape' /%3E%3Ccircle cx='14.5' cy='14.5' r='2.5' fill='%239a9fa7' class='color000 svgShape' /%3E%3Ccircle cx='4.5' cy='14.5' r='2.5' fill='%239a9fa7' class='color000 svgShape' /%3E%3Ccircle cx='24.5' cy='14.5' r='2.5' fill='%239a9fa7' class='color000 svgShape' /%3E%3C/svg%3E")
    center right/26px no-repeat;
  width: 100%;
  height: 100%;
  position: relative;
}

.menu:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' x='0' y='0' version='1.1' viewBox='0 0 29 29' xml:space='preserve' %3E%3Ccircle cx='14.5' cy='14.5' r='2.5' fill='%23dde1e4' class='color000 svgShape' /%3E%3Ccircle cx='4.5' cy='14.5' r='2.5' fill='%23dde1e4' class='color000 svgShape' /%3E%3Ccircle cx='24.5' cy='14.5' r='2.5' fill='%23dde1e4' class='color000 svgShape' /%3E%3Ccircle cx='14.5' cy='14.5' r='2.5' fill='%23dde1e4' class='color000 svgShape' /%3E%3Ccircle cx='4.5' cy='14.5' r='2.5' fill='%23dde1e4' class='color000 svgShape' /%3E%3Ccircle cx='24.5' cy='14.5' r='2.5' fill='%23dde1e4' class='color000 svgShape' /%3E%3C/svg%3E");
  cursor: pointer;
}

.dropdown {
  font-size: 0.9rem;
  position: absolute;
  top: 100%;
  right: 0;
  left: -8rem;
  padding: 1rem;
  background: var(--gray-4);
  z-index: 1;
  border-radius: 5px;
  color: var(--gray-3);
  font-weight: 500;
  box-shadow: 2px 2px 5px 1px var(--gray-1);
  visibility: hidden;
  opacity: 0;
}

.menu:hover .dropdown {
  visibility: visible;
  opacity: 1;
  transition: all 0.3s;
}

.dropdown i {
  width: 10px;
  padding-right: 1rem;
}

.dropdown-item:not(:first-child) i {
  margin-top: 1.4rem;
}

.dropdown-item:hover {
  color: var(--gray-5);
  transition: all 0.3s;
}

.icon {
  color: var(--gray-3);
}

.icon:hover {
  cursor: pointer;
  color: var(--gray-5);
}

.favorite {
  position: absolute;
  left: -1.5rem;
  top: 0.6rem;
  /* padding-left: calc(12% - 2rem); */
}