* {
  box-sizing: border-box;
}
/* a small timer thing */
.timer-stuff {
  align-content: center;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
  margin: 0 auto;
}

/* for all the pink rectangles! */
.widgets {

  font-family: "Space Mono", monospace;
  text-align:center;
  font-weight:700;
  background-color:#f7b7cb;
  padding:2em;
  border-radius: 2em;
  margin: 3em 25%;
  opacity: 0.8;
}
footer {
  background-color:rgb(250, 219, 237);
  margin-top: 5em;
  padding: 1em;
  font-weight: 200;
  font-style:oblique;
  font-size: 30px;
  color:rgb(194, 138, 171);
}

/* task tracker things */
 #to-dos {
  font-family: "Space Mono", monospace;

}
#task {
  font-family: "Space Mono", monospace;
  border: none;
  background:rgb(255, 239, 247);
  color:rgb(173, 96, 141);
}
#add {
   background-color:#ffedf3;
   outline-width: 1%;
  border-color:rgb(204, 119, 163);
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: italic;
  color:#8e3a55;
  cursor: pointer;
}
#task-list {
  list-style-type: none;
  font-size: 17px;
  padding: 12px 8px;
  user-select: none;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}
  #task-list li::before {
  content:'';
  position: absolute;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background-image: url(assets/open-star.png);
  background-size: cover;
  background-position: center;
  left: 8px;

}
.done {
  text-decoration: line-through;
}
#task-list li.done::before {
  background-image: url(assets/closed-star.png);
}

ul li span{
  position: absolute;
  right: 0;
  width: 40px;
  height: 40px;
  font-size: 22px;
  color:#ba7f91;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
}
ul li span:hover {
  background:#ffcfde;
}



/*a lot of timer stuff*/
.timer{
  padding:2em;
  background-color:#ffcfde;
  border-radius:2em;
  margin-left:7em;
  margin-right:7em;
  font-family: "Space Mono", monospace;
  text-align:center;
  font-weight:700;

}
 .pomodoro {
  /*insert crashout because I was trying everything imaginable*/
  padding:0rem;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:21rem;
  height:21rem;
  position:relative;
  margin: 2rem auto;
  border-radius: 50%;
  background:#ffffff;
  content:"";
  border-radius:50%;
  font-size: 40px
}
.pomodoro::before {
  content:"";
  position:absolute;
  border:10px solid #8e3a55;
  border-radius:50%;
  width: 19rem;
  height:19rem;
  align-content: center;
  align-self:center;
  text-align: center;
}
.pomo-buttons {
  background-color:#ffedf3;
  outline-color: #8e3a55;
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: italic;
  color:#8e3a55;
}
.pomo-buttons:hover {
  background-color:#ffffff;
}

/*some general cross-site things*/
img {
  width: 100%;
  border-color:#8e3a55;
}
p {
  font-family: "Space Mono", monospace;
  font-size: 15px;
  text-align: center;
  padding: 1em;
  color:rgb(138, 12, 85);
  font-weight:500;
}

/*some stuff for the navigation bar*/
nav {
ul {
  list-style-type: none;
  background-color: #f7b7cb;
  overflow: hidden;
  padding: 1em;
  text-align: center;
}
li a {
    text-decoration:none;
    color:rgb(78, 13, 71);
    display: inline;
    padding:1em;
    font-family: "Space Mono", monospace;
}
li a:hover {
  background-color: rgb(255, 207, 232);
}
li {
    text-decoration:none;
    color:rgb(78,13,71);
    display: inline;
    padding:1em;
    font-family: "Space Mono", monospace;
}
}




body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(255, 238, 248);
  user-select: none;
  -webkit-app-region: drag;
}

button,
input,
textarea,
select {
  -webkit-app-region: no-drag;
  cursor: pointer;
}

/*google fonts stuff*/
.space-mono-regular {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.space-mono-bold {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: normal;
  font-size:100px;
}

.space-mono-regular-italic {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.space-mono-bold-italic {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: italic;
}

/* even more timer stuff, this kind of just ended up at the bottom */
@media screen and (min-width: 32px) and (max-width: 600px) {
  .pomodoro {
    transform: scale(.9);
  }
  .timer {
    width: 500px;
  }
}