/*  --- GREEN COLOUR PALETTE ---  */

:root 
{

--colour1: rgb(0 200 0);		/*  ------ color2GB -------  */
--colour2: rgb(170 250 170);		/*  ------ colorGB --------  */
--colour3: rgba(0, 128, 0, 0.2);	/*  ------ bGcolor --------  */
--colour4: rgb(65,110, 70);		/*  ------ footerGB -------  */	
--colour5: rgb(0, 150, 0);
		
--titleColour:  rgb(100, 300, 100); 	/*  ---- title colour -----  */					
--infoGrey:  rgb(170 170 170); 		/*  ------ info grey ------  */		 			 	
}
/*  ----------------------  */




/* --- BLUE COLOUR PALETTE --- */

.blue-mode 
{
--colour1: rgb(140 200 235);
--colour2: rgb(120 170 200);
--colour3: rgba(42, 84, 126, 0.2);
--colour4: rgb(60 85 100);
--colour5: rgb(70, 120, 170);

--titleColour: rgb(85, 190, 240);
--infoGrey:  rgb(170 170 170); 
}



/* ------- Green Blue Graphic Assets -------- */
.asset 
{
    aspect-ratio: 3 / 1;  /* keeps correct shape */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.logo {background-image: url("../../director/Graphics/_logo.png");}
.blue-mode .logo {background-image: url("../../editor/Graphics/_logo.png");}


.arrowbtn {background-image: url("../../director/Graphics/_arrowBtn.png");}
.blue-mode .arrowbtn {background-image: url("../../editor/Graphics/_arrowBtn.png");}




.play {background-image: url("../../director/btn/_playBtn.png");}
.blue-mode .play {background-image: url("../../editor/btn/_playBtn.png");}



p01
{
color:rgb(155, 155, 155);
font-size:14px;
}





body 
{
/*  -------MASTER FONT ---  */

 font-family: 
"Century Gothic",
"Apple Gothic",
"Helvetica Neue",/*  ---- Safari ---  */
"URW Gothic L",
"Avant Garde",
sans-serif;
/*  ----------------------  */

background-color: black;
}



p7
{
color:var(--colour1);
font-weight:normal;
Font-size:15px;
padding: 0px 0px 10px 10px; 
Margin-right: 20px;
}
@media screen and (max-width: 600px) 
{p7{Font-size:15px;}}









/*  -----------------------------------------------------------------  */

	    	/*        BESPOKE ADDITIONS       */

/*  -----------------------------------------------------------------  */


#watchfull
{
display: none;
margin: 50px 0px 0px -25px;
transition: transform 0.2s ease;
Z-index:7;
}
#watchfull:hover{transform-origin: center;
  transform: scale(1.5)}

#watchfull img
{
width: 100px;
height: auto;
}
@media screen and (max-width: 600px)
{
#watchfull{position:fixed; bottom: 30px; left: calc(50% - 35px)}
#watchfull img{width: 120px}
}

#auxbox
{
display: none;
Width: 90%;
Max-width:700px;
}
@media screen and (max-width: 400px)
{
#auxbox{visibility:hidden}
}


/* - fleming - */

p10
{font-size:10px;;color:grey;}

times
{
font-family: "Times New Roman", Times, serif;
color:grey;
font-style:italic;
font-size:12px;
}
times:hover{color:white; cursor:pointer; opacity: 0.7}


/* - catalyst - */

p11{font-family: "impact"; color: rgb(110, 70, 80);font-size:18px;text-shadow: 2px 2px black;} 
impact{font-family: "impact"; color: rgb(110, 70, 80);font-size:12px;text-shadow: 2px 2px black;}
catGap{font-size:10vh} 

@media screen and (max-width: 650px) 
{
p11{font-size:3vw;} 
impact{font-size:2vw;}
catGap{font-size:2vw;} 
}