* {
  box-sizing: border-box;
}

.images-nav {
  background-color: transparent;
  color: #26a69a;
  border: none;
}

.parent-div {
  width: 1000px;
  height: 1500px;
  padding: 50px;
  background-color: aqua;
}

.image-container:after {
  content: "";
  display: table;
  clear: both;
}

.image-wrapper {
  float: left;
  width: 10%;
  padding: 10px;
  ;
}

.image-wrapper img {
  height: 2rem;
  opacity: 0.8;
  cursor: pointer;
  width: 100%;
}

.image-wrapper img:hover {
  opacity: 1;
}

#uploadBtn {
  margin-top: 6.5%;
}

#meme-preview {
  margin-top: 5%;
  display: flex;
  position: relative;
  overflow: hidden;
  width: 40em;
  height: 30em;
  border: 1px solid #473b3b;
}

.memeText {
  font: 5.5rem sans-serif;
  text-shadow: 0.12rem 0.12rem black;
  position: absolute;
  line-height: 80%;
  touch-action: none;
}

#memeUploadForm {
  margin-top: 7.5%;
  color: #9e9e9e;
}

#memeUploadForm div {
  margin-top: 2.75%;
}

#memeUploadForm div button:nth-child(2) {
  margin-left: 5%;
}

#meme-preview canvas,
#meme-preview img {
  flex-grow: 1;
}

#meme-preview img {
  color: darkblue !important;
  font: 0.1rem sans-serif;
}

#createMemecontainer {
  margin-top: 2.5%;
  width: 92%;
}

#memeTextDiv {
  margin: 4% auto;
}

#memeTextDiv * {
  margin-top: 2%;
}

#memeBottonText {
  top: 80%;
}

#colorsSelect div {
  font-weight: bold;
  display: inline;
}

#colorsSelect :not(:first-child) {
  margin-left: 2%;
}

#memeSideButtons {
  margin-top: 2%;
}

#memeSideButtons :not(:first-child) {
  margin-left: 33rem;
}

.input-field textarea,
.input-field input {
  width: 70% !important;
}

.delete-meme-text {
  margin-left: 2.5%;
  background-color: #26a69a;
  color: white;
  border: none;
  border-radius: 2px;
  margin-bottom: 2%;
}

.delete-meme-text i {
  font-size: 0.9rem !important;
}

.upvote-btn {
  -webkit-text-stroke-color: white;
  -webkit-text-stroke-width: medium;
  margin-top: 20%;
}

.upvoted {
  color: white !important;
}

.unvoted {
  color: transparent !important;
}

@media screen and (max-width: 730px) {
  #meme-preview {
    width: 24em;
    height: 20em;
  }
}

@media screen and (max-width: 425px) {
  #meme-preview {
    width: 19em;
    height: 16em;
  }
}

@media screen and (max-width: 605px) {
  #colorsSelect {
    width: 100vw;
  }
}

@media screen and (max-width: 430px) {
  .memeText {
    font-size: 3.2rem;
  }

  .image-wrapper {
    width: 18%;
  }
}