sass.css

p {
  color: red;
}

#mixin-example {
  box-shadow: 5px 5px greenyellow;
  text-shadow: 3px 3px white;
}

#mixin-button {
  transform: scale(1) rotate(0deg);
  transition: transform 1s;
}
#mixin-button:hover {
  transform: scale(2) rotate(15deg);
  transition: transform 2s;
}

#animated-button {
  transform: scale(1) rotate(0deg);
  transition: transform 1s;
}
#animated-button:hover {
  transform: scale(0.5) rotate(-10deg);
  transition: transform 2s;
}

#subtitle {
  width: -moz-fit-content;
  width: fit-content;
  transform: scale(1) rotate(0deg);
  transition: transform 1s;
}
#subtitle:hover {
  transform: scale(0.5) rotate(-10deg);
  transition: transform 2s;
}

@font-face {
  font-family: "good vibes";
  src: url("goodvibes.ttf");
}
/**/
main {
  font-family: serif;
}

h1 {
  color: rgb(0, 95, 0);
  width: -moz-fit-content;
  width: fit-content;
}
h1:hover {
  color: rgb(140, 0, 0);
}

p b {
  color: rgb(71, 71, 255);
}

pre code {
  color: rgb(140, 0, 0);
}

pre i {
  color: rgb(161, 61, 161);
}

.bg-image {
  background-image: url("Sunshine.png");
}

.horizontalRepeat {
  background-repeat: space no-repeat;
}

.verticalRepeat {
  background-repeat: no-repeat repeat;
}

.width {
  width: 100vw;
}

.height {
  height: 70vw;
}

.size10 {
  background-size: 10%;
}

.size15 {
  background-size: 15%;
}

.size20 {
  background-size: 20%;
}

.size25 {
  background-size: 25%;
}

.size33 {
  background-size: 33%;
}

.size50 {
  background-size: 50%;
}

.size75 {
  background-size: 75%;
}

.size100 {
  background-size: 100%;
}

.stretch {
  background-size: 25% 100%;
}

.gradient {
  background-image: linear-gradient(90deg, green, white 10% 90%, blue);
}