@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&family=Roboto:wght@400;500&display=swap');

:root{
  /*   COLORS   */
  
  --bg-white: #f8f8f8;
  
  --button-solid-color: rgb(0, 255, 255);
  --button-transison-color: rgba(0, 255, 255, 0.5);
  --button-text-solid-color: rgba(0, 0, 0, 0.5);
  --button-text-transison-color: rgb(255, 255, 255);

  /*   RADIUS   */
  
  /*   OTHERS   */
}

*{
  box-sizing: border-box;
  background-color: var(--bg-white);
  scrollbar-base-color: rgb(0, 0, 0);
  scrollbar-darkshadow-color: rgba(0, 0, 0, 0.5);
}

.navbar{
  background-color: #000;
  transition: all 0.3s ease;
}

.navbar a{
  background-color: var(--button-solid-color);
  text-decoration: none;
  color: var(--button-text-solid-color);
}

.navbar a:hover{
  background: var(--button-transison-color);
  color: var(--button-text-transison-color);
  transition: all 0.3s ease;
}