@font-face {
  font-family: "PabulumMonoSans";
  src: url("../font/PabulumMonoSans.ttf") format("ttf"),
       
}

@font-face {
  font-family: 'PabulumSerif';
  src: url(../font/PabulumSerif.ttf) format("ttf");
}

@font-face {
  font-family: 'PabulumFlare';
  src: url(../font/PabulumFlare.ttf) format("ttf");
}


body{
	margin : 0;
	padding : 0;
	font-family: "baskerville";
	overflow-y: hidden;
	cursor: url("../images/cursor2.png"), auto;
	overflow-x: hidden;
	
}

.body-y{
	background: #fff100;
	color: #000;
	
	--bg-color: #fff100;
	--text-color: #000;
	
}

.body-w{
	background: #fff;
	color: #000;
	
	--bg-color: #fff;
	--text-color: #000;
	
}


#videobg {
	
position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
	z-index: -300;
	
}
#videobg2 {
	
position:absolute;
  width: 100%; 
  height: 100%;
	z-index: -300;
	
}

.sidevideo{
	overflow: hidden;
	
	
	
}
.body-b{
	background: #B9EEFF;
	color: #0031FF;
	--bg-color: #B9EEFF;
	--text-color: #0031FF;
	
}

.body-g{
	background: #ceffdd;
	color: #00904c;
	--bg-color: #ceffdd;
	--text-color: #00904c;
	
}

.body-p{
	background: #ffd9d9;
	color: #FF0004;
	--bg-color: #ffd9d9;
	--text-color: #FF0004;
	overflow-x: hidden;
}






::selection {
  background: var(--text-color); /* WebKit/Blink Browsers */
	color: var(--bg-color);
}
::-moz-selection {
  background: var(--text-color); /* Gecko Browsers */
	color: var(--text-color);
}



h1 {
	font-size: 30px;
	font-family: "PabulumMonoSans","neue-haas-grotesk-display", sans-serif;
	
}

#xltype {
	font-size: 60px;
	
	line-height: 1.2;
	
	
	
}


.typecenter{
	
	
	
	height: 100%;
	padding-top: 40vh;
	text-align: center;
	margin-bottom: 30px;
	
	
	
}
#artificialtype {
	font-size: 10px;
	letter-spacing: 100;
	line-height: .9;
	text-align: right;
	
	
}

.rowtype {
	padding: 30px; 
	background: var(--text-color); /* Gecko Browsers */
	color: var(--bg-color);
	/* max-height:250px; */
	
}

.type1 {
	font-family: "PabulumSerif","neue-haas-grotesk-display", sans-serif;
	
}

.type1b {
	font-family: "PabulumSerif","neue-haas-grotesk-display", sans-serif;
		
	
}

.type2 {
	font-family: "PabulumMonoSans","neue-haas-grotesk-display", sans-serif;
	
}

.type2b {
	font-family: "PabulumMonoSans","neue-haas-grotesk-display", sans-serif;
			
	
}

.type3 {
	font-family: "PabulumFlare","neue-haas-grotesk-display", sans-serif;
	
}

.type3b {
	font-family: "PabulumFlare","neue-haas-grotesk-display", sans-serif;
			
	
}

.letterrow{
	display: block;
	padding: 100px;
	font-size: 140px;
	overflow-x: scroll;
	white-space: nowrap;
	border-bottom: 1px solid var(--text-color);
}

.letterrow2{
	display: block;
	padding: 100px;
	font-size: 140px;
	overflow-x: scroll;
	white-space: nowrap;
	background: var(--text-color); /* Gecko Browsers */
	color: var(--bg-color);
}




.examine:hover{
	color: var(--text-color);
  -webkit-text-fill-color: var(--bg-color); /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--text-color);
	
	
	
}

#typecanvas{
	width: 100%;
	height: 150px;
	
	border: 2px solid var(--text-color);
	margin-bottom: 100px;
	transition:  .2s;
	
}

#typecanvas:hover {
	box-shadow: 5px 5px 5px var(--text-color);
}



.artificial {
	
	text-align: justify;
	margin: 0 auto;
	width: 230px;
	height: auto;
	transform: rotate(-40deg);
		font-family: "neue-haas-grotesk-display", sans-serif;
	font-weight: 500;
 font-size: 15px;
	letter-spacing:  1px;
	
font-style: normal;	
	
	
}


.downarrow{
	
	width: 100px;
	height: 100px;
	margin: 200px auto 0 auto;
}

#aip5{
	
	width: 100%;
	height:500px;
}

#fb{
	
	width: 100%;
	height:100vh;
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
font-family: "neue-haas-grotesk-display", sans-serif;
	font-weight: 500;
 font-size: 10px;
	letter-spacing:  1px;
	
font-style: normal;	
  
  
}

.nav li a {
  display: block;
  color: var(--text-color);
  padding: 5px 16px;
  text-decoration: none;
	cursor: url("../images/cursor.png"), auto;
}

.nav li {
  
  border-bottom: 1px solid var(--text-color);
}

/*.nav li:last-child {
  border-bottom: none;
}*/

.nav li a.active {
  background-color: var(--text-color);
  color: var(--bg-color);
}

.nav li a:hover:not(.active) {
  background-color: var(--text-color);
  color: var(--bg-color);
}


.button {

	
  border: 1px black solid;
 /* color: var(--text-color);
	background-color: var(--bg-color); */
  padding:12px 22px 10px  22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
	font-family:'neue-haas-grotesk-display', sans-serif;	
	background-color: #000;
	color: #fff;

}

.enterbutton{
	text-align: center;
margin: 0 auto;
	margin-top: 70vh;
	font-family:'neue-haas-grotesk-display', sans-serif;
	
		text-transform: lowercase;
	
}





.sans-reg {
	
	font-family: "neue-haas-grotesk-display", sans-serif;
	font-weight: 500;
 font-size: 22px;
	letter-spacing:  1px;
	
font-style: normal;	
	
}

.sans-sm {
	
	font-family: "neue-haas-grotesk-display", sans-serif;
	font-weight: 500;
 font-size: 10px;
	letter-spacing:  1px;
	
font-style: normal;	
	
}

.streamSp {
	
	font-family: "neue-haas-grotesk-display", sans-serif;
	font-weight: 700;
 font-size: 25px;
	letter-spacing:  1px;
	
font-style: normal;	
	color: var(--text-color);
  -webkit-text-fill-color: var(--text-color); /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--bg-color);
	
} 

.ser-reg {
	
	font-family: Baskerville, serif;
	font-weight: 500;
 font-size: 20px;
	
font-style: normal;	
	
}

.ser-sm {
	
	font-family: Baskerville, serif;
	font-weight: 500;
 font-size: 14px;
	font-style: italic;
	text-align: justify;

	
}

.ser-italic {
	
	font-family: Baskerville, serif;
	font-weight: 500;
 font-size: 25px;
	
font-style: italic;	
	
}

.ser-italic-pull {
	margin-top: 300px;
	
	font-family: Baskerville, serif;
	font-weight: 500;
 font-size: 15px;
	
font-style: italic;	
	
}

#scopecontain{
	width: 100%;
	height: 100%
	
}

.backscope{
	z-index: -2;
	position: absolute;
	
	right: 30vw;
	top: 30vh;
	max-width: 500px;
	height: 400px;

	
	
}



.mhide{
  display:none;
}

.mshow{
  display:inline;
text-align: justify;
  
}


.p-1-w {
	
	
color: var(--text-color);
  -webkit-text-fill-color: var(--bg-color); /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--text-color);
	border-bottom: 2px var(--text-color) solid;
	padding: 0px 6px;
	font-weight: 700;
	
}


.tooltip {
  position: relative;
  display: inline-block;

}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: none;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: -425%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 1000%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

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




.imagetip {
  position: relative;
  display: inline-block;

}

.imagetip .imagetipimg {
  visibility: hidden;
  width: 200px;
 
  position: absolute;
  z-index: 1;
  bottom: -425%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  
}

.imagetip .imagetipimg::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;

}

.imagetip:hover .imagetipimg {
  visibility: visible;
  opacity: 1;
}




img {
	
	width: 100%;
	height: auto;
	
}

.oflow-hide{
	overflow-y: hidden;
	
	
	
	
}





.flex-item {
	

	
	
	
	
}




.logo-cont {
	display: block;
	

	
}

.pab-logo {
	display: block;
	
	
	padding: 20px;
	border-bottom: 1px var(--text-color) solid;
margin: auto;
	width: 100%;
	height: auto;

	
}

/*.pab-logo img {
	
	margin: auto 0;
		width: 70%;
	height: auto;
} */

.button-next{
	
    display:inline-block;
	font-size: 20px;
	padding: 5px 10px 10px 10px;

	color: var(--bg-color);
	background: var(--text-color);
	
	
}
.button-reset{
	display:inline-block;
    font-family: 'PabulumMonoSans';
	font-size: 15px;
	padding: 10px;
	
	color: var(--text-color);
	background: #fff;
	
	
}

.button-back{
	
    display:inline-block;
	font-size: 20px;
	padding: 5px 10px 10px 10px;

	background: var(--bg-color);
	color: var(--text-color);
	
	
}
.stuckcorner{
	
    position:absolute;
    bottom: 10px;
    right: 20px;
	
	
	
}

.left-outline {
	 border-left: 1px var(--text-color) solid; 
	
}


#obligation {
	width: 320px;
	height: 300px;
	margin: 0 auto;
	margin-top: 25vh;
	overflow-y: scroll;
	text-align: justify;
	font-size: 8px;
}


#checkmark {
	width: 360px;
	height: 380px;
	margin: 0 auto;
	margin-top: 20vh;
	background-image:url('../images/check.svg');
}





@media only screen and (max-width: 580px) {
	.left-outline {
	border-left: none;
}
	
}

.pad {
	
	
	

	padding: 20px;

}

.outline-b {
	
	/*border: 1px black solid;*/

	
}

.flex-item {

	
	
}

.nb-t {
	border-top: none;
}
.nb-l {
	border-left: none;
}
.nb-r {
	border-right: none;
}
.nb-b {
	border-bottom: none;
}

/* width */
::-webkit-scrollbar {
  width: 1vw;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--bg-color); 
	border-left: 1px var(--text-color) solid;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--text-color); 
	
	
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--text-color); 
	
}