/*
  ***********
  ** Reset **
  ***********
*/
* {
  margin: 0px;
  padding: 0px;
  outline: none;
  list-style: none;
  text-decoration: none;
  text-underline-offset: 5.00px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  scroll-behavior: smooth;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  
  user-select: none;
  -moz-user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

/*
  ***********
  ** Fonts **
  ***********

  - downloads fonts in woff2 format in: https://gwfh.mranftl.com/fonts
*/

/* ---- Roboto ---- */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/roboto-v51-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/roboto-v51-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/roboto-v51-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Roboto Mono ---- */
@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/roboto-mono/roboto-mono-v31-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/roboto-mono/roboto-mono-v31-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/roboto-mono/roboto-mono-v31-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
  ***************
  ** Variables **
  ***************
*/
:root {
  --color-primary: #111827;
  --color-secondary: #f6f6ff;
  --color-tertiary: #0f766e;
  --color-quarternary: #25d366;
  --color-quinary: #34b7f1;

  --shadow-color-primary: rgba(0.00, 0.00, 0.00, 0.30);
  --shadow-color-secondary: rgba(0.00, 0.00, 0.00, 0.50);

  --font-primary: 'Roboto';
  --font-secondary: 'Roboto Mono';
  --font-tertiary: sans-serif;
}

/*
  ******************************
  ** Styles: General Elements **
  ******************************
*/
body {
  background-color: var(--color-primary);
  color: var(--color-secondary);
  font: 400 18px var(--font-primary), var(--font-secondary), var(--font-tertiary);

  width: 100.00vw;
  height: 100.00vh;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

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

sup {
  vertical-align: super;
}

#root {
  width: 100.00%;
  height: 100.00%;
}

/*
  *****************************
  ** Styles: General Classes **
  *****************************
*/

/* ---- Main ---- */
.containerMain {
  width: 100.00%;
  height: 100.00%;
  overflow-y: auto;

  padding: 1.50em 1.50em 1.50em 1.50em;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.00em;
}

/* ---- Alert ---- */
.containerAlert {
  width: 75.00%;
  height: auto;
}

/* ---- Title ---- */
.containerTitle {
  width: 100.00%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.00em;
}

/* ---- Content ---- */
.containerContent {
  width: 100.00%;
  text-indent: 1.00em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.00em;
}

.containerContentFigure {
  width: 100.00%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.00em;
}

.containerContentFigure > img {
  border-radius: 7.00px;
  border: 7.00px solid var(--color-tertiary);
  
  width: 50.00%;
  height: auto;
}

.containerContentList {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.50em;
  padding-left: 3.00em;
}

.containerContentList > li {
  text-indent: 0.00em;
  list-style: disc;
}

/* ---- Miscellaneous ---- */
.boldText {
  font-weight: bold;
}

.anchor {
  color: var(--color-quinary);
  cursor: pointer;
  transition: all 0.30s ease;
}

.anchor:hover {
  text-decoration: underline;
}

.hr {
  width: 100.00%;
  border-color: var(--color-tertiary);
}


/*
  ***************
  ** Scrollbar **
  ***************
*/
::-webkit-scrollbar {
  width: 7.00px;
}

::-webkit-scrollbar-track {
  background-color: var(--color-tertiary);
  border-radius: 10.00px;
  -webkit-border-radius: 10.00px;
  -webkit-box-shadow: inset 0.00px 0.00px 6.00px var(--shadow-color-primary);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-quarternary);
  border-radius: 10.00px;
  -webkit-border-radius: 10.00px;
  -webkit-box-shadow: inset 0.00px 0.00px 6.00px var(--shadow-color-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-quarternary);
  cursor: grab;
}

/*
  ***************
  ** Keyframes **
  ***************
*/
@keyframes slide-out {
  to {
    transform: translateX(-100.00%);
  }
}

@keyframes slide-in {
  from {
    transform: translateX(100.00%);
  }
}

/*
  *********************
  ** View Transition **
  *********************
*/
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(main) {
    animation-duration: 0.75s;
  }

  ::view-transition-old(main) {
    animation-name: slide-out;
  }

  ::view-transition-new(main) {
    animation-name: slide-in;
  }
}

/*
  ************
  ** Mobile **
  ************
*/
@media only screen and (max-width: 600.00px) {
  ::-webkit-scrollbar {
    width: 0.00px;
  }

  .containerFigure > img {
    width: 100.00%;
  }
}