/**
***  Author: SKDJ
***  
***/

/*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/


:root{
	--dark-themeBGColor: #cc0066;
	--dark-themeFGColor: white;
	--light-themeBGColor: white ;
	--light-themeFGColor: black;
	--deep-purple: #73264D;
	--greyscale-color: #4d4d4d;
	--dull_blue-color: #414a4c;
	--rasberry-color: #ff006c; 
	--dark-slateyrey: #2f4f4f ;
	--purple-color: #800000;
	--violet-color: 81007f;
        --teal-like-color :#00afaf;
        --rasberry-jam-color:#660033;
        --violet-color:#81007f;
        --bright-blue:#50e1ff;
        --hot-pink-color:ff1f8f;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	--skdj-f: ;
	
	

}


@keyframes downmove{
  from {top: 0px;}
  to {top: 200px;}
}



/*#barBox{
	position: relative;
	bottom: 0px;
	
	
}*/

.seperated{
  background-color: var(--rasberry-color);
  background-position: 0px 0px;
  background-size: 3px 3px;
  
  
  height: 9px;
  width: 99%;
}

#bodyControls{
	display: flex;
	/*flex-direction: right;*/
	align-content: flex-end;
	justify-content: flex-end;
	
	width: 100%;

}





@media screen and (max-width: 600px){
	
	
	
}


#pageContainer{
	position: fixed;
	display: flex;
	flex-direction: column;
	
	top: 0px;
	width: 100vw;
	/*height: 100vh;*/
	min-height: 100vh;
	
	text-align: center;
	align-content: center;
	align-items: center;
	justify-content: center;
	
	border: 3px solid #73264D;
	
	background-color: transparent;
	/*color: #43d235;*/
	overflow: hidden;
	/*z-index: 10;*/
}

/*********** HEADING CONTAINER **************/


#headingContainer{
	position: fixed;
	display: flex;
	overflow: hidden;
	border: 1;
	
	top: 0px;
	/*left: 0px;*/
	width: 100vw;
	min-height: 20vh;
	max-height: 25vh;
	
	column-gap: 0px;
	row-gap: 5px;
	
	/*grid-template-columns: 80px 680px auto auto 280px;
	grid-template-rows: auto 30px 30px;
	grid-column-start: 1;
	grid-row-end: 6;*/
	
	flex-direction: rows;
	flex-wrap: wrap;
	flex-grow: 1;
	
	background-image: url("../img/garmond_001.png");
	background-position: bottom;
	/*background-position-x: 100px;*/
	background-position-y: -200px;
	background-repeat: no-repeat;
	background-size: cover;
	
	color:  #43d235;
			
	text-align: center;
	align-content: flex-start;
	align-items: flex-start;
	align-items: flex-start;
	justify-content: space-evenly;
	
	border-top: 4px solid #43D235;
	border-bottom: 4px solid #43D235;
	border-right: none;
	border-left: none;
		
	/*z-index: 10;*/
}


#headingContainer:hover{
	background-image: url("../img/garmond_002.png");
	background-position: bottom;
	background-position-y: -100px;
	background-repeat: no-repeat;
	/*background-size: cover;*/
	
	backdrop-filter: blur(10px);
		
	border-top: 4px solid mediumVioletRed;
	border-bottom: 4px solid mediumVioletRed;
	border-right: none;
	border-left: none;	
}


#headingContainer:blur{
	
	background-image: url("../img/garmomd_001.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	
	background-color: transparent;
	color: #FF5050;
	transform: rotateY(180deg);
	border-top: 4px solid #43D235;
	border-bottom: 4px solid #43D235;
	
}


/***************** LOGO *****************************/

#logo{
	position: relative;
	display: grid;
	
	grid-row-start: 0;
	grid-column-start: 0;
	
	left: 0px;
	top: 0px;
	
	min-width: 30px;
	max-width: 30px;
	filter: brightness(130%);
	
	writing-mode: vertical-rl;
	font-size: 24pt;
	font-style: italic;
	font-weight: bold;
	
	text-shadow: 0px 0px 5px purple;	
	border: 1px thick currentColor;
	background-color: transparent;
	color: mediumVioletRed;
	align-items: center;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	align-self: start;
	
	transform: rotate(180deg);
	z-index: 10;
}

#logo:hover::after{
	color: currentColor;
	display: grid;
	filter: brightness(120%);
	content: "\a.co.uk";
	
	

}


/***************** HEADING  *****************/

/*#more{
	display: none;
}*/

#moreT1,#moreT2,#moreT3,#moreT4,moreT5{
	display: none;
}

/*#moreTXT{
	display: none;
}*/

#moreB1,#moreB2,#moreB3,#moreB4,#moreB5,#moreB6{
	background-color: purple;
	color: white;
	width: 80px;
	text-align: center;
	align-items: center;
	margin-left: 50%;
}

/*#moreBTN{
	background-color: purple;
	color: white;
	width: 80px;
	text-align: center;
	align-items: center;
	margin-left: 50%;
}*/


#heading{

	position: relative;
	display: flex;
	flex-direction: column;
	/*grid-column-start: 2;
	grid-row-start: 1;*/
	top: 50%;
	/*left: 50%;
	right: 50%;*/
	color: transparent;
	
	background: linear-gradient(to right,mediumVioletRed,#15259A,purple,#43d235);
	background-clip: text;
	/*border: 2px solid purple;*/
		
	text-align: center;
	align-self: center;
	align-content: center;
	justify-content: center;
		
	filter: brightness(150%);
	-webkit-background-clip: text;	
	-webkit-text-fill-color: transparent;
	border: purple 1px;
	width: 1024px;
	
}


#mainHeading{
	
	display: inline;
	font-size: 26pt;
	top: 5px;
	
	filter: brightness(60%);
	color: transparent;
	text-transform: uppercase;
	
	width: 1024px;
	background: linear-gradient(to right,mediumVioletRed,#15259A,#43d235,lawnGreen);
	
	-webkit-text-stroke: 2px !important;
  	-webkit-text-stroke-color: linear-gradient(to right,mediumVioletRed,#15259A,#43d235,lawnGreen) !important;
		
	-moz-text-fill-color: transparent;
	-moz-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;	
	background-clip: text;
	
	text-shadow: 2px 2px 5px linear-gradient(to right, mediumVioletRed, #15259A, #43d235, lawnGreen);
			
	opacity: 1.0;
	z-index: 10;
}

#mainHeading i:hover{
	transform: translate(0,6px);
}


#subheading{
	font-size: 14pt;
	color: transparent !important;
	
	background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44);
			
	-moz-text-fill-color: transparent;
	-moz-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;	
		
	-webkit-text-stroke: 1px;
  	-webkit-text-stroke-color: black;
	background-clip: text;
	
	opacity: 1.0;
	clear: left;
}


#cameraBox{
	position: relative;
	display: none;
	grid-row-start: 1;
	grid-column-start: 3;
}



#topNavBar{
	position: absolute;
	
	display: flex;
	/*grid-template-rows: 80px 90px 90px 90px 90px 90px 90px 90px 90px;
	grid-template-rows: 30px*/
	top: 0px;
	left: 5px;
	right: 5px;
	width: 100vw;
	border: 1;
	
	flex-direction: row;
	align-content: flex-end;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-self: flex-end;
	
	right: 5px;
		
	white-space: wrap;
	border: purple;
	color: white;
}


#SFCAM{
	position: relative;
	display: flex;
	align-self: flex-end;
		right: 0px;
	top: 0px;
	
	width: 600px;
	height: 400px;
}


/******************* TOPMENU **************************/


#menuContainer{
	top: 15vh;
	position: absolute;
	display: flex;
	flex-direction: row; 
	width: 100vw;
	min-height: 30px;
	max-height: auto;
	border-radius: 0px 0px 10px 10px;
	/*background: linear-gradient(to right, #43d235, #156584);*/
	
	
}

#menuContainer::last-child{
	float: right;
	align-self: right;
	right: 0px;
}

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


#topMenu{

	position: relative;
	display: none;
	overflow: hidden;
	
	width: 100vw;
	vertical-align: bottom;
	left: 0px;
	top: 0px;
	flex-wrap: wrap;		
	/*align-content: center;*/
	align-items: baseline;
	font-weight: 800;
	
	background: transparent;
	background-image: transparent;
		
	text-align: center;
	justify-content: left;	
	border-bottom: 3px solid #FF5050;
	
	white-space: wrap;
	border-top: 2px thick solid;
		
	opacity: 1.0;
	/*z-index: 10;*/
}

#topMenu:last-child{
	float: right;
	align-self: right;
	
	right: 0px;
}

#topMenu:nth-last-child(){
	float: right;
	align-self: right;
	
	right: 0px;
}





#topMenu>.menuItems{

	background-color: #43d235;
	color: #660033;
		
	vertical-align: bottom;
		
	width: 80px;
	min-height: 30px;
	font-size: 9pt;
	font-weight: 800;
	border: 2px solid #e5007d;
	
	/*align-items: baseline;*/
}


#topMenu>.menuItems:hover{
	
	vertical-align: bottom;
	/*transition: all 2s ease-in-out;*/
	box-shadow: 0px 0px 2px mediumVioletRed;
	
	backdrop-filter: blur(8px);
	 
	background-color: #660033;
	color: #ff5050;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	
	opacity: 1.0;
			
}


#topMenu>.menuItems span:hover::before{
	
	vertical-align: bottom;
	bottom: 0px;
	
}

#topMenu .menuItems span:hover::after{
	content: '\2B9F'; 
}


#topMenu.menuItems::last-child{
	display: flex;
	right: 0px;
	float: right;
	
	background-color: yellow;
	align-self: flex-end;
	
}

#topmenu.menuItems::first-child{
	/*background-color: purple;*/
}

/************ SUB MENU ***************/


#subMenu{
	position: absolute;
	display: flex;
	overflow: hidden;
	flex-direction: row;
	bottom: 5vh;
	left: 0px;
	width:100vw;
	height: 5vh;
	min-height: 5vh;
			
	background-color: linear-gradient(to right, #73264d, #660033,#e5007d);
	color: transparent;
	
	background-clip: text;
	z-index: 2000;	
	text-align: center;
	vertical-align: bottom;
	align-content: center;
	align-items: center;
	justify-content: center;
	opacity: 1.0;
}


#subMenu:has(A){
	background-color: #cc0066;	
	color: #660033/*purple*/;
}



#subMenu BUTTON{
	position: relative;
	align-self: center;
	background-color: #43d235;
	color: #660033;
	
	font-weight: 700;
	vertical-align: bottom;
	width: 100px;
		
	border: 1px solid currentColor;
	
	opacity: 1.0;
	transition: background 3s;
		
}


#subMenu BUTTON:hover{

	background-color: #660033;
	vertical-align: bottom;
	border: none;
	border-top: 2px solid #FF5050;
	border-bottom: 2px solid #FF5050;
	font-weight: 800;
	color: #ff5050;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;	
	opacity: 1.0;
}


#subMenu BUTTON:blur{
	color: hotpink;	
	opacity: 1.0;

}

/***************************** POPUP BOXES ****************************/

#weatherBox{
	display: none;
	z-index: -1;
}

#weatherBox:target{
	position: absolute;
	display: flex;
	flex-direction: column;
	flex: 760px 40px 800px;
	background-color:  white;
	color: black;
		
	width: 800px;
	height: 100%;
	
	align-self: center;
	z-index: 10;
	transform: translate(50%,50%);
	transition: width 2s,height 3s;
}

#SFBox{
	
	display: none;
	z-index: -1;
	
}

#SFBox:target{
	position: absolute;
	display: flex;
	flex-direction: column;
	flex: 0 0 600px;
	background-color:  white;
	color: black;
	width: 600px;
	height: 400px;
	top: 50%;
	left: 50%;
	z-index: 10;
}
#SFBox:blur{
	display: none;
}


/****************** BODY CONTENT ****************/

#IRC_FRAME{
	position: relative;
	width: 1280px;
	height: 600px;
}


#bodyContainer{

	/*display: none;*/
	position: absolute;
	display: flex;
	flex-direction: column;
	background-image: url('../img/meSFWinter.jpg');
	background-size: cover;
	
	top: 20vh;
	width: 100vw;
	/*height: 100%;*/
	max-height: calc(100%-15vh); /*63vh;*/
	margin: auto;
		
	text-align: center;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: center;
		
	columns: 1;
	-webkit-columns: 1;
  	-moz-columns: 1;
  	
  	-webkit-backdrop-filter: blur(8px);
  	-moz-backdrop-filter: blur(8px);	
	background-filter: blur(8px);
	backdrop-filter: blur(8px);
	/*filter: blur(8px);*/
	
	overflow: scroll;
	opacity: 1.0;
	border-top: thick inset mediumVioletRed;
	border-bottom: thick inset mediumVioletRed;
	border-left: none;
	border-right: none;
	bottom: 0px;
}


#bodyOverlay{
	position: absolute;
	width: 100%;
	height: 100%;
	min-height: 100%;
	/*max-height: 100%;*/
	
	background:  rgba(0,0,0,0.4);
	
	background-filter: blur(0);
	backdrop-filter: blur(0);
	
	-webkit-filter: blur(0);
	-moz-filter: blur(0);	
	filter: blur(0);
	
	z-index: 10;
}


#bodyContent{
	position: relative;
	display: flex;
	flex-grow: 1;
	flex-direction: column;	
	
	width: 90vw;
	/*top: 0px;*/
	min-height: calc(100vh)/* 100%*//*68vh*/;
	/*max-height: calc(100%-8vh)/*68vh;*/
	margin: auto;
	
	background-image: transparent;
	
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	backdrop-filter: blur(8px);	
	filter: blur(0px);
	
	align-content: center;
	
	overflow: scroll;
			
	border-left: 10px solid #660033;	
	border-right: 10px solid #660033;
	 
	background: linear-gradient(to bottom, #f32170, #ff6b08, #cf23cf, #eedd44, #43d235, #cc0066, #660033);
	color: transparent;
	
	-moz-text-fill-color: linear-gradient(to bottom, #f32170, #ff6b08, #cf23cf, #eedd44, #43d235, #cc0066, #660033);
	-moz-text-stroke: 1px !important;
	-moz-text-stroke-color: transparent !important;
	
	-webkit-text-fill-color: linear-gradient(to bottom, #f32170, #ff6b08, #cf23cf, #eedd44, #43d235, #cc0066, #660033);		
	-webkit-text-stroke: 1px !important;
	-webkit-text-stroke-color: transparent !important;
	
	
	 mask-mode: alpha;

	-moz-background-clip: text;
	-webkit-background-clip: text; 
	background-clip: text;
		
	overflow-anchor: auto;
	overflow: auto;
	z-index: 100;
	top: 0px;
	bottom: 8vh;
}

#timeline{
	position: absolute;
	min-width: 100%;
	max-width: 100%;
	height: 100%;
	
	margin: 0 auto;
	z-index: 100;
	width: 6px;
	left:;
}

#timeline::after{
	content: '';
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 8px;
	background: linear-gradient(to bottom, #f32170, #ff6b08, #cf23cf, #eedd44, #43d235, #cc0066, #660033);
	
	left: 20px;
		
}

.next{
	
	width: 100%;
	flex-direction:  rows;
	/*background-color: yellow;*/
	top: 25px;
	padding-left: 40px;
	padding-right: 15px;
	padding-top: 40px;
	padding-bottom: 15px;
		
}



.next::before{
	content: "";	
	height: 0px;
	position: absolute;
	top: 0px;
	left: 20px;
	width: 20px;
	height: 20px;
	
	z-index: 1;
	right: 30px;
	background-color: gold;
	border: medium solid purple;
	border-width: 1px;
	border-radius: 50%;
	
}

.next::before:hover{
	width: 30px;
	height: 30px;
		
	background-color: purple;
	border: medium solid gold;
	border-width: 2px;
	border-radius: 50%;
	
}
.next::after{
	content: "";
	position: absolute;
	
	

}

.content{
	width: 100%;
	flex-direction: column;
	border: 2px solid mediumVioletRed;
	/*background: conic-gradient(mediumVioletRed,15259A,#43d235,lawnGreen,#cc0066,#660033); */
	background: linear-gradient(to right,mediumVioletRed,#15259A,#43d235,lawnGreen, #cc0066,#660033);
	-moz-text-fill-color: transparent/*linear-gradient(to right,mediumVioletRed,#15259A,#43d235,lawnGreen)*/;
	-moz-background-clip: text;
	
	-webkit-text-fill-color: transparent/*linear-gradient(to right,mediumVioletRed,#15259A,#43d235,lawnGreen)*/;
	-webkit-background-clip: text;
	text-align: left;	
	background-clip: text;
	padding: 10px;
	border-radius: 0 0 20px 0;
		
}


#bodyContent p{

	display: inline-flex;
	flex-direction: column;
	
	text-align: center;
	font-size: 10pt;
	
	background-image: transparent;
	background-color: transparent;
	
	backdrop:filter: blur(8px);
	z-index: 40;	
	opacity: 1.0;
	over		
}


#bodyContent P::first-letter{
	text-indent: 50px;
	font-size: 26pt;
	vertical-align: top;
}



#IRCBOX{



}