/* Query based on tailwind css */
/* https://tailwindcss.com/docs/responsive-design */
/* --mq-xs: '480px'; */
/* --mq-sm: '640px'; */
/* --mq-md: '768px'; */
/* --mq-ml: '992px'; */
/* --mq-lg: '1024px'; */
/* --mq-xl: '1280px'; */
/* --mq-xxl: '1536px'; */

html {
   /* As 62.5% of the default font size in browser (16px) is equal to 10px */
   font-size: 62.5%;
}

:root {
   --color-black: rgb(19, 19, 19);
   --color-grey: rgba(19, 19, 19, 0.5);
   --color-bg: #f8f8f8;
   --space-xs: 5px;
   --space-sm: calc(var(--space-xs) * 2);
   --space-md: calc(var(--space-sm) * 2);
   --space-lg: calc(var(--space-md) * 2);
}

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

::selection {
   background-color: rgba(0, 0, 0, 0.1);
   color: var(--color-black);
}

html {
   box-sizing: border-box;
}

body {
   position: relative;

   transition: opacity 300ms ease-in-out;
   box-sizing: inherit;
   margin: 0;
   background: var(--color-bg);
   padding: 0;
   width: 100vw;
   height: 100%;

   color: var(--color-black);
   font-size: 13.5px;
   line-height: 1.3;
   font-family: 'General';
   text-align: left;
   text-rendering: optimizeLegibility;
}

body header,
body #projects,
body footer {
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
}

body.is-revealed header,
body.is-revealed #projects,
body.is-revealed footer {
   visibility: visible;
   opacity: 1;
   pointer-events: all;
}

body.is-revealed header {
   transition: opacity 300ms ease-in-out;
}

body.is-revealed #projects,
body.is-revealed footer {
   transition: opacity 300ms ease-in-out 500ms;
}

/* Hide scrollbar for Chrome, Safari and Opera */
/* body::-webkit-scrollbar {
   display: none;
} */

/* Hide scrollbar for IE, Edge and Firefox */
/* body {
   -ms-overflow-style: none;
   scrollbar-width: none;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0px;
   font-weight: normal;
}

p {
   margin: 0px;
}

ul {
   margin: 0px;
   padding: 0px;
   list-style-type: none;
}

a,
a:visited {
   color: var(--color-black);
   text-decoration: none;
}

#main {
   position: relative;
   width: 100%;
}

input.toggle {
   display: none;
}

/* @media (min-width: 640px) {} */

@media (min-width: 992px) {
   body {
      font-size: 15px;
   }
}

/* @media (min-width: 1280px) {} */