@charset "UTF-8";
/*
 * How to compile scss
 *
 * Using local installation
 * ------------------------
 * 1. Compile once:
 * npx sass scss/main.scss css/main.css
 * 
 * 2. Watch for changes:
 * npx sass --watch scss/main.scss:css/main.css
 * 
 * Using global installation
 * -------------------------
 * 1. Compile once:
 * sass scss/main.scss css/main.css
 * 
 * 2. Watch for changes:
 * sass --watch scss/main.scss:css/main.css
 * 
 */
/* Global reset styles */
hr, button, a {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

/* _global.scss */
:root[data-theme=light] {
  --std-bg: #ffffff;
  --std-fg: #ffffff;
  --std-txt: #0f0f0f;
  --std-txt-hvr: #808080;
  --std-accent: #006aff;
  --std-brand: #80fbd2;
  --std-black: #000000;
  --std-white: #ffffff;
  --std-select: #c7eeff;
  --art-wrap: #ffffff;
  --card-fg: #faf2eb;
  --card-border: #f4e5d7;
  --card-underline: #e3b17f;
  --hc-fg: #faf2eb;
  --hc-border: #f4e5d7;
  --hc-underline: #e3b17f;
  --stdc-fg: #faf2eb;
  --stdc-border: #f4e5d7;
  --stdc-underline: #e3b17f;
  --lst-bg: #ffffff;
  --lst-main: #80fbd2;
  --lst-border: #e8e9ed;
  --lst-hover: #f0f0f2;
  --tb-bg: #ffffff;
  --tb-shadow: rgba(0, 0, 0, 0.1);
  --tb-btn-hvr: #f0f0f0;
  --tb-btn-active: #d2d2d2;
  --specs-primary: #f6f6f6;
  --specs-secondary: #ffffff;
  --ftr-bg: #000000;
  --news-input-color:
  --news-input-border:
  --news-input-hover:
  --news-input-focus:
  --news-button-color:
  --news-button-border:
  --news-button-hover:
  --news-button-active:
  --smp-twitter: #000000;
  --smp-youtube: #ff0000;
  --smp-insta: #fe107c;
  --smp-tiktok: #38142a;
  --smp-facebook: #106bff;
  --gradient-blue: #62cff4, #2c67f2;
  --gradient-green: #00bf8f, #004769;
  --gradient-viewing: #53db97, #0695b6;
  --gradient-midnight: #004ff9, #000000;
  /* For more gradient colors visit https://colorkit.co/ */
}

:root[data-theme=dark] {
  --std-bg: #000000;
  --std-fg: #1f1f1f;
  --std-hvr: #2f2f2f;
  --std-border: #616161;
  --std-txt: #ffffff;
  --std-txt-hvr: #808080;
  --std-accent: #C880FB;
  --std-brand: #80fbd2;
  --std-black: #000000;
  --std-white: #ffffff;
  --art-wrap: #1f1f1f;
  --card-bg: #1f1f1f;
  --card-fg: #2f2f2f;
  --card-border: #616161;
  --card-underline: #C880FB;
  --lst-bg: #1f1f1f;
  --lst-main: #00bf8f;
  --lst-hover: #4f4e4e;
  --lst-border: #616161;
  --tb-bg: #1f1f1f;
  --tb-shadow: rgba(0, 0, 0, 0.1);
  --tb-btn-hvr: #2f2f2f;
  --tb-btn-active: #616161;
  --specs-primary: #1f1f1f;
  --specs-secondary: #2f2f2f;
  --ftr-bg: #1f1f1f;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 1rem;
  font-family: "Inter";
  font-weight: 500;
  color: var(--std-txt);
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

body {
  background-color: var(--std-bg);
}

body > * {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s ease-in-out forwards;
}

/*___Text Appearance___*/
h1 {
  font-weight: 600;
}

h3 {
  font-weight: 400;
}

h4 {
  font-weight: 400;
}

a {
  text-decoration: none;
  color: inherit;
}

::selection {
  background-color: #c7eeff;
}

/*___Reusable styles___*/
/*
.low-highlight:hover {
  background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #ffffff 50%);
}
*/
.colorpalette {
  --color-pale-sky-blue: #c7eeff;
  --color-powder-blue: #ebf8ff;
  --color-aquamarine: #81e6d9;
  --color-lavender-purple: #9f7aeA;
  --verge-purple: #450adf;
  --color-deep-pink: #B83280;
  --color-light-beige: #f8ecda;
  --color-forest-green: #398250;
  --color-wine-red: #702459;
  --color-melange: #e9e1db;
  --color-melange-light: #ece5e0;
  --color-melange2: #ebe1db;
  --text-blue: #63bae5;
  --link-blue: #2ebde7;
  --stanislaw-light-blue: #7fe8eb;
  --stanislaw-dark-blue: #549ad6;
  --stanislaw-horizon-blue: #4e74b4;
  --dark-blue: #0d1330;
  --stanislaw-dark-grey: #4c5a6d;
  --stanislaw-weed: #805a35;
  --beige-color1: #fcf0dd;
  --light-peach: #f4e5d7;
  --the-verge1: #80fbd2;
  --pale-yellow: #fffacd;
  --pale-grey: #f0f0f0;
  --pastel-blue: #e6f7ff;
  --cold-purple: #a0a5c9;
  --color-purple2: #bec1da;
  --pale-red: #b85956;
  --internet-peach: #d4797e;
  --pale-gold: #e3b17f;
  --color-rasperry: #e30b5d;
  --color-vermillion: #e34234;
  --muted-gold: #D4AF37;
  --light-grey: #E0E0E0;
  --soft-blue: #A4DDED;
  --charcoal-green: #333333;
  --blush-pink: #F7C5CC;
  --green-ish: #77a486;
  --name-: #B590F5;
  --name-: #D5A6F3;
  --name-: #C880FB;
  --name-: #a53f5f;
  --name-: #ff7f9f;
  --bright-red: #FB808A;
  --wine-red: #A53850;
}

/* _typography.scss */
@font-face {
  font-family: "Gugi";
  src: url("../webfonts/Gugi/Gugi-Regular.ttf") format("truetype");
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  font-display: swap;
  src: url("../webfonts/inter-v20-latin-regular.woff2");
}
/* DEPRECATED:  */
/* Color theme switcher */
.theme_switcher {
  appearance: none;
  background-color: var(--color-surface-variant);
  border: none;
  border-radius: 50%;
  height: 70%;
  padding: 0 10px;
}

.theme_switcher:hover {
  background-color: var(--color-powder-blue);
}

.theme_switcher:active {
  background-color: #c7eeff;
}

.theme_switcher svg:last-child {
  display: none;
}

:root[data-theme=dark] .theme_switcher svg:first-child {
  display: none;
}
:root[data-theme=dark] .theme_switcher svg:last-child {
  display: block;
}

/* Compactcard (cptc) */
/* Attempt of making compact card failed */
/* Decide if you need/want to make a compact card */
.cptc-card {
  border: 2px solid blue;
  font-family: Inter;
  font-size: 1.4rem;
  border-bottom: 2px solid #f4e5d7;
  height: auto;
  width: 700px;
  margin-bottom: auto;
  display: flex;
  flex-wrap: wrap;
  transition: all 0.1s ease-in-out;
}

.cptc-card:hover {
  background-color: #faf2eb;
  backdrop-filter: blur(5px);
}

.cptc-card > * {
  border-radius: 10px;
}

.cptc-link {
  display: flex;
  /* Set flex layout here */
  flex-wrap: wrap;
  /* Allows items to wrap onto new lines */
  text-decoration: none;
  /* Remove underline from the link */
  color: inherit;
  /* Inherit text color from parent */
  width: 100%;
  /* Ensure the link takes the full width */
  border: 2px solid black;
}

.cptc-link > * {
  margin-left: 8px;
}

.cptc-topic {
  border-bottom: 2px solid red;
  width: 100%;
  /* Forces .info to take the full width of .proto-card */
}

.cptc-main {
  border: 2px solid green;
  height: auto;
  flex: 2;
}

.cptc-category {
  font-size: 0.9rem;
  text-decoration: underline;
  margin-top: 15px;
  margin-bottom: 10px;
}

.cptc-title {
  font-size: 1.5rem;
  margin-bottom: 0px;
}

.cptc-title:hover {
  text-decoration: underline;
  text-decoration-color: #e3b17f;
}

.cptc-byline .cptc-date {
  margin-top: 0px;
  flex-wrap: nowrap;
}

.cptc-byline {
  font-size: 0.8rem;
  /*
  color: var(
      color-deep-pink
    );
  */
}

.cptc-date {
  font-family: Inter;
  font-size: 0.8rem;
  /*
  color: var(
      color-brand-primary
    );
  */
}

.cptc-image {
  border: 2px solid yellow;
  height: auto;
  width: 100px;
  flex: 1;
}

/* Responsive resizing */
@media (max-width: 1440px) {
  .cptc-card {
    width: 550px;
    height: 200px;
  }
  .cptc-image {
    height: auto;
  }
  .cptc-title {
    font-size: 1.2rem;
  }
}
@media (max-width: 768px) {
  .cptc-card {
    width: 410px;
  }
}
@media (max-width: 425px) {
  .cptc-card {
    width: 375px;
  }
  .cptc-card > * {
    font-size: 0.7rem;
  }
  .cptc-title {
    font-size: 0.9rem;
  }
}
@media (max-width: 375px) {
  .cptc-card {
    width: 320px;
  }
}
/* Listcard */
.lst-container {
  background-color: var(--card-bg);
  border-radius: 10px;
  margin-top: 10px;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.lst-container .lst-sidestripe {
  background-color: var(--lst-main);
  opacity: 0.9;
  height: 70%;
  width: 20px;
  position: absolute;
  top: 15%;
  left: -2%;
}

.lst-topic {
  letter-spacing: 4px;
  text-decoration: underline;
  text-decoration-color: var(--lst-main);
  margin-top: 10px;
  padding: 0 5px;
}

.lst-item {
  font-weight: 500;
  height: 100%;
  width: 85%;
  display: grid;
  place-items: center start;
  transition: all 0.3s ease-in-out;
}

.lst-item:not(:last-child) {
  border-bottom: 3px solid var(--lst-border);
}

.lst-item:hover {
  background-color: var(--lst-hover);
}

.lst-link {
  height: 100%;
  height: 100%;
  display: grid;
  place-items: center start;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 2560px) {
  .lst-container {
    height: 600px;
    width: 500px;
  }
  .lst-topic {
    font-size: 2rem;
  }
  .lst-item h3 {
    font-size: 1.2rem;
    font-weight: 500;
  }
}
@media (max-width: 1440px) {
  .lst-container {
    height: 600px;
    width: 500px;
  }
}
@media (max-width: 768px) {
  .lst-container {
    height: 500px;
    width: 390px;
  }
  .lst-item h3 {
    font-size: 0.9rem;
  }
}
@media (max-width: 425px) {
  .lst-container {
    height: 400px;
    width: 310px;
  }
  .lst-topic {
    font-size: 1.5rem;
  }
}
/* 
 * Topics for listcard
 * -------------------
 * Featured,
 * Trending,
 * Editors-Pick,
 * Random,
 * Top-Contributors,
 * Upcoming-Events,
 * Recent,
 * Newsletter
 * Signup,
 * Category-Spotlight, Social-Media-Feeds,
 * Books/Resource recommendation,
 * Quote of the day,
 * Polls & Surveys
 */
/* Standardcard (stdc) */
.stdc {
  font-family: Inter;
  background-color: var(--card-bg);
  border-bottom: 8px solid var(--card-border);
  height: auto;
  width: 700px;
  transition: all 0.1s ease-in-out;
  cursor: pointer;
  margin-top: 15px;
}

.stdc:hover {
  background-color: var(--card-fg);
  backdrop-filter: blur(5px);
}

.stdc-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.stdc-link:visited {
  color: inherit;
}

.stdc-link:hover .stdc-title {
  text-decoration: underline;
  text-decoration-color: var(--card-underline);
}

.stdc-img {
  margin-bottom: 0px;
  display: grid;
  place-items: center;
  margin-bottom: 0px;
}

.stdc-img img {
  height: 90%;
  width: 90%;
  object-fit: cover;
}

.stdc-txt {
  width: 75%;
  margin: 0 auto;
  margin-top: -3%;
  display: grid;
  place-items: flex-start;
}

.stdc-descr {
  font-size: 1.2rem;
  margin-top: 5px;
}

.stdc-author,
.stdc-updated {
  font-size: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, var(--std-accent) 50%);
  background-size: 100% 200%;
  background-position: top;
  border-radius: 5px;
  padding: 2px 0px;
  margin-top: 10px;
  margin-bottom: 20px;
  align-content: flex-start;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

.stdc-author:hover,
.stdc-updated:hover {
  background-position: bottom;
  color: white;
}

@media (max-width: 2560px) {
  .stdc {
    width: 550px;
  }
  .stdc img {
    aspect-ratio: 16/10;
  }
}
@media (max-width: 1440px) {
  .stdc {
    width: 550px;
  }
  .stdc-img {
    display: grid;
    place-items: center;
  }
  .stdc-img img {
    height: 90%;
    width: 90%;
    object-fit: cover;
    aspect-ratio: 16/10;
  }
}
@media (max-width: 768px) {
  .stdc-title {
    font-size: 1.7rem;
  }
  .stdc {
    background-color: var(--card-fg);
    border-radius: 10px;
    width: 390px;
    margin-bottom: 10px;
  }
  .stdc-img {
    display: grid;
    place-items: center;
  }
  .stdc-img img {
    height: 90%;
    width: 90%;
    object-fit: cover;
  }
  .stdc-txt {
    width: 80%;
  }
  .stdc-descr {
    display: none;
  }
  .stdc-author,
  .stdc-updated {
    background: none;
    background-color: none;
  }
}
@media (max-width: 425px) {
  .stdc {
    width: 375px;
  }
  .stdc-img {
    display: grid;
    place-items: center;
  }
  .stdc-img img {
    height: 90%;
    width: 90%;
    object-fit: cover;
  }
  .stdc-txt {
    font-size: 0.8rem;
  }
  .stdc-descr {
    font-size: 0.8rem;
  }
  .stdc-author,
  .stdc-updated {
    border-radius: 5px;
  }
}
@media (max-width: 375px) {
  .stdc {
    width: 320px;
  }
}
/* Herocard (hc) */
.hc_link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.hc_link:visited {
  color: inherit;
}

.hc-link:hover .hc-title {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-color: var(--card-underline);
}

.hc {
  background-color: var(--card-bg);
  border-top: 8px solid var(--card-border);
  border-bottom: 8px solid var(--card-border);
  padding: 20px;
  margin-bottom: 30px;
  transition: all 0.1s ease-in-out;
  cursor: pointer;
}

.hc:hover {
  background-color: var(--card-fg);
  backdrop-filter: blur(5px);
}

.hc-img {
  margin-bottom: 0px;
  display: grid;
  place-items: center;
  margin-bottom: 0px;
}

.hc-img img {
  border-radius: 5px;
  height: 90%;
  width: 90%;
  object-fit: cover;
}

.hc-txt {
  width: 70%;
  margin: 0 auto;
  display: grid;
  place-items: flex-start;
}

.hc-txt > * {
  text-align: left;
}

.hc-descr {
  margin-top: 5px;
}

.hc-author {
  margin-top: 10px;
}

.hc-author,
.hc-updated {
  font-size: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, var(--std-accent) 50%);
  background-size: 100% 200%;
  background-position: top;
  border-radius: 5px;
  padding: 2px 0px;
  margin-top: 10px;
  margin-bottom: 20px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

.hc-author:hover,
.hc-updated:hover {
  background-position: bottom;
  color: white;
}

@media (max-width: 2560px) {
  .hc {
    width: 750px;
  }
}
@media (max-width: 1440px) {
  .hc {
    width: 750px;
  }
  .hc-img {
    display: grid;
    place-items: center;
  }
  .hc-img img {
    height: 95%;
    width: 90%;
    object-fit: cover;
    aspect-ratio: 16/10;
  }
  .hc-txt {
    font-size: 1.3rem;
  }
  .hc-descr {
    font-size: 1.2rem;
  }
}
@media (max-width: 768px) {
  .hc_link {
    margin-top: 10vh;
    padding-right: 10px;
    padding-left: 10px;
  }
  .hc {
    background-color: var(--card-fg);
    height: auto;
    width: auto;
  }
  .hc-img {
    display: grid;
    place-items: center;
  }
  .hc-img img {
    height: 99%;
    width: 99%;
    object-fit: cover;
  }
  .hc-title {
    font-size: 2rem;
  }
  .hc-descr {
    display: none;
  }
}
@media (max-width: 430px) {
  .hc-img img {
    height: 99%;
    width: 99%;
  }
  .hc-txt {
    width: 90%;
    margin: 0 auto;
    display: grid;
    place-items: flex-start;
  }
  .hc-title {
    font-size: 1.8rem;
  }
  .hc-author,
  .hc-updated {
    font-size: 0.9rem;
  }
}
@media (max-width: 375px) {
  .hc-title {
    font-size: 1.5rem;
  }
}
@media (max-width: 320px) {
  .hc-title {
    font-size: 1.8rem;
  }
}
/* Social-Media-Links (smp) */
.cont-btn-smp {
  gap: 5px;
  display: flex;
}

.btn-smp {
  background-color: var(--std-fg);
  padding: 1em;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  fill: var(--std-txt);
  height: 64px;
  width: 64px;
  margin-top: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.btn-smp:hover {
  background-color: var(--accent-color);
  fill: var(--std-white);
}

.btn-smp svg {
  height: 32px;
  width: 32px;
}

@media (max-width: 768px) {
  .btn-smp {
    height: 38px;
    width: 38px;
    display: grid;
    box-sizing: initial;
    align-content: center;
    justify-content: center;
  }
}
@media (max-width: 430px) {
  .btn-smp {
    height: 24px;
    width: 24px;
    display: grid;
    box-sizing: initial;
    align-content: center;
    justify-content: center;
  }
  .btn-smp svg {
    height: 22px;
    width: 22px;
  }
}
/*___Herosection (hs)___*/
.hs {
  height: auto;
  width: 1000px;
  margin-top: 50px;
  padding-right: 10px;
  padding-left: 10px;
}

.hs-cat > * {
  font-weight: 500;
  color: #006aff;
  border-radius: 5px;
}

.hs-cat-link:hover {
  color: #808080;
}

.hs-title {
  max-width: 50ch;
  margin-top: 10px;
}

.hs-descr {
  margin-top: 10px;
}

@media (max-width: 2560px) {
  .hs-cat {
    font-size: 1.5rem;
  }
  .hs-title {
    font-size: 2.5rem;
  }
  .hs-descr {
    font-size: 1.8rem;
  }
}
@media (max-width: 1440px) {
  .hs-cat {
    font-size: 1.5rem;
  }
  .hs-title {
    font-size: 2.3rem;
  }
  .hs-descr {
    font-size: 1.7rem;
  }
}
@media (max-width: 1024px) {
  .hs-title {
    font-size: 2rem;
  }
}
@media (max-width: 430px) {
  .hs-cat {
    font-size: 1.2rem;
  }
  .hs-title {
    font-size: 1.5rem;
  }
  .hs-descr {
    font-size: 1.3rem;
  }
}
@media (max-width: 2560px) {
  .hs-nd {
    height: auto;
    width: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
  }
  .hs-cont-img {
    display: inline-block;
    height: 630px;
    width: 1000px;
  }
  .hs-img {
    border-radius: 5px;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .hs-img-src {
    color: grey;
    font-style: italic;
  }
}
@media (max-width: 1440px) {
  .hs-nd {
    height: auto;
    width: auto;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  .hs-cont-img {
    display: inline-block;
    height: 630px;
    width: 1000px;
  }
  .hs-img {
    border-radius: 5px;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .hs-img-src {
    color: grey;
    font-style: italic;
  }
}
@media (max-width: 1024px) {
  .hs {
    height: auto;
    width: auto;
  }
  .hs-cont-img {
    aspect-ratio: 16/10;
    height: auto;
    width: auto;
    padding-right: 10px;
    padding-left: 10px;
  }
  .hs-img {
    border-radius: 5px;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/*___Table-of-Contents___*/
/*
 * Goal is to make a smoothly animated sticky but non-intrusive ToC.
 * But for the beginning you can make something temporary easier.
 */
.toc {
  margin-top: 10px;
  margin-right: 20px;
  margin-left: 20px;
  list-style-type: decimal-leading-zero;
}

.toc-bullet {
  line-height: 1.75;
  text-decoration: 2px underline var(--std-accent);
  margin-left: 20px;
  margin-right: 20px;
}

/* _specification.scss */
.specs-head {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--std-accent);
  margin-top: 25px;
  margin-bottom: 0;
  cursor: pointer;
}

.specs-container {
  width: 100%;
  margin-top: 25px;
  overflow: hidden;
  box-sizing: border-box;
}

.specs-table {
  font-size: 1.1rem;
  border-collapse: collapse;
  width: 100%;
}

.specs-row:nth-child(even) {
  background-color: var(--specs-primary);
}

.specs-row:nth-child(odd) {
  background-color: var(--specs-secondary);
}

.specs-spec {
  font-weight: bold;
}

.specs-spec, .specs-value {
  padding: 8px;
  border: none;
}

.specs-newline {
  display: block;
}

/* _topbar.scss (tb) */
nav {
  position: sticky;
  top: 0;
  z-index: 999;
  max-width: 100vw;
}

.tb {
  color: var(--std-txt);
  background-color: var(--lst-bg);
  box-shadow: 0 4px 6px -1px var(--tb-shadow);
  height: 50px;
  width: 100vw;
  top: 0;
  margin-bottom: 100px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.tb svg {
  fill: var(--std-txt);
}

.tb-home {
  font-family: "Gugi";
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 200;
}

.tb-home:hover {
  color: #808080;
}

.tb-pipe {
  color: black;
  border-right: 1px solid black;
  height: 23px;
  display: inline-block;
}

.tb-menu, .tb-theme {
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 10px;
  pointer-events: auto;
}

.tb-menu:hover, .tb-theme:hover {
  background-color: var(--tb-btn-hvr);
}

/* Not functional */
.tb-menu {
  display: none;
}

.tb-theme:active {
  background-color: var(--tb-btn-hvr);
}

.tb-theme svg:last-child {
  display: none;
}

:root[data-theme=dark] .tb-theme svg:first-child {
  display: none;
}
:root[data-theme=dark] .tb-theme svg:last-child {
  display: block;
}

/* From Uiverse.io by vinodjangid07 */
.Btn {
  font-size: 1rem;
  width: 230px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(15, 15, 15);
  border: none;
  color: white;
  font-weight: 600;
  gap: 8px;
  cursor: pointer;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.103);
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  margin-top: 30px;
}

.Btn::before {
  width: 230px;
  height: 130px;
  position: absolute;
  content: "";
  background-color: white;
  border-radius: 50%;
  left: -100%;
  top: 0;
  transition-duration: 0.3s;
  mix-blend-mode: difference;
}

.Btn:hover::before {
  transition-duration: 0.3s;
  transform: translate(100%, -50%);
  border-radius: 0;
}

.Btn:active {
  transform: translate(5px, 5px);
  transition-duration: 0.3s;
}

.newsletter {
  background-color: var(--std-fg);
  box-shadow: 0 0 20px 5px var(--tb-shadow);
  height: 250px;
  width: 90%;
  max-width: 1000px;
  margin: 10vh auto 0 auto;
  padding: 3rem 2rem;
  box-sizing: border-box;
}

.newsletter h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--std-txt);
}

/* From Uiverse.io by alexruix (edited) */
.input-group {
  display: flex;
  align-items: center;
  margin-top: 50px;
}

.input {
  background-color: var(--std-hvr);
  box-shadow: 0 0 20px 5px var(--tb-shadow);
  min-height: 50px;
  min-width: 100px;
  width: 500px;
  padding: 0 1rem;
  color: var(--std-txt);
  font-size: 15px;
  border: none;
  border-radius: 6px 0 0 6px;
}

.input:hover {
  background-color: var(--std-border);
}

.input:focus {
  background-color: var(--std-hvr);
  outline: none;
}

.button--submit {
  box-shadow: 0 0 20px 5px var(--tb-shadow);
  min-height: 50px;
  padding: 0.5em 1em;
  border: none;
  border-radius: 0 6px 6px 0;
  background-color: var(--std-border);
  color: var(--std-txt);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}

.button--submit:hover {
  background-color: var(--std-border);
}

.button--submit:active {
  background-color: var(--std-accent);
}

@media (max-width: 320px) {
  .newsletter h1 {
    font-size: 1.3rem;
  }
}
.carousel {
  margin: 0 auto;
  margin-top: 10vh;
  padding: 20px 0;
  max-width: 98vw;
  overflow: hidden;
  display: flex;
}
.carousel > * {
  flex: 0 0 100%;
}
.carousel:hover .group {
  animation-play-state: paused;
}

/* Group the cards for better structure. */
.group {
  display: flex;
  gap: 0px;
  /* Add padding to the right to create a gap between the last and first card. */
  will-change: transform; /* We should be nice to the browser - let it know what we're going to animate. */
  animation: scrolling 10s linear infinite;
}

@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* Temp */
.card svg {
  display: block; /* Removes extra whitespace below SVG */
  min-width: 200px;
  max-width: 400px;
  min-height: 150px;
  max-height: 200px;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--std-txt);
  padding: 20px;
  font-size: xx-large;
  min-height: 100px;
  fill: var(--std-txt);
}
.card:nth-child(1) {
  background: transparent;
}
.card:nth-child(2) {
  background: transparent;
}
.card:nth-child(3) {
  background: transparent;
}

@media (max-width: 768px) {
  .card svg {
    width: 80%;
    height: 90%;
  }
}
@media (max-width: 320px) {
  .card svg {
    width: 80%;
    height: 90%;
  }
}
.ftr {
  color: white;
  background-color: var(--ftr-bg);
  height: auto;
  width: 100%;
  margin-top: 50px;
  position: relative;
  bottom: 0;
}

.ftr-header {
  font-family: Inter;
  font-weight: 300;
  font-size: 4rem;
  padding: 20px;
}

.ftr-primary-links {
  font-size: 1.2rem;
  padding: 20px;
}

.ftr-primary-links > *,
.ftr-secondary-links > * {
  padding: 5px;
  display: inline-block;
}

.ftr-primary-links > *:hover,
.ftr-secondary-links > *:hover {
  text-decoration: underline;
}

.ftr-secondary-links {
  color: #E0E0E0;
  padding: 20px;
  margin-top: 10px;
}

/* General layout */
.std-body {
  display: grid;
}

.std-header {
  height: auto;
  width: auto;
  display: grid;
  place-content: center;
}

.std-main {
  border-radius: 10px;
  height: auto;
  width: auto;
  margin-bottom: 50px;
  display: grid;
  place-items: start center;
  grid-template-columns: repeat(auto-fit, minmax(720px, 1fr));
}

.std-section {
  margin: 20px 0px 5px 0px;
  display: grid;
  place-items: center;
  grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
}

/* Responsive resizing */
@media (max-width: 1440px) {
  .std-main {
    height: auto;
    width: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  }
}
@media (max-width: 600px) {
  .std-main {
    height: auto;
    width: auto;
    border-radius: 10px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}
/* Article layout */
.art-header {
  height: auto;
  width: auto;
  display: grid;
  place-items: center;
}

.art-main {
  display: grid;
  place-items: center;
  margin-top: 50px;
}

.art-wrap-main {
  text-align: left;
  background-color: var(--art-wrap);
  box-shadow: 0 4px 6px -1px var(--tb-shadow);
  max-width: 700px;
  width: 100vw;
  justify-items: start;
  place-items: start;
  overflow-wrap: break-word; /* Bricht lange Wörter um */
  word-break: break-word; /* Zusätzlicher Support */
}

.art-wrap-main > * {
  padding-right: 10px;
  padding-left: 10px;
}

/* New File */
.art-img {
  aspect-ratio: 16/10;
  height: auto;
  width: auto;
  padding-right: 10px;
  padding-left: 10px;
  margin-top: 10px;
}

.art-img > * {
  border-radius: 5px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.art-ftc {
  font-size: 1.3rem;
  font-weight: 400;
  text-align: center;
  line-height: 1.75;
  background: linear-gradient(to right, #62cff4, #2c67f2);
  color: white;
  width: 100%;
  box-sizing: border-box;
}

.art-h2 {
  font-weight: 600;
  margin-top: 50px;
}

.art-h3 {
  font-weight: 600;
  max-width: 50ch;
  margin-top: 25px;
  transition: color 0.2s ease-in-out, text-shadow 0.2s ease-in-out;
}

.art-h3:hover {
  color: var(--std-accent);
  transition: color 0.2s ease-in-out, text-shadow 0.2s ease-in-out;
  cursor: pointer;
}

.art-h4 {
  font-weight: bold;
  color: var(--std-accent);
  margin-top: 10px;
}

.art-text {
  font-weight: 400;
  line-height: 1.75;
  max-width: 700px;
  margin-top: 25px;
}

.art-link {
  font-size: 1.3rem;
  color: var(--std-accent);
}

.art-link:hover {
  cursor: pointer;
  text-decoration: underline;
}

.art-list {
  font-weight: 400;
  list-style-type: square;
  margin-left: 60px;
  margin-bottom: 20px;
}

.art-list li {
  margin-top: 20px;
}

/* Responsive Resizing */
@media (max-width: 2560px) {
  .art-ftc {
    font-size: 1rem;
  }
  .art-h2 {
    font-size: 2rem;
  }
  .art-h3 {
    font-size: 1.7rem;
  }
  .art-h4 {
    font-size: 1.3rem;
  }
  .art-text {
    font-size: 1.3rem;
  }
  .art-list {
    font-size: 1.3rem;
  }
}
@media (max-width: 1440px) {
  .art-ftc {
    font-size: 1rem;
  }
  .art-h2 {
    font-size: 2rem;
  }
  .art-h3 {
    font-size: 1.8rem;
  }
  .art-h4 {
    font-size: 1.3rem;
  }
  .art-text {
    font-size: 1.3rem;
  }
  .art-list {
    font-size: 1.3rem;
  }
}
@media (max-width: 768px) {
  .art-h2 {
    font-size: 1.8rem;
  }
  .art-h3 {
    font-size: 1.5rem;
  }
}
.gradient-header {
  font-size: 2.5rem;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(to right, #fc72ff, #8f68ff, #487bff, #8f68ff, #fc72ff);
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradient 2.5s linear infinite;
  margin-bottom: 20px;
}

@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}

/*# sourceMappingURL=main.css.map */