/* src/css/global.css */
html {
  scroll-behavior: smooth;
}
*:not(:where(ul)) {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;
}
button {
  cursor: pointer;
}

/* src/css/utils/color.css */
.blue {
  --color-lighter: #d3e5ff;
  --color-light: #3291ff;
  --color-normal: #0070f3;
  --color-dark: #0761d1;
}
.red {
  --color-lighter: #f7d4d6;
  --color-light: #ff1a1a;
  --color-normal: #ee0000;
  --color-dark: #c50000;
}
.yellow {
  --color-lighter: #ffefcf;
  --color-light: #f7b955;
  --color-normal: #f5a623;
  --color-dark: #ab570a;
}
.violet {
  --color-lighter: #e3d7fc;
  --color-light: #8a63d2;
  --color-normal: #7928ca;
  --color-dark: #4c2889;
}
.cyan {
  --color-lighter: #aaffec;
  --color-light: #79ffe1;
  --color-normal: #50e3c2;
  --color-dark: #29bc9b;
}
.green,
.success {
  --color-r: 25;
  --color-g: 135;
  --color-b: 84;
  color: rgb(var(--color-r), var(--color-g), var(--color-b));
}
.info,
.sky {
  --color-r: 13;
  --color-g: 202;
  --color-b: 240;
  color: rgb(var(--color-r), var(--color-g), var(--color-b));
}
.primary,
.blue {
  --color-r: 13;
  --color-g: 110;
  --color-b: 253;
  color: rgb(var(--color-r), var(--color-g), var(--color-b));
}
.dark {
  --color-r: 33;
  --color-g: 37;
  --color-b: 41;
  color: rgb(var(--color-r), var(--color-g), var(--color-b));
}
.warning,
.yellow {
  --color-r: 255;
  --color-g: 193;
  --color-b: 7;
  color: rgb(var(--color-r), var(--color-g), var(--color-b));
}
.secondary,
.gray {
  --color-r: 108;
  --color-g: 117;
  --color-b: 125;
  color: rgb(var(--color-r), var(--color-g), var(--color-b));
}
.danger,
.red {
  --color-r: 220;
  --color-g: 53;
  --color-b: 69;
  color: rgb(var(--color-r), var(--color-g), var(--color-b));
}
.light,
.white {
  --color-r: 248;
  --color-g: 249;
  --color-b: 250;
  color: rgb(var(--color-r), var(--color-g), var(--color-b));
}
.bg-green,
.bg-success {
  --bg-color-r: 25;
  --bg-color-g: 135;
  --bg-color-b: 84;
  --bg-color: rgb(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b));
  background-color: rgb(25, 135, 84);
}
.bg-info,
.bg-sky {
  --bg-color-r: 13;
  --bg-color-g: 202;
  --bg-color-b: 240;
  --bg-color: rgb(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b));
  background-color: rgb(13, 202, 240);
}
.bg-primary,
.bg-blue {
  --bg-color-r: 13;
  --bg-color-g: 110;
  --bg-color-b: 253;
  --bg-color: rgb(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b));
  background-color: rgb(13, 110, 253);
}
.bg-dark {
  --bg-color-r: 33;
  --bg-color-g: 37;
  --bg-color-b: 41;
  --bg-color: rgb(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b));
  background-color: rgb(33, 37, 41);
}
.bg-warning,
.bg-yellow {
  --bg-color-r: 255;
  --bg-color-g: 193;
  --bg-color-b: 7;
  --bg-color: rgb(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b));
  background-color: rgb(255, 193, 7);
}
.bg-secondary,
.bg-gray {
  --bg-color-r: 108;
  --bg-color-g: 117;
  --bg-color-b: 125;
  --bg-color: rgb(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b));
  background-color: rgb(108, 117, 125);
}
.bg-danger,
.bg-red {
  --bg-color-r: 220;
  --bg-color-g: 53;
  --bg-color-b: 69;
  --bg-color: rgb(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b));
  background-color: rgb(220, 53, 69);
}
.bg-light,
.bg-white {
  --bg-color-r: 248;
  --bg-color-g: 249;
  --bg-color-b: 250;
  --bg-color: rgb(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b));
  background-color: rgb(248, 249, 250);
}

/* src/css/utils/index.css */

/* src/css/components/Container.css */
*[class*=container] {
  width: 100%;
  height: 100%;
}
.container-padding {
  padding: var(--padding-md);
}
.container-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* src/css/components/Button.css */
.btn {
  mix-blend-mode: exclusion;
}
.btn-normal {
  border-radius: .5em;
}
.btn-rounded {
  border-radius: 1em;
}
.btn-square {
  border-radius: 0;
}
.btn-outline {
  border: 1px solid var(--color);
  color: var(--color);
  transition: background .3s;
}
.btn-outline:hover {
  background: rgba(var(--color-r), var(--color-g), var(--color-b), .2);
}
.btn-outline:active {
  background: rgba(var(--color-r), var(--color-g), var(--color-b), 0);
}
.btn-filled {
  border: 1px solid var(--bg-color);
  background: var(--bg-color);
  transition: opacity .3s;
}
.btn-filled:hover {
  opacity: .8;
}
.btn-filled:active {
  opacity: 1;
}
.btn-sm {
  padding: .12em 1em;
}
.btn-md {
  padding: .35em 1.5em;
}
.btn-lg {
  padding: .6em 2.75em;
}

/* src/css/components/index.css */

/* src/css/layout/header/header.css */
#header {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 1em;
  height: auto;
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  z-index: 99;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header > a:hover {
  letter-spacing: 0.2em;
}
#header > a {
  transition: all .3s;
  text-decoration: none;
  position: relative;
}
#header > a::after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  background: var(--color-normal);
  transition: all 0.3s;
  width: 0;
}
#header > a:hover::after {
  width: 5.8em;
}

/* src/css/layout/header/menu.css */
#nav-menu {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  padding-top: 3em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 0;
  overflow: hidden;
  transition: width .3s;
  background: white;
  z-index: 1;
}
#header .menuIsOpen {
  width: 150px;
}
#nav-menu ul {
  padding-right: 2em;
}
#nav-menu li {
  display: flex;
  margin: 1em;
}
#nav-menu a {
  overflow: hidden;
  text-decoration: none;
  position: relative;
  padding-bottom: 5px;
}
#nav-menu a::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--color-normal);
  transform: translateX(102%);
  transition: all 0.3s;
}
#nav-menu a:hover::after {
  transform: translateX(0%);
}
#btn-menu {
  position: relative;
  z-index: 99;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.25em;
  line-height: 0;
  width: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}
#btn-menu::before {
  content: "\1f649";
  display: block;
}
#header #btn-menu.btnIsOpen::before {
  content: "\1f648";
  display: block;
}
@media (min-width: 640px) {
  #btn-menu {
    display: none;
  }
  #nav-menu {
    padding: 0;
    position: relative;
    width: auto;
    height: auto;
    background: none;
  }
  #nav-menu ul {
    display: flex;
    padding: 0;
  }
  #nav-menu li {
    margin: 0 0 0 1em;
  }
}

/* src/css/layout/header/index.css */

/* src/css/layout/index.css */
#container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#container > main {
  flex-grow: 1;
}

/* src/css/index.css */