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

:root {

  /**
   * colors 
   */

  --red-orange-color-wheel: darkgoldenrod;
  --ultramarine-blue: hsl(217, 100%, 50%);
  --lavender-blue: hsl(229, 96%, 91%);
  --oxford-blue: hsl(229, 84%, 12%);
  --light-gray: hsl(0, 0%, 80%);
  --sonic-silver: hsl(0, 0%, 47%);
  --blue-crayola: hsl(216, 98%, 52%);
  --cultured: hsl(228, 26%, 96%);
  --white: hsl(0, 0%, 100%);
  --theme-color: darkgoldenrod;
  --font-color: #000;
  /**
   * typography 
   */

  --fs-1: 38px;
  --fs-2: 35px;
  --fs-3: 30px;
  --fs-4: 22px;
  --fs-5: 20px;
  --fs-6: 15px;

  --fw-5: 500;
  --fw-6: 600;
  --fw-7: 700;
  --fw-8: 800;
  --fw-9: 900;

  /**
   * spacing 
   */

  --px: 15px;
  --py: 80px;

  /**
   * others 
   */

  --default-transition: 0.25s ease;

}

a {
  -webkit-tap-highlight-color: transparent;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}