* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

:root {
   --white-color: #fff;
   --blue-color: #eff2f6;
   --grey-color: #707070;
   --grey-color-light: #aaa;

   --blue-color-hover: #e3e6ed;

   --link-hover: #333;
   --text-color: #141824;

   --border: #cbd0dd;
   --border-hover: #333;

   --sidebar: #fff;
   --navbar: #fff;

   --navbar-blur: rgba(255, 255, 255, 0.5);

   --button: #f5f7fa;
   --button-hover: #cbd0dd;

   --scrollbar: #fff;
   --scrollbar-thumb: rgb(170, 175, 186);
   --scrollbar-thumb-hover: #d3d6de;

   --body: #f5f7fa;
   --toast: #777;
   --toast-color: #e3e6ed;
   --sidebar-blur: rgba(255, 255, 255, 0.5);
}

body.dark {
   --white-color: #333;
   --blue-color: #31374a;
   --grey-color: #f2f2f2;
   --grey-color-light: #aaa;

   --blue-color-hover: rgb(65, 73, 99);

   --link-hover: white;
   --text-color: #e3e6ed;

   --border: #31374a;
   --border-hover: #777;

   --sidebar: #141824;
   --navbar: #141824;

   --navbar-blur: rgba(20, 24, 36, 0.5);

   --button: #0f111a;
   --button-hover: #141824;

   --scrollbar: #141824;
   --scrollbar-thumb: #31374a;
   --scrollbar-thumb-hover: rgb(65, 73, 99);

   --toast: #31374a;
   --toast-color: #e3e6ed;
   --sidebar-blur: rgba(20, 24, 36, 0.5);
}

body {
   font-family: "Poppins", sans-serif;
   background-color: var(--body);
}

.hidden,
.hd {
   display: none !important;
}

main {
   padding: 20px;
   width: 60%;
   margin: 0 auto;
   margin-top: 100px;
}

h1 {
   font-size: 2.5rem;
   margin-bottom: 20px;
}

p {
   font-size: 1.2rem;
   margin-bottom: 20px;
}

a {
   color: var(--text-color);
}

a:hover {
   color: var(--border-hover);
}

.item {
   margin-bottom: 7px;
}

::selection {
   background-color: #6dafd4;
   color: var(--text-color);
}