/* styles that are shared across domains */

/* css reset */
*{
  padding:0;
  margin:0;
  box-sizing:border-box;
  background-size:contain;
  background-position:center;
	background-repeat:no-repeat;
	scroll-behavior: inherit;
  -webkit-tap-highlight-color: transparent;
}
/*  */

/* user select/highlight */
*::selection{
  background-color:var(--foreground);
  color:var(--background);
}
*::-moz-selection{
  background-color:var(--foreground);
  color:var(--background);
}


/* css variables */
:root{
  --light: #ffffff;
  --dark: #333333;
  --accent-gold:#ffcc00;
  --accent-green:#57ac62;
  --accent-green_trans:#57ac6215;
  --accent-purple:#8c6fc6;
  --accent-cyan:#6fc5c6;

  --foreground: var(--dark);
  --background: var(--light);
}

html{
	scroll-behavior: smooth;
}
/* body styles */
body{
  background-color:var(--background);
  color:var(--foreground);
  font-family: 'Open Sans', monospace;
  /* transition:.35s; */
	cursor:default;
}
body.dark-mode{
  --foreground: var(--light);
  --background: var(--dark);
}

/*system mode, dark mode styles*/
@media (prefers-color-scheme: dark) {
	body.system-mode{
		--foreground: var(--light);
    --background: var(--dark);
	}
}


/* native element selectors */
h1, h2, h3, h4, h5, h6, button, input[type="submit"], .toggle-switch-container{
  font-family: 'Montserrat', sans-serif;
	line-height:normal;
}
h1{
	font-size:3.5em;
}
h2{
	font-size: 2.5em;
}
h3{
	font-size:2em;
}
h4{
	font-size:1.6em;
}
h5{
	font-size:1.2em;
}
h6{
	font-size:1em;
}

ul{
  list-style-type:none;
  margin-top:20px;
}
li{
  margin-bottom:10px;
	font-size:13px;
}
.list-icon{
	color:currentColor;
	margin-right:10px;
	width:14px;
	height:14px;
	line-height:0;
	transition:.35s;
}
.active-text .list-icon{
  color:#57ac62;
}

p{
  line-height:1.5;
  margin-bottom: 15px;
}
p:last-child{
	margin-bottom:0;
}

a{
  display:inline-block;
  color:currentColor;
  text-decoration:none;
  cursor:pointer;
}
a.standard-link{
	transform: scale(1);
	position:	relative;
	display:inline-block;
	transition: transform .25s;
}
a.standard-link .link-icon{
  width:16px;
  height:16px;
  margin-right:8px;
}
a.standard-link:after{
	content:"";
  pointer-events: none;
	opacity:1;
	position:absolute;
	left:0;
  bottom:-2px;
	width:100%;
	height:1px;
	background-color:currentColor;
	cursor:pointer;
}
/* standard links in heading tags get a larger underline */
h1 a.standard-link:after,
h2 a.standard-link:after,
h3 a.standard-link:after,
h4 a.standard-link:after,
h5 a.standard-link:after,
h6 a.standard-link:after{
  bottom:-3px;
  height:2px;
}
@media (hover: hover) and (pointer: fine) {
  a.standard-link:hover:after{
    animation:hoverLink .45s;
  }
}
@keyframes hoverLink{
	/* fade out */
	0%{
		opacity:1;
	}
	25%{
		opacity:0;
	}
	30%{
		width:0;
	}
	35%{
		opacity:1;
	}
	100%{
		width:100%;
	}
}
a.standard-link:active{
	transform:scale(.95);
}
a.incog-link{
	transform:scale(1);
	position:relative;
	display:inline-block;
	transition:.25s;
}
a.incog-link:active{
	transform:scale(.95);
}

/* icon buttons (icons that are buttons/links) */
.icon-button{
  transition:.15s;
  border-radius:50%;
}
@media (hover: hover) and (pointer: fine) {
  .icon-button:hover{
    color:var(--accent-gold);
    box-shadow:0px 8px 17px -8px rgb(0 0 0 / 10%);
    transform:scale(1.05);
  }
}
.icon-button:active{
  transform:scale(.95);
  box-shadow:none;
}

/* buttons */
button,
input[type="submit"],
.button{
  transform:scale(1);
  cursor:pointer;
  display:inline-block;
  transition: .25s;
  /* transition: .25s, color 0s; */
  border:2px solid currentColor;
  border-color: #cccccc;
  /* border: 2px solid #ffcc00; */
  /* color:#ffcc00; */
  border-radius:8px;
  padding:10px 20px;
  background-color:transparent;
  color:inherit;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  button:hover,
  input[type="submit"]:hover,
  .button:hover{
    color:var(--light);
    background-color:var(--accent-gold);
    border-color:var(--accent-gold);
  }
}
button:active,
input[type="submit"]:active,
.button:active{
	transform:scale(.95);
}
/* primary button styles */
button.primary,
.button.primary{
	border-color:var(--accent-gold);
}
/* secondary/negative button styles */
@media (hover: hover) and (pointer: fine) {
  button.secondary:hover,
  .button.secondary:hover{
    background-color:#cccccc;
    border-color:#cccccc;
  }
}

/* button container buttons */
.button-container > *{
	margin-right:10px;
}
.button-container > *:last-child{
	margin-right:0px;
}

/* new tooltips */
[data-tooltip]{
  position:relative;
  cursor: pointer;
}

/* the tooltip itself */
[data-tooltip]:after{
  /* container */
  z-index:100;
  font-weight:normal;
  font-size:11px;
  pointer-events:none;
  background-color:var(--background);
  border-radius: 8px;
  width:calc(100% - 20px);
  border:1px solid #e3e3e3;
  padding:10px;
  box-shadow:0px;
  position:absolute;
  right:0;
  
  transition:top .3s, opacity .3s, box-shadow .3s;
  
  opacity:0;
  top:calc(100% + 10px);

  /* content styles */
  content:attr(data-tooltip);
  text-transform: none;
}

/* on hover, tooltip shows (open) */
@media (hover: hover) and (pointer: fine) {
  [data-tooltip]:hover:after{
    transition-delay: .15s;
    opacity:1;
    top:100%;
    box-shadow:0px 8px 17px -8px rgb(0 0 0 / 10%);
  }
}

code{
  background-color:var(--accent-green_trans);
  /* border: 1px solid #e3e3e3; */
  border: 1px solid var(--accent-green);;
}
pre code{
  margin-bottom:10px;
}



/* other custom selector elements */
.full-height{
  height:100vh;
}

/* show-with-js class within HTML files */
.hide-with-js{
	display:none;
}
.hide{
	display:none;
	opacity:0;
}
.clickable{
  cursor: pointer;
}
sub{
	display:block;
	margin-bottom:10px;
}
sub:last-child{
	margin-bottom:0px;
}
.strikethru{
	text-decoration: line-through
}
.ui-icon{
  width:25px;
  height:25px;
}
object{
	width:100%;
	height:100%;
}
svg{
	fill:currentColor;
}


/* shared sections */
.max-width-section{
  max-width:1200px;
  margin:0 auto;
}
.padded-section{
  padding:40px;
}

/* *********************** */
/* form styles */
.form-container{
  background-color:var(--background);
	border:1px solid #e3e3e3;
  border-radius: 8px;
  box-shadow: 0px 8px 17px -8px rgb(0 0 0 / 40%);
  padding: 50px;
	width:400px;
	max-width:100%;
}

.form-row{
	display:block;
	margin-bottom: 20px;
}
label.form-row{
	cursor:pointer;
}

.form-row-label{
	font-size:12px;
	margin-bottom:5px;
}
/* custom input */
.input-container{
	position:relative;
	/* padding:8px 0; */
	line-height:2.8em;
	cursor:text;
}
.input-container:after{
	content:"";
  pointer-events: none;
	opacity:1;
	position:absolute;
	left:0;
  bottom:-3px;
	width:100%;
	height:1.5px;
	background-color:currentColor;
	transition:background-color .25s;
}
@media (hover: hover) and (pointer: fine) {
  .input-container:hover:after{
    animation:hoverInput .45s;
  }
}
@keyframes hoverInput{
	/* fade out */
	0%{
		opacity:1;
	}
	25%{
		opacity:0;
	}
	30%{
		width:0;
	}
	35%{
		opacity:1;
	}
	100%{
		width:100%;
	}
}
.input-container:active:after,
.input-container:focus-within:after{
	background-color:var(--accent-gold);
	animation:none;
}
/*  */
input[type="text"],
input[type="password"]{
	font-size:inherit;
	font-family: inherit;
	line-height:inherit;
	border:none;
	display:block;
	width:100%;
	text-overflow:ellipsis;
  color:inherit;
  background-color:transparent;
}
input[type="text"]:focus,
input[type="password"]:focus{
	border:none;
	outline:none;
}
::placeholder{
	color:#c4c4c4;
}
::-ms-reveal {
  filter: invert(100%);
}

/* error label */
.form-row-error-label{
	font-size:12px;
	margin-top:10px;
	color:#FF0D00;
}

/* *********************** */