/*import all typefaces*/

@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,400;0,700;1,400&family=Raleway:ital,wght@0,200;0,300;1,200&display=swap');


/*media queries*/



 @media (min-width: 1351px) {
   /* show the warning to zoom out a little*/
     #mobile{visibility: hidden;}
     #medium{visibility: hidden;}
} 
/* double check smaller laptop screens (landscape tablets, 768px and up) */

 @media (max-width: 1350px) {
   /* show the warning to zoom out a little*/
     #mobile{visibility: hidden;}
     #medium{visibility: visible;}
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 1000px) {
/* #home{background:orange;}*/
    #mobile{visibility: visible;}
    #medium{visibility: hidden;}
}



/* Large devices (laptops/desktops, 992px and up) */
/*@media only screen and (min-width: 992px) {
  #home {background: orange;}
} */



#medium{
    position:fixed;
    padding: 30px;
	border-radius: 20px;
	box-shadow: 0 3px 26px 0 rgba(0,0,0,0.20);
    width: 31%;
    margin-top:-495px;
    margin-left:441px;
    background-image: url("../imgs/grad_mild04.gif"); 
    /*position:fixed;
    width:400px;
    height:700px;
    margin-top:-110px;
    margin-left:300px;*/
    
    
}
#mobile{
    position:fixed;
    padding: 30px;
	border-radius: 20px;
	box-shadow: 0 3px 26px 0 rgba(0,0,0,0.20);
    width: 31%;
    margin-top:-420px;
    margin-left:441px;
    background-image: url("../imgs/grad_mild04.gif"); 
    /*position:fixed;
    width:400px;
    height:700px;
    margin-top:-110px;
    margin-left:300px;*/

}



/*general classes*/
.center {
    /*margin: auto;
    width: 100%;
    height:100%;
    text-align: center;*/
    margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    text-align: center;

}

.right, .left{
    /*padding-top:100px;*/
    padding-top:50px
    padding-bottom: 50px;
    width:100px;
    position:absolute;
 
    z-index: 2;
    cursor: help;
    
}
/*these r opposite lol*/
.right{
    margin-left: 0px;
    
    
}
.left{
    margin-left: 1290px;
}

/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/

/*come on my general selectorz*/
/*TYPE*/
body{
    /*put a gif in here?*/
     background-color: black ;/*grey*/
    /* background-color: #CCCCCC #FFEEF4;*/ /*another pretty pink ffee4, cccccc is grey*/
  /*font-family: 'Advent Pro', sans-serif;*/
      font-family: 'raleway',  sans-serif;
    /*font-style:italic;*/
      font-weight: 200;
     /*font-size: 1em;*/
    font-size: 100%;
    /*color:aquamarine;*/
    color:floralwhite;
   

}

h1{
    font-family: 'Josefin Slab', serif;
    font-weight: 700;
    /*font-style: italic;*/
    font-style:normal;
    margin-top: -10px;
    margin-bottom: 7px;
    font-size: 2.5em;
    position:relative;
}

h2{
    font-family: 'Josefin Slab', serif;
    font-weight: 400;
    font-style: italic;
    margin-top: -10px;
    margin-bottom: 7px;
    font-size: 1.2em;
    cursor:cell;
}

div{
    font-size: 1.05em;
}


a{
    color:floralwhite;
    /*color:chartreuse;*/
}
a:hover{
    color:chartreuse;
}
a:clicked{
    color:chartreuse;
}
/*a:visited{
    color:deeppink;
}*/
a:active{
     color:bisque;
    
}

li{
    padding-left: 4px;
    display:inline;  
}

/*form inputs select,*/
input, textarea {
    font-size: 12px;
    /*font-family: inherit;*/
    font-family: sans-serif;
    font-style: italic;
    cursor: text;
}


a, ul, li, p, form, radio{
    cursor: cell;
}



/*ID ZONE*/
/*page IDs control bg imgs*/

/*all pages to push content*/
#push_home{
    padding-top:60px;
    /*cursor: pointer;*/
   
}

/*span styles*/
.bgText, .css{
    background-color: black;
}





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


.tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color:darksalmon;
    /*color: #fff;*/
    text-align: center;
    font-size: 0.7em;
    /*font-style:italic;*/
    border-radius: 6px;
    padding: 21px;
    position: absolute;
    z-index: 1;
    /*bottom: 125%;
    left: 50%;*/
    margin-top: -30px;
    margin-left: 20px;
    opacity: 0;
    transition: opacity 0.3s;
    background-image: url("../imgs/grad_mild04.gif"); 
}



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

.artist{
    font-style:italic;
    font-weight: bolder;
    color:orchid;
    
}
/*survey info*/

#surveyered{
    cursor: pointer;
    visibility: hidden;
    padding: 30px;
    padding-top: 15px;
    padding-bottom: 40px;
	border-radius: 20px;
	box-shadow: 0 3px 26px 0 rgba(0,0,0,0.20);
    width: 31%;
    margin-top:60px;
    background-image: url("../imgs/grad_mild04.gif"); 
    font-family: 'raleway',  sans-serif;
    font-size: 1.1em;
    font-style: normal;   
}

#surveyered p{
    padding-top: 7px;
    margin-bottom:4px;
}

.survey{
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7em;   
    color:aquamarine;
    padding:14px;
    
}
#submitSurveys{
    margin-top:10px;
}

#endlessSurveys2{
    visibility: hidden;
}
#submitted{
    visibility: hidden;
    padding: 30px;
	border-radius: 20px;
	box-shadow: 0 3px 26px 0 rgba(0,0,0,0.20);
    width: 27%;
    background-image: url("../imgs/grad_mild04.gif"); 
    margin-top:-100px;
}
/*#sureDiv{
     visibility: hidden;
}*/
/*index styles*/

 
.chillcursor{
    margin-top:-55px;
    margin-left:-30px;
    cursor:pointer;
}

/*nav on index only*/
#navigation{
    cursor: pointer;
    padding: 30px;
	border-radius: 20px;
	box-shadow: 0 3px 26px 0 rgba(0,0,0,0.20);
    width: 30%;
    margin-top:110px;
    background-image: url("../imgs/grad_mild04.gif"); 
    
}
#navstart{
    padding-bottom: 225px;
}
.bodyText{
  cursor: cell;    
}

/*endless scroll styles are inside endless.css*/

/*screaming in the void styles*/


/*meditation styles*/


/*AUDIO*/
#matterMed{
    margin-top:-5px;
    width: 320px;
    height:42px;
    
}

/*thank u styles*/

/*all the inouts on the surveys*/
.butty{
    cursor: pointer;
}
/*landing styles*/


/*team styles*/
#team_bod{
     background-color:#F2FFEB;
}
#team{
    background-image: url("../imgs/rlx_bg001.png");
    background-repeat: no-repeat;
    width: 1366px;
    height:768px;
    border-radius: 25px;
}

#teamlist{
    display:inline-block;
    width:208px;
    
    padding: 0px 0px 14px;
}

#wellness{
    margin-top:-100px;
}


/*When three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom. When four values are specified, the paddings apply to the top, right, bottom, and left in that order*/

/*popup note*/
#popper{
    cursor:pointer;
    position:fixed;
    margin-top: -435px;
    margin-left: 450px;
    padding: 30px;
	border-radius: 20px;
	box-shadow: 0 3px 26px 0 rgba(0,0,0,0.20);
    width: 30%;
    background-image: url("../imgs/grad_mild04.gif"); 
    visibility:hidden;
}


/*make this absolute or fixed, and then the canbvas is on the body which should b relative?*/
/*3d zone*/
canvas{
position:relative;
    top:0px;
    left:0px;
    z-index: -1;
    /* can set bg colour here*/
    /*background-color: aqua;*/
    /*background-image: url("../imgs/cheers.gif")*/

}
/*on the body, three canvas fills this*/


#draw_bg{
    /*position:relative;*/
    background-color: black;
}


#draw_home{
   /*background-image: url("../imgs/bg002.png"); /*requires .. to find folder*/
    position:absolute;
    width: 1366px;
    height:768px;
    cursor: cell;
}


/* turn this guy on for edging? comment our pituon + fixed for popper #popper2{
    margin-top: -350px;
    margin-left: 510px;
    border-radius: 20px;
    padding:20px;
    position:fixed;
    background-color:#ffffff;
    box-shadow: 3px 4px 0px 0px #1084a1;
    visibility:hidden;
    opacity:95%;
}/*



/*CLASS ZONE*/
/*general button classes*/
.myButton {
	box-shadow: 3px 4px 0px 0px #1084a1;
	background:linear-gradient(to bottom, #f285d5 5%, #94dee8 100%);
	background-color:#f285d5;
	border-radius:18px;
	border:1px solid #0bbdbd;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:7px 25px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.myButton:hover {
	background:linear-gradient(to bottom, #94dee8 5%, #f285d5 100%);
	background-color:#94dee8;
}

.myButton:active {
	position:relative;
	top:1px;
}


/*menu things*/
/*idk why but this `ul won't center on main.css so pullin it over*/
ul{
    margin-left: -39px;
}

.menuList{
    font-size: 0.8em;
    cursor:pointer;
}