*,
*::after,
*::before {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
:root {
  --primary-pink: hsl(6, 100%, 80%);
  --primary-purpule: hsl(335, 100%, 65%);
  --blue-200: hsl(243, 100%, 93%);
  --Grayish-Blue: hsl(229, 7%, 55%);
  --Blue-850: hsl(228, 56%, 26%);
  --Blue-950: hsl(229, 57%, 11%);
}
body {
  height: 100vh;
  background-color: var(--Blue-950);
  font-family: "Raleway", "sans-serif";
}

section {
  background-color: var(--Blue-850);
}

.storage-left {
  background-color: var(--blue-200);
  color: var(--Blue-850);
  color: black;
  background-color: rgb(255, 255, 255);
}
.actual-bar {
  background-color: var(--Blue-950);
}
.actual-bar .colred {
  background: linear-gradient(
    to right,
    var(--primary-pink),
    var(--primary-purpule)
  );
}
.circle {
  background-color: rgb(255, 255, 255);
}

.icons img {
  background-color: var(--Blue-950);
}
.storage {
  color: white;
}

@media (max-height: 800px) {
  .storage-left {
    min-width: 10%;
    grid-area: left;
    padding: 10px;
    border-radius: 10px;
    justify-self: end;
    position: absolute;
    left: 100%;
    top: 20%;
    right: 25%;
    display: flex;
    flex-direction: row;
  }
}