@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  font-size: 14px;
}

body {
  font-family: "Raleway", sans-serif;
  background-color: hsl(229, 57%, 11%);
}

.dark-blue {
  background-color: hsl(228, 56%, 26%);
}

.rounded-right {
  border-top-right-radius: 6rem;
}

.bg-image {
  background-color: hsl(229, 57%, 11%);
}

.linear-gradient {
  background: linear-gradient(90deg, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}

.ball {
  top: 1px;
  width: 8px;
  height: 8px;
}

.bg-185 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 1024px) {
  .bg-185 {
    top: -30px;
    left: calc(100% - 100px);
  }

  .triangle {
    display: block;
    position: absolute;
    bottom: -20px;
    right: 0;
    border-left: 25px solid transparent;
    border-top: 25px solid white;
  }
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}