style.css

@font-face {
  font-family: 'Leon' ;
  src: url('LeonSans-Medium.otf');
}
:root {
  --primary: #0064ff;
  --secondary: #2084ff;
  --trans: #0064ff22;
  --blue: #0064ff;
  --red: #ff0032;
  --yellow: #ffc800;
  --green: #00b428;
  --light: white;
  --dark: black;
  --dark-trans: #00000022;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Leon' !important;
  font-size: 1vw;
  transition: 0.5s;
}
button {
  margin: 0;
  background: transparent;
  border-radius: 0.3vw;
  padding: 1vw 2vw;
  border: none;
  color: var(--primary);
  font-family: 'Leon';
  font-size: 1vw;
  transition: 0.5s;
}
button:hover {
  background: var(--trans);
}
button:focus {
  outline: none;
  background: var(--trans);
}
.black {
  background: transparent;
  color: var(--dark);
}
.black:hover {
  background: var(--dark-trans);
}
.black:focus {
  background: var(--dark-trans);
}
.contained {
  background: var(--primary);
  border-radius: 0.3vw;
  padding: 1vw 2vw;
  border: none;
  color: var(--light);
}
.contained:hover {
  background: var(--secondary);
}
.contained:focus {
  background: var(--secondary);
}
.btn {
  border-radius: 0.3vw;
  overflow: hidden;
}