style.css

/* importing fonts from google font */

/* »» ROBOTO FONT and »» RUBIK FONT (Combined) */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Rubik:wght@300;400;500;700&display=swap");

/*------------------------------------------------------*/

:root {
  /* FONTS  */
  --rubik: "Rubik", sans-serif;
  --roboto: "Roboto", sans-serif;

  /* COLOR */
  --white: #fff;
  --black: #000;
  --h1Color: #eb6123;
  --h1ColorLight: #53ca90;
  --theme: #26baff;
  --bodyColor: #512888;
  --footerBtn: #936639;
}

/*--------------------------------*/

body {
  background-color: var(--bodyColor);
  text-align: center;
}

h1 {
  color: var(--h1Color);
  font-size: 40px;
  font-family: var(--rubik);
  text-align: center;
  padding: 10px;
  transition: font-size 1s, content 2s;
}

h2 {
  font-family: var(--rubik);
  text-align: center;
  font-size: 200%;
  padding: 25px;
}

p{
  color: var(--h1ColorLight);
  font-family: var(--rubik);
  font-size: 24px;
  text-align: center;
}

section {
  margin-top: 5rem;
}
h1:hover span{
  display: none;
}
h1:hover{
  font-size: 50px;
}
h1:hover:before{
  content:"BOOOOOOO!!!!";
}