:root {
  font-family: InterD, Inter, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --headerHeight: 90px;
  --drawerSeparation: 6px; 
  --drawerLineHeight: 5px;
}

html {
  scroll-behavior: smooth;
}

body {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-grow: 1;
}

.header {
  backdrop-filter: blur(10px);
  margin: auto;
  justify-self: center;
  width: 100%;
  height: var(--headerHeight);
  align-items: center;
  position: fixed;
  display: flex;
  padding: 20px 50px 10px;
  box-sizing: border-box;
  justify-content: space-between;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  z-index: 200;
}

.header h1 {
  font-size: 25px;
}

.header a {
  height: 100%;
  color: currentColor;
  display: flex;
  align-items: center;
  gap: 15px;
}

.header .wrapper {
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.header .wrapper img {
  aspect-ratio: 1 / 1;
  height: 100%;
}

.header .icons {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90%;
  gap: 10px;
}

.header .icons > a,
.header .icons div,
.header .icons span {
  width: 35px;
  height: 35px;
  background-color: white;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.header .icons div.worldIcon {
  display: flex;
  background-color: transparent;
}

.header .icons .worldIcon {
  cursor: pointer;
  position: relative;
}

.header .icons .worldIcon span {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='none'/%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m.6-3h16.8M3.6 15h16.8'/%3E%3Cpath d='M11.5 3a17 17 0 0 0 0 18m1-18a17 17 0 0 1 0 18'/%3E%3C/g%3E%3C/svg%3E");
}

.header .icons .worldIcon img {
  width: 100%;
  height: 100%;
}

.header .icons .worldIcon .content {
  position: absolute;
  background-color: #000000;
  width: fit-content;
  top: 40px;
  right: 0px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  display: none;
  flex-direction: column;
  gap: 10px;
  height: fit-content;
}

.header .icons .worldIcon .content a:hover {
  color: rgb(255, 28, 28);
  transition: 0.2s;
}

.header .icons .docsIcon {
  mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3crect%20width='24'%20height='24'%20fill='none'/%3e%3cpath%20fill='currentColor'%20d='M12.088%204.82a10%2010%200%200%201%209.412.314a1%201%200%200%201%20.493.748L22%206v13a1%201%200%200%201-1.5.866a8%208%200%200%200-8%200a1%201%200%200%201-1%200a8%208%200%200%200-7.733-.148l-.327.18l-.103.044l-.049.016l-.11.026l-.061.01L3%2020h-.042l-.11-.012l-.077-.014l-.108-.032l-.126-.056l-.095-.056l-.089-.067l-.06-.056l-.073-.082l-.064-.089l-.022-.036l-.032-.06l-.044-.103l-.016-.049l-.026-.11l-.01-.061l-.004-.049L2%2019V6a1%201%200%200%201%20.5-.866a10%2010%200%200%201%209.412-.314l.088.044z'/%3e%3c/svg%3e");
}

.header .icons .downloadsIcon {
  mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23e3e3e3'%3e%3cpath%20d='M480-320%20280-520l56-58%20104%20104v-326h80v326l104-104%2056%2058-200%20200ZM240-160q-33%200-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0%2033-23.5%2056.5T720-160H240Z'/%3e%3c/svg%3e");
}

.drawerIcon {
  left: 0;
  width: 35px;
  height: 30px;
  position: relative;
  display: none;
  align-items: center;
  cursor: pointer;
}

.drawerIcon .line {
  width: 100%;
  height: var(--drawerLineHeight);
  top: 0;
  background-color: white;
  border-radius: 5px;
}

.drawerIcon::after {
  position: absolute;
  content: '';
  width: 100%;
  height: var(--drawerLineHeight);
  top: 0;
  background-color: white;
  border-radius: 5px;
}

.drawerIcon::before {
  position: absolute;
  bottom: 0;
  content: '';
  width: 100%;
  height: var(--drawerLineHeight);
  background-color: white;
  border-radius: 5px;
}

.header.style2 {
  background-color: #242424;
  margin: 0;
  width: 100%;
}

footer {
  background-color: #000000;
  width: 100%;
  height: 200px;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 50px;
}

footer a,
footer a:hover {
  color: currentColor;
}

footer div.copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
  gap: 15px;
}

footer div.copyright img {
  width: 34px;
  height: 34px;
}

footer div.copyright strong {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  height: 60px;
  color: currentColor;
}

footer .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}

nav{
  display: flex;
  gap: 25px;
}

main.copyright {
  box-sizing: border-box;
  flex: 1;
  overflow: auto;
  padding: 50px;
}

main.copyright .data {
  margin-bottom: 20px;
}

main.copyright .data p {
  display: flex;
  gap: 10px;
  margin: 5px 0;
}

main.copyright section {
  border: solid currentColor 2px;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px;
  min-width: 25%;
  width: fit-content;
  margin-top: 40px;
}

main.copyright h2 {
  margin-top: 50px;
}

main.copyright h3 {
  text-decoration: underline;
}

a {
  text-decoration: none;
}
main.legal{
  margin-top: 0;
  display: block;
}
main.legal section{
  margin-top: 35px;
  display: block;
}
@font-face {
  font-family: 'InterD';
  src: url('../assets/Inter/Inter24pt-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'InterD';
  src: url('../assets/Inter/Inter24pt-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'InterD';
  src: url('../assets/Inter/Inter24pt-BoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'InterD';
  src: url('../assets/Inter/Inter24pt-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'InterD';
  src: url('../assets/Inter/Inter24pt-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'InterD';
  src: url('../assets/Inter/Inter24pt-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}