/* up button styles */
/* Mobile default: small phones */
.up {
  position: fixed;
  bottom: 70px;
  right: var(--padding);
  display: flex;
}
.up-button {
  display: none;
}
.up button {
  width: var(--navbar-button-height);
  height: var(--navbar-button-height);
  background-color: var(--button-color);
  border: none;
  border-radius: var(--border-radius);
  transition: 0.1s;
  cursor: pointer;
  padding-top: 3px;
}
.up button:hover {
  background-color: var(--button-hover-color);
}
.up button:active {
  background-color: var(--background-color);
}
.up img {
  height: var(--navbar-icon-height);
  transform: rotate(90deg);
}

/* Small tablets and large phones */
@media (min-width: 640px) { 
  .up {
    right: calc(var(--padding) * 3);
  }
}

/* Tablets */
@media (min-width: 768px) { 
  
}

/* Laptops and desktops */
@media (min-width: 1024px) { 
    
}

/* Large screens and desktops */
@media (min-width: 1280px) { 
    
}

/* Ultra large screens and desktops */
@media (min-width: 1536px) { 
    
}