@font-face {
  font-family: 'Wotfard';
  font-display: block;
  src: url('/fonts/wotfard-regular.woff2') format('woff2'), url('/fonts/wotfard-regular.ttf') format('truetype'),
    url('/fonts/worfard-regular.eot') format('embedded-opentype');
}

:root {
  --orange-dark-bg: #e06c00;
  --orange-bg: #ff9a00;
  --orange-text: #ff9500;
  --dark-grey-text: #595960;
  --light-grey-text: #c3c3c3;
  --dark-grey-text-20: #8b8b8b;
  --background-grey: #f4f4f4;
  --background-light-grey: #fcfbfc;
  --light-grey-80: #f8f8f9;
  --dark-grey-40: #e7e7e7;
  --light-grey: #f7f7f9;
  --white: #ffffff;
  --white-two: #f0f0f0;
  --black: #111111;
  --blue-ts: #2965f1;
  --blue-react: #61dbfb;
  --black-two: #353535;
  --black-three: #121212;
  --dark: #181820;
  --slate-grey: #7c7c7c;
  --abs-black: #000000;
  --hover-card-bg: #e8e8e8;
  --contacts-background: #f7f5e8;
  --widget-color: #fafafa;

  --avatar-size: 50px;

  --wotfard: 'Wotfard';

  --javascript: #f0db4f;
  --astro-orange: #ff5d01;
  --redux-bg: #764abc;
  --node-js-bg: #3c873a;
  --mongodb-bg: #3fa037;

  --main-bg: #f2f2f2;
  --inverted-main-bg: #000;
  --resume-bg: white;
  --text: #000;
  --accent: white;
  --secondary-text: #767676;
  --header-shadow: #00000033;

  --space: 1rem;
  --transition: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.dark {
  --main-bg: #3d3d3d;
  --inverted-main-bg: #f2f2f2;
  --resume-bg: #000;
  --text: #f2f2f2;
  --accent: #bbbbbb;
  --secondary-text: #aaa;
  --header-shadow: rgba(242, 242, 242, 0.5);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
  background-color: var(--main-bg);
}

body {
  margin: 0 auto;
  position: relative;
  font-family: 'Wotfard', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

strong {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
p,
span {
  color: var(--text);
}

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

input,
button,
textarea,
select {
  font: inherit;
}

details > summary {
  list-style: none;
  outline: none;
}

details > summary::marker,
details > summary::-webkit-details-marker {
  display: none;
}

dialog:not([open]) {
  display: none;
}