@import "colors"

body, html
  margin: 0
  background-color: $background
  font-family: "Inter", sans-serif
  font-weight: 700

::-webkit-scrollbar
  width: 13px

::-webkit-scrollbar-thumb
  background: $darker-gray
  border-radius: 10px

::-webkit-scrollbar-thumb:hover
  background: $dark-gray

.speedtest-icon
  font-size: 26pt
  color: $white
  margin-right: 10px

.container-icon
  width: 35px
  height: 35px
  color: $white
  font-size: 26pt

.help-icon
  cursor: help

.icon-red
  color: $red

.icon-error
  color: $error

.icon-green
  color: $green

.icon-orange
  color: $orange

.icon-blue
  color: $blue

main
  display: flex
  flex-direction: column
  align-items: center

hr
  margin: 2rem
  width: 3rem
  border: 1px solid $gray
  border-radius: 25px

@keyframes opacity
  0%
    opacity: 0
  100%
    opacity: 1

@keyframes fadeIn
  0%
    opacity: 0
    transform: scale(0.4)
    filter: blur(5px)
  100%
    opacity: 1

@keyframes fadeOut
  0%
    opacity: 1
  100%
    opacity: 0
    transform: scale(0.4)
    filter: blur(5px)

@media (max-width: 730px)
  ::-webkit-scrollbar
    width: 5px