/* 

@ incampfire 

	~ from x2xo research_start variant a


@START 

	~ Brandon will work to make this responsive, adaptive and reactive to all browsers and devices.
	~ Who gives a fuck about an oxford comma?!  
	
	
	

*/ 

/* latin */
@font-face {
  font-family: 'xx';
  font-style: normal;
  font-weight: 400;
  src: local('xx'), local('xx-Regular'), url(//campfire.run/static/fonts/xx.woff2) format('woff2');
}

@font-face {
  font-family: 'Request';
  font-style: normal;
  font-weight: 400;
  src: local('Request'), local('Request-Regular'), url(//campfire.run/static/fonts/request-sans.woff2) format('woff2');
}

@font-face {
  font-family: 'Cybo';
  font-style: normal;
  font-weight: 400;
  src: local('Cybo'), local('Cybo-Regular'), url(//campfire.run/static/fonts/cybo.woff) format('woff');
}

@font-face {
  font-family: 'Monda';
  font-style: normal;
  font-weight: 400;
  src: local('Monda Regular'), local('Monda-Regular'), url(//campfire.run/static/fonts/monda-regular.woff2) format('woff2');
}

/* latin-ext */
@font-face {
  font-family: 'Monda';
  font-style: normal;
  font-weight: 700;
  src: local('Monda Bold'), local('Monda-Bold'), url(//campfire.run/static/fonts/monda-bold.woff2) format('woff2');
}

/* latin */
@font-face {
  font-family: 'Lustria';
  font-style: normal;
  font-weight: 400;
  src: local('Lustria'), local('Lustria-Regular'), url(//campfire.run/static/fonts/lustria-regular.woff2) format('woff2');
}


/* 

@ incampfire 

*/ 

html, body {

	overflow-x: hidden; 
	
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	
	user-select: none;
	
}


html {

	font-size: 1.2em; /* oe go 150 for boom boom boom */

}

body {

	font-family: "Moira", sans-serif; /* @TODO */ 
	overflow: hidden;
	
	margin:0; /* corrects the left edge */
	


}


a { 

	text-decoration: none; 
	color: #111; 

}

	
.xo-modal {

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 1.6rem 2rem;
  border: 2px solid black;
  border-radius: 5px;
  background: white;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  
  z-index:5;
}



.xo-message {

	font-family: "Request", sans-serif;
	font-size:1.1rem;
	
	margin-bottom: 1.0rem; /* 1.6 */ 
	
	margin-top: 0;
}


.xo-message small {

	font-family: "Arial", sans-serif; /* Monda */ 
	font-size:0.9rem;
	margin-bottom: 1.6rem;
	margin-top: 0;
}

.xo-message span {

	font-family: "Request", sans-serif;
	font-size:1.8rem;
	margin-top: 0;
	
	background: linear-gradient(to top left,#ff8a00,#da1b60);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.xo-message a.beep {
    text-decoration: none;
    color: #ff2cff;
    outline: none;
    font-family: Monda;
    font-size: 0.8rem;
	
	
}


.xo-bottom {

	position: absolute;
	
	left: 0.5rem; 
	bottom: 20px; 
	font-family: "Request", sans-serif;
	font-size:0.9rem;
	

	
	text-align:left; 
	align-items: left;


}

.splitfriction { 

 padding: 0.3rem 2.4rem;

} 


a.splitfriction {
	
    text-decoration: none;
    color: #fe1c80; /* pookie-pink */ 
    outline: none;
    font-family: Monda;
    font-size: 0.7rem;
	

	
	background: -webkit-linear-gradient(45deg, #09009f, #fe1c80 80%); /* 45 for fade -- 90 for msword */ 
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
	

}

a.splitfriction:hover { 

    color: #353839; /* from pookie-pink to onyx wink */ 
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	
	
	background: -webkit-linear-gradient(45deg, #09009f, #353839 80%); /* 45 for fade */ 
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
} 


a.splitfriction span { 

	color: #c1cffc;
	
}

/* button */ 

.btn {
  font-size: 0.9rem;
  background: white;
  padding: 0.3rem 2.4rem;
  border: 2px solid #111;
  margin-right: 1.6rem;
  box-shadow: 0 0 0 black;
  transition: all 0.1s;
}

.btn:last-child {
  margin: 0;
}

.btn:hover {
  box-shadow: 0.1rem 0.1rem 0 black;
  transform: translate(-0.1rem, -0.1rem);
}

.btn:active {
  box-shadow: 0 0 0 black;
  transform: translate(0, 0);
}

.xo-options {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/*

@DEV and @LOGO for .intro 

*/ 

.intro {
	
	display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 0.90rem;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    grid-area: 2 / 4 / 2 / 4;
    align-self: start;
    justify-self: end;
    margin-bottom: 3rem;
}

/* 
@LOGO 

*/ 

.intro span {

	font-family: "Request", sans-serif;
	font-size:1.8rem;
	
	margin-top: 2rem; /* keeps it nice */ 
	margin-left:2rem; /* off the sides */ 

	background: linear-gradient(to top left,#ff8a00,#da1b60);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	

   
}

/*

-- 

@VIDEO 


*/ 


#fewfeefew {

	margin: 0; 
	
/* background: rgba(50,252,213,0.9); */ 
	
	overscroll-behavior: none;
	contain: strict;
	background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path d="M1 2V0h1v1H0v1z" fill-opacity=".025"/></svg>');
	background-size: auto;
	background-size: 20px 20px;

	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

	z-index:-1;
	
	opacity:0.7;

}


.fewfeefew-bg {
	
	margin: 0; 
	
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	
	z-index:-2;
	
	opacity:0.7;
	

}

#fewfeefew-container {
	margin: 0; 
	
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%; 
	overflow: hidden;

} 

#fewfeefew-container video {

	margin: 0; 

	min-width: 100%; 
	min-height: 100%; 

	width: auto;
	height: auto;

	position: absolute;

	top: 50%;
	left: 50%;

	transform: translate(-50%,-50%);

	z-index:-3;
	
	opacity:0.6;

	overflow: hidden;
}

/* 
@CANVAS 

xo-anime 

	and PAINT elements for the 
	good looking-ness. 
	

*/
#xo-paint {

  width: 100%;
  height: 100vh;
  
  position: absolute; 
  top:0;
  left:0;
  
  z-index: -1;
  
  overflow: hidden;
  opacity: 0.2;

}


#xo-tinge {

	background: -webkit-gradient(linear,left top,right bottom,from(#24aef2),to(#f224f2));
    background: linear-gradient(to bottom right,#24aef2,#f224f2);
	
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	
	z-index:-2;
	opacity:0.1;
	
/*

	hmm elements hmm 
	
*/ 

	
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}


#xo-mirage {

	position: absolute; 
	
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	
	background-image: url('//campfire.run/static/image/incampfire.jpg');
	/* background-image: url('//splitfriction.com/i/cherise.home.0x.jpg'); */ 
	background-repeat: no-repeat;
	background-size: cover;
	background-position:  left 35% top 20% ; /* sara (sara.home.0x) and taylor custom sets pre-computed alt : left 35% top 40% ~ center center  */
	
	opacity:0.7; /* 0.2 */ 

	filter: grayscale(11%);
	
	z-index: -2; 

}