:root {
  --fs-300: 0.9rem;
  --fs-400: 1rem;
  --fs-500: 1.1rem;
  --fs-600: 1.2rem;
  --fs-700: 1.3rem;
  --fs-800: 2rem;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  text-align: left;
  background: linear-gradient(var(--gray-gradient)) no-repeat;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: rgb(var(--gray-dark));
  line-height: 1.6;
}

html {
  scroll-behavior: smooth;
}

/* CSS property. This property is specific to WebKit browsers, like Safari and Chrome on iOS and Android.
  This will make the tap highlight transparent, effectively hiding it. 
a,
.router-link-active {
  -webkit-tap-highlight-color: transparent;
}

:focus {
  outline: none !important;
}
*/

.no-bullet {
  list-style-type: none;
}

/* BELOW this comment adjusts the default scrollbar on the right */
/* Set the width of the scrollbar */
::-webkit-scrollbar {
  width: 0.75em;
  background-color: #fff;
  margin-right: 5px;
  height: 1.5em;
}

/* Set the color of the scrollbar track */
::-webkit-scrollbar-track {
  background-color: #ffffff;
  width: 0.5em;
  margin-right: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgb(172, 172, 172);
  border-right: 0.25em white solid;
  border-top: 0.25em white solid;
  border-bottom: 0.25em white solid;
  background-clip: padding-box;
  border-radius: 0.5em;
}

/* Set the color of the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #888888;
}



.main-red-color {
  color: #ff5959;
}

/* make words and long links break to the next line */
.break-text {
  word-break: break-word;
}

/* basic css tooltip */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip:before {
  content: "";
  visibility: hidden;
  position: absolute;
  height: 0px;
  width: 0px;
  top: 2.33em;
  left: 1.2em;
  /* 1px buffer for zooming problems while rendering*/
  border-width: 0.66em;
  border-color: transparent #42b883 transparent transparent;
  border-style: solid;
  transform: rotate(90deg);
}

.tooltip .tooltiptext {
  text-align: left;
  visibility: hidden;
  width: 200px;
  background-color: #42b883;
  color: #fff;
  border-radius: 6px;
  padding: 0.5em;
  font-size: 0.6em;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 5.9em;
  left: -4%;
}

.tooltip:hover:before {
  visibility: visible;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* Reset default margin and padding */
* {
  margin: 0;
  padding: 0;

}

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

img,
picture,
svg,
video {
  max-width: 100%;
  display: block;

}

p {
  max-width: 75ch;
  text-wrap: pretty;
}

/* buttons and stuff */
h1 {
  line-height: 1.5;
}

.center-with-flex {
  display: flex;
  justify-content: center;
}

.top-most-paragraph-space {
  padding-top: 1em;
}

.paragraph-text {
  line-height: 1.65em;
  font-size: 1em;
  text-align: left;
  word-break: break-word;
  overflow-wrap: break-word;
  font-weight: 400;
  margin-bottom: 1em;
}

.white-color-text {
  color: #ffffff;
}

.dark-color-text {
  color: #303030;
}


/* CSS */
.button-35 {
  align-items: center;
  background-color: #515151;
  border-radius: 12px;
  box-sizing: border-box;
  color: #d2d2d2;
  display: inline-flex;
  flex: 1 1 auto;
  font-family: Inter, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  /* margin: 0; */
  cursor: pointer;
  /* --- */
  outline: none;
  padding: 1rem 1.2rem;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .2s, -webkit-box-shadow .2s;
  white-space: nowrap;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-35:hover {
  box-shadow: rgb(0, 227, 227) 0 0 0 2px, transparent 0 0 0 0;
}

.box {
  padding: 80px 0;
  width: 300px;
  text-align: center;
  background: #808080;
  margin: 20px;
  display: inline-block;
}

.no-underlines {
  text-decoration: none;
}

/* links styling WITH underline on hover */
.text-links:link {
  text-decoration: none;
  cursor: pointer;
  color: rgb(11, 87, 208);
}

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

.text-links:visited {
  color: rgb(11, 87, 208);
}

.text-links:active {
  color: rgb(11, 87, 208);
}

/* links styling NO underline on hover */
.text-links-no-underline:link {
  text-decoration: none;
  color: rgb(168, 55, 247);
}

.text-links-no-underline:hover {
  text-decoration: none;
}

.text-links-no-underline:visited {
  color: rgb(168, 55, 247);
}

.text-links-no-underline:active {
  color: rgb(168, 55, 247);
}

.links-black:link {
  text-decoration: none;
  color: rgb(18, 18, 18);
}

.links-black:hover {
  text-decoration: underline;
}

.links-black:visited {
  color: rgb(18, 18, 18);
}

.links-black:active {
  color: rgb(18, 18, 18);
}


/* make elements unselectable */
.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* buttons */

/* CSS  apparently this is based on GitHub buttons */
.clean-button {
  appearance: none;
  background-color: #ebebeb;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 8px;
  box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
  box-sizing: border-box;
  color: #24292E;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 20px;
  list-style: none;
  padding: 0.5em 1.1em;
  position: relative;
  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: break-word;
}

.clean-button:hover {
  background-color: #F3F4F6;
  text-decoration: none;
  transition-duration: 0.1s;
}

.clean-button:disabled {
  background-color: #FAFBFC;
  border-color: rgba(27, 31, 35, 0.15);
  color: #959DA5;
  cursor: default;
}

.clean-button:active {
  background-color: #EDEFF2;
  box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
  transition: none 0s;
}

.clean-button:focus {
  outline: 1px transparent;
}

.clean-button:before {
  display: none;
}

.clean-button:-webkit-details-marker {
  display: none;
}




@media only screen and (max-width: 70rem) {
  .paragraph-text {
    max-width: 100%;
    margin-left: 2em;
    margin-right: 2em;
    text-align: left;
    font-size: 1em;
    line-height: 1.4em;
  }
}