html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
  
.home-page {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.new-sort-button, .home-page a {
  text-decoration: none;
  display: flex;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background-color: slategray;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: white;
  margin: 5%;
}

#dropZone {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.dragZone {
  background-color: #f1f1f1;
  height: 100%;
  position: fixed;
  left: 0;
  width: 25%;
  border: 2px solid black;
  top: 0;
}

#dragContainer {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  height: 95%;
  top: 5%;
  padding-top: 5%;
}
  

.draggable {
  cursor: grab;
  position: relative;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -moz-user-select: none;
  border-radius: 50%;
  max-width: 80px;
  z-index: 2;
  object-fit: contain;
  min-width: 80px;
  margin: 0;
}

.draggable img {
  border-radius: 50%;
  max-width: 80px;
  z-index: 2;
  object-fit: contain;
  min-width: 80x;
}


.color-headers {
  width: 75%;
  top: 0;
  right: 0;
  height: 100%;
  z-index: -2;
  position: absolute;
  display: flex;
  flex-direction: row;
  color: white;
  text-align: center;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.color-headers h1 {
  margin-top: 5%;
}
.background-colors {
  position: absolute;
  right: 0;
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: row;
  top: 10%;
  z-index: -2;
}
.background-color-blue-header, .background-color-green-header, .background-color-red-header, .background-color-yellow-header {
  height: 10%;
  width: 25%;
  border: 2px solid black;
  left: 25%;
}
.background-color-green-header {
  background-color: #39b95c;
}
.background-color-yellow-header {
  background-color: #ffb001;
}
.background-color-blue-header {
  background-color: #4f71ec;
}
.background-color-red-header {
  background-color: #ff3d0a;
}
.background-color-blue, .background-color-green, .background-color-red, .background-color-yellow {
  top: 10%;
  height: 100%;
  width: 25%;
  border: 2px solid black;
  left: 25%;
}
.background-color-green {
  background-color: #d5fddb;
}
.background-color-yellow {
  background-color: #fff5c2;
}
.background-color-blue {
  background-color: #bfe4ff;
}
.background-color-red {
  background-color: #ffb8a6;
}
.emotions {
  border-radius: 0%;
  max-width: none;
  width: 100%;
  padding-top: 1%;
}
.secondary-picture-holder {
  position: relative;
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  height: fit-content;
}
.border-box {
  position: absolute;
  border-top: 2px solid black;
  width: 100%;
  height: 50%;
  top: 48%;
}





.snapZone { 
  width: 15%;
  min-width: 15%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: aqua;
  border-radius: 50%;
  height: 100%;
  margin-left: 0.5%;
  font-size: 150%;
  font-weight: 900;
}

.nextButton, .nextButton img {
  position: absolute;
  width: 25%;
  bottom: 5%;
  right: 2.5%;
  z-index: 2;
}

#step1, #step2, #step3, #step4, #step5, #step6 {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.timeDisplay {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: -2;
}

.timeDisplayRow {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  z-index: -1;
  align-items: center;
  justify-content: center;
  margin-top: 5%;
  margin-bottom: 5%;
}

.insertedText {
  font-size: 150%;
  font-weight: 900;
  margin-left: 0.5%;
}

.daySortDrag {
  min-width:unset;
  margin: 2.5% auto;
}