* { margin: 0; padding: 0; }

body {
  --background-nativa: #1B1B1B;
  --border-gray-color: #2E2E2E;
  --border-gray-lighter-color: #373737;
  --main-theme-color: #43B2E6;
  --secondary-theme-color: #308DB8;
  --main-theme-text-color: #AFE4FF;
  --light-theme-color: #F2E6E2;
  padding: 8px;
  font-family: 'Inter', sans-serif;
  background-color: var(--background-nativa);
  color: #fff;
}

.header {
  height: 4em;
  max-width: 30em;
  margin: 0 auto;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: 1em;
  background-color: rgba(27, 27, 27, 0.30);
  backdrop-filter: blur(12px);
  border-bottom: solid 1px var(--border-gray-color);
  font-size: 1.1em;
}
.header p {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.taskList {
  max-width: 30em;
  margin: 0 auto;
  margin-bottom: 50%;
}

.task {
  display: grid;
  grid-template-columns: 5em 15px 1fr 20px;
  gap: 1em;
  margin-bottom: 1em;
  padding: 1em;
  border: solid 1px var(--border-gray-color);
  border-radius: 1em;
}

.taskMap {
  position: relative;
  overflow: hidden;
  width: 5em;
  height: 5em;
  background-image: url("../img/background.png");
  background-size: cover;
  background-color: var(--border-gray-color);
  border-radius: 0.4em;
}
.mapDot {
  position: absolute;
  bottom: var(--cordY);
  right: var(--cordX);
  width: 10px;
  height: 10px;
  border-radius: 1000px;
  background-color: var(--main-theme-color);
  box-shadow: 0px 0px 30px 9px var(--main-theme-color);
}
.mapCordX {
  position: absolute;
  bottom: 0;
  right: calc(var(--cordX) + 2px);
  width: 5px;
  height: calc(var(--cordY));
  background-color: var(--border-gray-lighter-color);
}
.mapCordY {
  position: absolute;
  bottom: calc(var(--cordY) + 2px);
  right: 0;
  width: calc(var(--cordX));
  height: 5px;
  background-color: var(--border-gray-lighter-color);
}

.taskGraph {
  heigth: 5em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1em 1fr;
  gap: 6px;
}
.taskGraph * {
  position: relative;
  display: inline-block;
  width: 5px;
  height: 5em;
  background-color: var(--border-gray-lighter-color);
  border-radius: 5px;
  overflow: hidden;
}
.graphUrgency div {
  position: absolute;
  bottom: 0;
  background-color: var(--main-theme-color);
  box-shadow: 0px 0px 20px 4px var(--main-theme-color);
  height: var(--cordX);
}
.graphImportance div {
  position: absolute;
  bottom: 0;
  background-color: var(--main-theme-color);
  box-shadow: 0px 0px 20px 4px var(--main-theme-color);
  height: var(--cordY);
}

.taskText h5 {
  font-size: 1.1em;
  font-weight: 500;
}
.taskText p {
  margin-top: 6px;
  font-size: 0.9em;
  color: #7C7C7C;
}

.circle {
  z-index: 98;
  border-radius: 99999px;
  position: absolute;
  transform: translate(-50%, -50%);
}

.removeButton {
  position: relative;
}
.removeButton svg {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  width: 20px;
  fill: var(--main-theme-color);
}
.removeButton svg:hover {
  opacity: 0.7;
  cursor: pointer;
}

.taskAdder {
  max-width: 30em;
  width: 100%;
  margin: 0 auto;
  padding: 1em;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0%);
  bottom: 0;
  z-index: 99;
  margin-bottom: 1em;
  background-color: var(--main-theme-color);
  border-radius: 1em;
  color: var(--main-theme-text-color);
}
.nameInput {
  box-sizing: border-box;
  border: none;
  width: 100%;
  padding: 0.7em;
  margin-bottom: 1em;
  background-color: var(--secondary-theme-color);
  border-radius: 0.4em;
  overflow: hidden;
  color: var(--main-theme-text-color);
}
.taskInput {
  box-sizing: border-box;
  border: none;
  width: 100%;
  margin-bottom: 1em;
  padding: 0.7em;
  background-color: var(--secondary-theme-color);
  border-radius: 0.4em;
  overflow: hidden;
  color: var(--main-theme-text-color);
}
::placeholder {
  color: var(--main-theme-text-color);
}

.controls {
  display: grid;
  grid-template-columns: 1fr 1fr 5em;
  gap: 1em;
}
.rangeShowcase {
  display: grid;
  margin-top: 5px;
  grid-template-columns: 1em 1fr 1.3em;
  gap: 1em;
}
.rangeShowcase * {
  text-align: center;
  font-size: 0.8em;
}

.sumbitTaskButton {
  position: relative;
  overflow: hidden;
  background-color: var(--background-nativa);
  border-radius: 100px;
  font-size: 1.5em;
  cursor: pointer;
}
.sumbitTaskButton * {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 600px) {
  .taskAdder {
    width: 82%;
  }
  .controls {
    display: flex;
    flex-wrap: wrap;
  }
  .rangeSelector {
    width: 100%;
  }
  .sumbitTaskButton {
    width: 100%;
    height: 1.5em;
  }
}

@keyframes removeTaskAnimation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes clickButtonAnimation {
  from {
    height: 0px;
    width: 0px;
    background: rgba(255, 255, 255, .5);
  }
  to {
    height: 14em;
    width: 14em;
    background: rgba(rgb(207, 88, 60), .0);
  }
}

/* Change default input range look */
input[type=range] {
  width: 100%;
  margin: 7.65px 0;
  -webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: var(--secondary-theme-color);
  border-radius: 1.5px;
  width: 100%;
  height: 4.7px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -7.65px;
  width: 20px;
  height: 20px;
  background: var(--light-theme-color);
  border: 0px solid rgba(0, 0, 0, 0);
  border: 0;
  border-radius: 50px;
  cursor: pointer;
  -webkit-appearance: none;
}