:root{
	--fifth-space: 5lvw; 
	--10-space: 10lvw; 
	--20-space: 20lvw; 
	--90-space: 90lvw;
}

html{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	background: #f0f;
	overflow-x:hidden;
	box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	overflow-x:hidden;
}

div{
	height: auto;
	width: auto;
}


/* /////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Helper mearsurement variables for responsive sizes */

div.pad-1st{
	padding:1lvw;
}

div.pad-2nd{
	padding:2lvw;
}
div.pad-3rd{
	padding:3lvw;
}
div.pad-5th{
	padding:var(--fifth-space);
}
div.pad-5th{
	padding:6lvw;
}
div.pad-10th{
	padding:var(--10-space);
}

div.pad-vertical-2{
	padding-top:2lvw;
	padding-bottom:2lvw;
}
div.pad-vertical-3{
	padding-top:3lvw;
	padding-bottom:3lvw;

}
div.pad-vertical-10th{
	padding-top:var(--10-space);
	padding-bottom:var(--10-space);
}
div.pad-vertical-11th{
	padding-top:11lvw;
	padding-bottom:11lvw;
}
div.pad-vertical-12th{
	padding-top:12lvw;
	padding-bottom:12lvw;
}
div.pad-vertical-5th{
	padding-top:5lvw;
	padding-bottom:5lvw;
}
div.pad-vertical-6th{
	padding-top:6lvw;
	padding-bottom:6lvw;
}

div.pad-vertical-20th{
	padding-top:var(--20-space);
	padding-bottom:var(--20-space);
}

div.mar-2nd{
	margin:2lvw;
	display: block;
}
div.mar-5th{
	margin:var(--fifth-space);
}
div.mar-10th{
	margin:var(--10-space);
}
div.mar-side-10th{
	margin:var(--10-space);
}
div.mar-vertical-5th{
	margin-top:var(--fifth-space);
	margin-bottom:var(--fifth-space);
}
div.mar-vertical-10th{
	margin-top:var(--10-space);
	margin-bottom:var(--10-space);
}

div.mar-vertical-20th{
	margin-top:var(--20-space);
	margin-bottom:var(--20-space);
}
div.min-height-5th{
	min-height:var(--fifth-space);
}

div.height-10th{
	height:var(--10-space);
}

div.height-12th{
	height:12lvw;
}
div.height-12th-2px{
	height:12lvw;
	width:2px;
}
div.height-10th-2px{
	height:10lvw;
	width:2px;
}
div.pad_r50-border{	
	width: auto;
	margin: 0;
	padding:0;
	border: var(--10-space) ridge #00f;
	}


div.pad_r10{	
	width: auto;
	margin: 0;
	padding:var(--10-space);
	}

div.pad_r20{	
	width: auto;
	margin: 0;
	padding:var(--10-space);
	}3
div.pad_r5{	
	width: auto;
	margin: 0;
	padding:var(--fifth-space);
	}
div.mar_r10{	
	width: auto;
	margin:var(--10-space);
	display: inline-block;
	}
div.mar_r5{	
	width: auto;
	margin:var(--fifth-space);
	display: inline-block;
	}
div.mar_r2{	
	width: auto;
	margin:2lvw;
	display: inline-block;
	}


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


.center{
	text-align: center;
}



.blok-container{
	text-align: center;
}

.blok-inline{
	height:auto;
	width: 100%;
}

.blok-container img{	
	height:auto;
	width: 100%;
}


.flex-item{
 	flex:1;
 	object-fit: contain;
 	text-align: center;
}

.flex-item img{
	max-width:100%;
	height:auto;
	flex:1;
	object-fit: contain;
}





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


/* Mobile and smaller screen adjustments */
 @media screen and (max-width:650px){



/* Optimized image files */



 /* Larger images files */

 /* From top of page down */



.fluid{
   background-image: url(pretty/fluid-80-60.gif);
   background-size: 80px 60px;  
   background-repeat: round;
}


.pad_r50-border{	
	width: auto;
	margin: 0;
	padding:0;
	border: var(--10-space) ridge #00f;
	}
	


.none{	
	width: auto;
	margin:  4lvw;
	padding: 4lvw;
	display: flew;

	}

.none-inner{	
	width: auto;
	margin: 5lvw;
	padding:5lvw 5lvw;

	}


/*
.dash{	
		width: auto;
		height: auto;
		margin: 10lvw 0;
		padding: 0;
  	display: inline-flex;
  	justify-content: center;
    border: 3lvw dashed #000; 
	}

because of the mobile safari bug where computed partial pixel values for dashed border thickness do not display -
the dashed border thickness will be a fixed value: 13 or 15 (about 3lvw) for mobile/under 650/500 pixels wide
and 30 for the large screens - I will try to keep the margin values computed/responsive so that its easier
to keep track of the total/max width. The values with be set in the breakpoints.


.dash{	
		width: auto;
		height: auto;
		margin: 40px 13px;
		padding: 0;
		display: inline-flex;
		justify-content: center;
		border: 12px dashed #000; 
	}
*/

.dash{	
		width: auto;
		height: auto;
		margin: 10lvw 0;
		padding: 0;
  	display: inline-flex;
  	justify-content: center;
    border: 13px dashed #000; 
	}
.folder{
   background-image: url(pretty/folder-20.gif); 
  /* background-size: 20px 21px; */ 
    background-size: 4lvw auto;
   background-repeat: round;
}





}  

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

/* Larger and Desktop screen defaults */


@media screen and (min-width:651px){
 

 /* Larger images files */

.fluid{
  background-image: url(pretty/fluid-120-160.gif);
  background-size: 120px 160px;  
  background-repeat: round;
}

.none{	
	width: auto;
	margin: 25px;
	padding: 25px;
    display:flow; 
	}
.none-outer{	
	width: auto;
	margin: 50px;
	padding: 50px 25px;
	display: flex;
	 justify-content: center;
  
	}
.none-inner{	
	width: auto;
	margin: 25px;
	padding:25px 100px ;

	}

.dash{	
	width: auto;
	height: auto;
	margin: 10lvw 0;
	padding: 0;
  display: inline-flex;
  justify-content: center;
  border: 26px dashed #000; 
	}


} 


/* END BREAKPOINTS */

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


/* COMMON IMAGES */




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

/* TOP PAGE */


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

/* VWELCOME TO MY HOME PAGE */

			.top-purple-to-teal{	
				width: auto;
				height: auto;
				margin: 0;
				padding:var(--fifth-space);
				background: #CE00BF;
				background: -moz-linear-gradient(top, #CE00BF 0%, #09FFC2 73%, #F0FF6A 100%);
				background: -webkit-linear-gradient(top, #CE00BF 0%, #09FFC2 73%, #F0FF6A 100%);
				background: linear-gradient(to bottom, #CE00BF 0%, #09FFC2 73%, #F0FF6A 100%);
				aspect-ratio: 1;
				}


.pad_r50{	
	width: auto;
	margin: 0;
	padding:var(--fifth-space);
	}
													.pink{
														background-color: #f0f;
													}

				.email-image{
				  background-image: url(pretty/satellite14.gif);
				  /* background-size: 107px 35px; 
				  background-image: url(pretty/email5_e0.gif);
				  background-image: url(pretty/tape8.gif);*/
				  background-size:  auto 2.5lvw ; 
				  background-repeat: round;
				}

											.yellow{
												 	background-color: #FFC130;
												 	background-color: #FCB408;
												 	background-color: #FCC308;
												 	background-color: #FCC708;
												 	background-color: #FCCB08;
												 	background-color: #FCE008;
											}

				.computer-apple{
				  background-image: url(pretty/apple-computer.gif);
				  /* background-size: 27px 30px; */
				  background-size: 5lvw auto ;
				  background-repeat: round;
				  f
				}

					.welcome-text{
				  background-image: url(pretty/welcome-text.gif);
				  /* background-size: 27px 30px; */
				  background-size: auto 8lvw ;
				  background-repeat: round;
				  f
				}


				.intranet{
				  background-image: url(pretty/intranet-199-52.gif);
				  /* background-size: 199px 52px; */
				  background-size: auto 5lvw  ; 
				  background-repeat: round;
				  background-clip: padding-box;
				}

												.green-back{	
												 	background-color: #0f0;
												 }

				.sat{
					background-image: url(pretty/globe-welcome.gif);
					/* url(pretty/computer-love.gif);
				background-image: url(pretty/tape8.gif);

				url(pretty/equalizer11.gif);
					background-image: url(pretty/emailspin1_e0.gif);
						background-image: url(pretty/cd45.gif);
					background-image: url(pretty/satellite14.gif);
				  background-image: url(pretty/jsnrevcwarp_e0.gif);
				  background-image: url(pretty/computer11.gif); */

				 	background-size:   auto 5.6lvw ;
				  background-repeat: round; 
				  border:1px solid #00FF00;
				  background-clip: padding-box;

				}

.gold-frame {
 	aspect-ratio: 1;
 	border: 10px ridge rgb(255, 190, 0);
 	border: 10px ridge rgb(255, 183, 0);
 	width: auto;       
 	padding:0;
 	margin:0;
 	display: flex;
 	justify-content: center;
 	align-content: center;
 	align-items: center;
}

.gold-frame > .word{
 	align-items: center;
 	align-content: center;
 	justify-content: center;
}

.gold-frame > .word > .letter{
 	align-items: center;
 	align-content: center;
 	justify-content: center;
 	display: flex;
 }	

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

/* VISUAL */
			

					.trippy{
					   background-image: url(pretty/pattern524.gif);
					   background-size: auto 7lvw;  
					   background-repeat: round;
					}

.empty{	
	width: auto;
	margin:0;
	padding: 0;
	display:block; 
	}

.gold-frame-large {
	border: 3lvw inset rgb(255, 190, 0);
	border: 3lvw inset rgb(255, 183, 0);           
  width: auto;       
 	padding:0;
 	margin:0;
 }
						.surfer{
							background-image: url(pretty/computer_surfing_md_clr.gif);
							background-size: auto 5lvw;
							background-repeat: round;
						}

.word{
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: flex-end;
	 }

.letter{
	 	padding: 0;
	 	margin: 0;
	 }

.letter img{
	 	max-width: 100%;
	 	max-height: 100%;
	 }
														
.ryan{	
	width: auto;
	height: auto;
  margin:0;
  padding: 20lvw 15lvw 15lvw 10lvw;
	background-image: url(pretty/trippy-drip.jpg);
	background-repeat: repeat;
	display:block; 
	align-content: center;
	}

.empty-grey{	
	width: 75lvw;
	height: auto;
	margin:0;
	padding: 0;
	background: #bbb; 
  display: inline-flex;
  justify-content: center;
	}

.empty-spacer{	
	width: 75lvw;
	height: auto;
	margin:0;
	padding: 0; 
	}

.visual-comp{
	background:
	url(pretty/visual-pink-150-comp.gif) -5lvw -5lvw repeat,
	url(pretty/visual-pink-150-comp.gif) -5lvw 0 repeat,
	url(pretty/visual-pink-150-comp.gif) -5lvw 5lvw repeat,
	url(pretty/visual-pink-150-comp.gif) 10lvw 0 repeat,
	url(pretty/visual-pink-150-comp.gif) 10lvw 5lvw repeat,
	url(pretty/visual-pink-150-comp.gif) 10lvw 10lvw repeat;
	background-size: auto 15lvw;		
	border: 3px solid #0000FF;
	width:auto;
}

img.visual-back{
	padding: 10lvw 5lvw;
	margin: 0;
	max-width: 70lvw ;
}

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

/* DIGITAL */


.none-green{	
	width: auto;
	height:auto;
	margin: 0;
	padding: var(--fifth-space);
	background-color: #0f0;  
	
	display:block;
/* display: flow-root;*/
	}

						.computer3d{
						   background-image: url(pretty/computer3d.gif); 
						   background-size: auto 7lvw;
						   background-repeat: round;
						}

.none-outer{	
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	display: flow-root;
/*display: flex;
  justify-content: center;*/
	}

/* .dash details are in breakpoints */

.dash{	
	width: auto;
	height: auto;
	margin: 10lvw 0;
	padding: 0;
  display: inline-flex;
  align-items: center;
 	justify-content: center;
	}

.dash > .word{
	align-items: center;
 	justify-content: center;
}

.cat{
	background-image: url(pretty/blink-cat-70.gif);
  background-size:  5lvw auto;
  background-repeat: round;
}

.letter-none{
	 	padding: 0;
	 	margin: 0;
	 }

img.digital-word{
 width:60lvw;
}

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

/* MATERIAL */


.brik-grey{	
	width: auto;
	margin: 0;
	padding: 5lvw 2lvw;
  border: 5lvw solid #000;  
	background: #bbb;
	background-image: url(pretty/pattern461.jpg);
	display: block;
	align-content: center;
	}

.brik_last-wide-green{	
	width: auto;
	margin: 0;
	padding: 8lvw 5lvw;
  border: 5px solid #ff00ff;   
	display: inline-block;
	/*justify-content: center; */
	 align-content: center; 
  background-color: #00ff00;
	}

.folder{
   background-image: url(pretty/folder.gif); 
   background-size: 30px 32px;  
   background-repeat: round;
}


/*
.ridge-pad-re{	
	width: auto;
   border: 2lvw ridge goldenrod;  
   padding:3lvw;
   margin:6lvw 1lvw;
   display:inline-flex;
   justify-content: center;
   align-items: center;
}
*/

.ridge-pad-re{	
	width: auto;
   border: 2lvw ridge goldenrod;  
   padding:3lvw;
   margin:5lvw 1lvw;
   display:inline-flex;
   justify-content: center;
   align-items: center;
}

.balls{
	background-image: url(pretty/balls-256-256.gif);
	background-size: 256px 256px;
	background-repeat: repeat;
}

.ridge-none{	
	width: auto;
	text-align: center;
	align-content: conter;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 1lvw ridge goldenrod;  
	}

.ridge-none img{
	width:50lvw;
	height:auto;
	}

.fabric{
	 background-image: url(pretty/wicker-432-432.jpg);
	 background-size: contain;
	 }


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

/* CULTURE */


/*
.sculpture{
	width: auto;
	background-image: 
	url(pretty/sculpture-med-2.gif),
	linear-gradient(to bottom, #CE00BF 0%, #09FFC2 73%, #F0FF6A 100%);
	background-repeat: round, no-repeat;
	background-size: 57px 121px, auto;
	height:auto;
} */



.mod-blok{
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
}


.sculpture{
	background-image: url(pretty/sculpture-comp.gif),
										linear-gradient(to bottom, #CE00BF 0%, #09FFC2 73%, #F0FF6A 100%);
	background-size:10lvw auto, auto;
	background-repeat: round, no-repeat;
}

.blok-wrapper{
	width: auto;
	height: auto;
	display:block;
	text-align: center;
}


.coffee{

	background-image: url(pretty/coffee.gif), url(pretty/marble-square.jpg);
	/* image 122px 105px;*/
	background-repeat: round, repeat;
	background-size: 10lvw auto, contain;
	/*background-origin: content-box;*/

}

.blok-flex{
	height: auto;
	width: auto;
	display:inline-flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	object-fit: contain;
}


.letter-flex{
	flex: 1 1 auto;
	padding:5px;
	display:inline-flex;
}


.letter-flex img{
	 max-width: 100%;
	 max-height: 100%;
}

.culture-word{
	 flex:4 1 auto;
}

.culture-word img{
	 min-width:150px;
}

.culture-dancers{
	 height:10%;
	 width:auto;
	 align-self: flex-end;
	 }

.culture-baby{
	 height:10%;
	 width:auto;
	 align-self: flex-start;
	 }

.culture-baby img{
 		height:10%;
		width:auto;
		align-self: flex-start;
		}

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

/* SOCIAL PRACTICES */


.hearts{
	background-image: url(pretty/RZjct2u.gif),
	 						url(pretty/442.gif);
}

.cats{
	background-image: url(pretty/graph.gif), url(pretty/cats.jpg); 
								background-size: 32px 32px, auto;
								background-repeat: round;
}

.merry{
	background-image: url(pretty/merry-sm.gif);
	/*background-size: 105px 77px;*/
	background-size: 10lvw auto;
	background-repeat: round;
}

.bee{
	background-image: url(pretty/bee.gif),
										/*linear-gradient( rgba(0,255,0,.8), rgba(255,0,255,.9), rgba(255,0,255,.9),rgba(0,255,0,.8));*/
										radial-gradient( rgba(255,0,255,.9), rgba(255,0,255,.8), rgba(255,0,255,.6), rgba(255,0,255,.1), rgba(255,0,255,0)); 
	background-size: 100px 100px, auto;
	background-repeat: round;
}



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

/* TOOLS */



.grid-container{
	display: grid;
	grid-template-columns: repeat(15, 1fr);
	grid-template-rows: repeat(10, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.grid-container > div {
  text-align: center;
  display: inline;
}

.column1 {
  grid-area: 1 / 1 / 11 / 2;
}
.column2 {
  grid-area: 1 / 2 / 11 / 3;
}
.column3 {
  grid-area: 1 / 3 / 11 / 4;
}
.column4 {
  grid-area: 1 / 4 / 11 / 5;
}
.column5 {
  grid-area: 1 / 5 / 11 / 6;
}
.column6 {
  grid-area: 1 / 6 / 11 / 7;
}
.column7 {
  grid-area: 1 / 7 / 11 / 8;
}
.column8 {
  grid-area: 1 / 8 / 11 / 9;
}
.column9 {
  grid-area: 1 / 9 / 11 / 10;
}
.column10 {
  grid-area: 1 / 10 / 11 / 11;
}
.column11 {
  grid-area: 1 / 11 / 11 / 12;
}
.column12 {
  grid-area: 1 / 12 / 11 / 13;
}
.column13 {
  grid-area: 1 / 13 / 11 / 14;
}
.column14 {
  grid-area: 1 / 14 / 11 / 15;
}
.column15 {
  grid-area: 1 / 15 / 11 / 16;
}
.area16 {
  grid-area:4 / 4 / 8 / 13;
}

.area16 img{
max-width: 100%;
height: auto;
/*mix-blend-mode: exclusion;*/
}



.hammer{
	background-image: url(pretty/hammer.gif), url(pretty/Horiz_Bar.jpg);
	background-position:center;
	 background-size:  6.66lvw auto;
	  background-repeat: round;
}

.chair{
	background-image: url(pretty/chair.gif), url(pretty/t-l.jpg);
	background-position:center;
	background-size:  6.66lvw auto;
	 background-repeat: round;
}

.gears{
	background-image: url(pretty/gears.gif), url(pretty/pattern425.gif);
	background-position:center;
	 background-size:  6.66lvw auto;
	  background-repeat: round;
}

.stapler{
	background-image: url(pretty/stapler.gif), url(pretty/pyramid.gif);
	background-position:center;
	background-size:  6.66lvw auto;
	 background-repeat: round;
}

.screwdriver{
	background-image: url(pretty/screwdriver-sm.gif), url(pretty/medbluesatinbg.jpg);
	background-size: auto 80px;
	background-position:center;
}
.pin{
	background-image: url(pretty/pin.gif), url(pretty/multi175.jpg);
	background-position:center;
	background-size:  6.66lvw auto;
	  background-repeat: round;
}
.saw{
	background-image: url(pretty/saw.gif), url(pretty/pattern361.gif);
	background-position:center;
	background-size:  6.66lvw auto;
	 background-repeat: round;
}
.key{
	background-image: url(pretty/key.gif), url(pretty/button3.gif);
	background-position:center;
	background-size:  6.66lvw auto;
	  background-repeat: round;
}
.bolt{
	background-image: url(pretty/bolt.gif), url(pretty/graybrickwall.jpg);
	background-position:center;
	background-size:  6.66lvw auto;
	  background-repeat: round;
}
.flying-toaster{
	background-image: url(pretty/flying-toaster.gif), url(pretty/pattern425.gif);
	background-position:center;
	 background-size: 6.66lvw auto;
	 background-repeat: round;
	  
}
.satellite{
	background-image: url(pretty/satellite.gif), url(pretty/bricks-teal.gif);
 background-size: 7.6lvw auto;


}
.flip-phone{
	background-image: url(pretty/flip-phone.gif), url(pretty/Horiz_Bar.jpg);
	background-position:center;
	background-size:  6.66lvw auto;
	background-repeat: round;
}

.clip{
	background-image: url(pretty/clip.gif), url(pretty/cubicyello.jpg);
	background-position:center;
	background-size:  6.66lvw auto;
	  background-repeat: round;
}
.clipy{
	background-image: url(pretty/clipy.gif);
	background-position:center;
	background-size:  6.66lvw auto;
	  background-repeat: round;
}

.cyan-round{
	  background-image: url(pretty/egAc8h7_d.gif);
	  background-size: auto 1.5lvw;
	/* background-image: url(pretty/24517.png);
	  background-image: url(pretty/pyramid.gif);
	   background-image: url(pretty/pattern461.jpg);
	   background-image: url(pretty/pattern11.jpg);*/
	   padding:2lvw 4lvw;
	   border-radius: 1rem;
	   border:2px solid #14161e;
	   box-shadow:6px 6px 0 #14161e;
	 }

.raised-box{
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}


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

/* TECHNOLOGIES */


.circuit-board{
	background-image: url(pretty/circuit-board.gif);
}

.crystal-ball{
	background-image: url(pretty/crystal-ball.gif);
	background-size: auto 6lvw;
	 background-repeat: round;
}
.typing-computer{
	background-image: url(pretty/TypingComputer.gif);
	background-size: auto 12lvw;
	 background-repeat: round;
}

.robot{
	background-image: url(pretty/robot.gif);
	background-size: auto 12.2lvw;
	 background-repeat: round;

}


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

/* MEDIA */



.download{
	background-image: url(pretty/download.gif);
	background-size: auto 3lvw;
	background-repeat: repeat;
}

.trippy-static{
	background-image: url(pretty/trippy-static.gif);
}

.floppy-disk{
	background-image: url(pretty/floppy-disk.gif);
	background-size: auto 6.1lvw;
	 background-repeat: round;
}

.purple-tv-lines{
	background-image: url(pretty/purple-tv-lines.gif);
}


.sparkly-pink-squares{
	background-image: url(pretty/sparkly-sm.gif);
}


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

/* COMMUNICATION */

.cubicyello{
	background-image: url(cubicyello.jpg);
}

.black-with-purple-sparkles{
	background-image: url(pretty/FHlA52R.gif);
}

.wave{
	background-image: url(pretty/wave.gif);
		background-size: auto 6lvw ;
	 background-repeat: round;
}

.phone-talk{
	background-image: url(pretty/talk7.gif);
		background-size: 5lvw auto;
	 background-repeat: round;
}

.greet{
	background-image: url(pretty/greet2.gif), url(pretty/graybrickwall.jpg);
		background-size: 5lvw auto;
	 background-repeat: round;
}

.water-back{
	background-image: url(pretty/06-48-15-574_512.gif), url(pretty/cbg.gif);
	background-size: 10lvw auto, auto;
}

.wave{
	background-image: url(pretty/wave.gif);
}


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

/* DESIGN */


.color-shards{
	background-image: url(pretty/TILE037.gif);
}

.color-splash{
	background-image: url(pretty/pattern73.jpg);
			background-size:  10lvw auto ;
	 background-repeat: round;

}

.gradient-circle{
	background-image: url(pretty/pattern227.gif);
		background-size:  auto 5lvw;
	 background-repeat: round;
}

.color-4-balls{
	background-image: url(pretty/pattern134.jpg);
}
.paper{
	background-image: url(pretty/paper.gif);
	background-repeat: repeat-y;
		background-repeat: round;
}

.green-raster{
	background-image: url(pretty/green-raster.gif);
}
.three-pencils{
	background-image: url(pretty/three-pencils.jpg);
		background-size:  10lvw auto ;
	 background-repeat: round;
}


.slinky{
  background-image: url(pretty/slinky3.gif);
  background-size: 6lvw auto ;
   background-repeat: round;
}


.worker-cd{
  background-image: url(pretty/worker19.gif), url(pretty/FHlA52R.gif);
  background-size: 8lvw auto, 5lvw auto ;
   background-repeat: round;
}



.shapes{
	background-image: url(pretty/shape2.gif);
	  background-size: 10lvw auto ;
	background-repeat: round;
}

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

/* IDENTITY */


.mirror{
	background-image: url(pretty/mirror.gif);
		  background-size: 5lvw auto ;
		background-repeat: round;
}


.eye-sm{
	background-image: url(pretty/eye19.gif);
	  background-size: 5lvw auto ;
}

.spiderman{
	background-image: url(pretty/spiderman6.gif);
		  background-size: 10lvw auto ;
}

.stock-car{
	background-image: url(pretty/car148.gif), url(pretty/green-raster.gif);
	
			  background-size: 10lvw auto ;
			  	background-repeat: round;
}


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

/* Semiotic Networks */


.eyes{
	background-image: url(pretty/eyes.gif);
}

.stuff{
	background-image: url(pretty/pattern45.gif);
}

.noodles{
	background-image: url(pretty/pattern44.gif);
}
.colorful-squares{
	background-image: url(pretty/pattern58.gif);
}

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

/* Research Methodology */



.stars20{
	background-image: url(pretty/stars20.gif);
}

.horizon{
	background-image: url(pretty/019C.jpg);
	background-repeat: round;
}


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

/* Critical Theory */



.pattern36{
	background-image: url(pretty/pattern36.jpg);
}

.pattern40{
	background-image: url(pretty/pattern40.jpg);
}

.cd23{
	background-image: url(pretty/cd23.gif);
	  background-size: 5lvw auto ;
		background-repeat: round;
}


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

/* FUTURING */




.jump-rope{
	background-image: url(pretty/jumprope1.gif);
	background-repeat: round;
}

.beach-ball3{
	background-image: url(pretty/beachball3.gif);
	background-size: 5lvw auto ;
		background-repeat: round;
}

.gradient-pink-diagonal{
	background-image: url(pretty/jumprope1.gif), url(pretty/gradient26704416.png);
	background-size: 5lvw auto ;
}


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

/* About Me */


.question{
	background-image: url(pretty/animated-gifs-question-marks-06.gif.pagespeed.ce.bgbotl-CuO.gif), url(pretty/animated-computer-image-0331.gif), url(pretty/TextureStripe2.jpg);
		background-size:  auto 3lvw, auto 8lvw, auto;
	background-repeat: round;
}

img.aboutme{
	max-width:150px;
	height:auto;
}




.design-on-the-move{
  background-image: url(pretty/BRMYHUH3EZM7DRNRHZPE4JCAMG6DNR55.gif);
 background-size: auto 17lvw  
}

.blak{	
	width: auto;
	margin: 0;
	padding: 0;
	}

.wrap-re{
	display: inline-block;
	margin-bottom: -2lvw;
	padding-bottom:2lvw;
	padding-top:2lvw;
	border: 2lvw ridge #f00; 
	background-image: url(pretty/fluid-sm.gif);
}

.stripe-re{
	 	display: inline-block;
	 	margin: auto;
	 	padding:2lvw;
	 	background: #fff;
	 	border:5lvw ridge #0f0; 
	 }

.frame{
	 	display: inline-block;
	 	margin-top: -80px;
	 	padding: 0px 30px 30px 30px;
	 	border:36px ridge #863C1D; 
	 }

.frame img{
	 	display: flex;
	 	max-width: 100%;
	 	max-height: 100%;
	 }

.telescope{
   background-image: url(pretty/telescope.gif);
    background-size: auto 6.4lvw
}












.grad-linear-white{
	background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,.8),rgba(255,255,255,0)); 

	}	




.graph{
	background-image: url(pretty/graph.gif); 
	background-size: auto 2lvw;
							
}

.chains{
	background-image: url(pretty/misc002.jpg);
}

.blow-up{
	background-image: url(pretty/air-guy.gif);
}

.tv-2{
	background-image: url(pretty/tv-2-sm.gif);
	background-size: auto 50px;
}
.dice{
	background-image: url(pretty/dice-sm.gif);
}


.ballon{
	background-image: url(pretty/hot-air-ballon.gif);
}


.bee2{
	background-image: linear-gradient( rgba(0,255,0,.8), rgba(255,0,255,.9), rgba(255,0,255,.9),rgba(0,255,0,.8)); 
}

.radial {
    background: radial-gradient(#9c27b0 0%, #ff9800 100%);
}



.column-float {
  grid-column: 3/14;
  align-content: center;
  background-image: url(pretty/tools-100.gif);
  background-repeat: no-repeat;
  background-position: center;
grid-row: 1/3;
    align-self: center;
    justify-self: center;

    z-index: 99;
}

.word-top {
  display: grid;
  place-content: center;
  > * {
    grid-area: 1 / 1;
  }
  z-index: 10;
}


.
.word-top img{
  z-index: 2;
  grid-column: 3/14;
  grid-row: 1/3;
  display: column-float;
}

.zig-back{

	background-color: #0000ff;
	opacity: 0.8;
	background: linear-gradient(135deg, #00ff0055 25%, transparent 25%) -13px 0/ 26px 26px, linear-gradient(225deg, #00ff00 25%, transparent 25%) -13px 0/ 26px 26px, linear-gradient(315deg, #00ff0055 25%, transparent 25%) 0px 0/ 26px 26px, linear-gradient(45deg, #00ff00 25%, #0000ff 25%) 0px 0/ 26px 26px;
}

.zig-back2{

	background-color: #ff00ff;
	pacity: 0.8;
	background: linear-gradient(135deg, #00ff0055 25%, transparent 25%) -13px 0/ 26px 26px, linear-gradient(225deg, #00ff00 25%, transparent 25%) -13px 0/ 26px 26px, linear-gradient(315deg, #00ff0055 25%, transparent 25%) 0px 0/ 26px 26px, linear-gradient(45deg, #00ff00 25%, #ff00ff 25%) 0px 0/ 26px 26px;
}
.zig-back3{

	background-color: #e5e5f7;
	opacity: 0.8;
	background: linear-gradient(135deg, #444cf755 25%, transparent 25%) -10px 0/ 20px 20px, linear-gradient(225deg, #444cf7 25%, transparent 25%) -10px 0/ 20px 20px, linear-gradient(315deg, #444cf755 25%, transparent 25%) 0px 0/ 20px 20px, linear-gradient(45deg, #444cf7 25%, #e5e5f7 25%) 0px 0/ 20px 20px;
}



.cowboy_on_computer{
	background-image: url(pretty/Cowboy_on_computer.gif);
}

.raindrops{
	background-image: url(pretty/raindrops.gif);
}

.pizza-transparent{
	background-image: url(pretty/pizza-transparent.gif);
}
.pizzasliceswhtbg{
	background-image: url(pretty/pizzasliceswhtbg.gif);
}
.pinkspark{
	background-image: url(pretty/pinkspark.gif);
}
.diagonal-red-lines{
	background-image: url(pretty/diagonal-red-lines.gif);
}
.cat-box{
	background-image: url(pretty/cat-box.gif);
}
.butterfly{
	background-image: url(pretty/butterfly.gif);
}
.blobz{
	background-image: url(pretty/blobz.gif);
}
.lace-sm{
	background-image: url(pretty/lace-sm.jpg);
}
.water-sm{
	background-image: url(pretty/water-sm.gif);
}



.magic-wand{
	background-image: url(pretty/magic-wand.gif);
	background-size: auto 6lvw;
}



.equalizer{
	background-image: url(pretty/equalizer.gif);
}






.lil-computer{
	background-image: url(pretty/lil-computer.gif);
}


.folder-hand{
	background-image: url(pretty/folder-hand.gif);
	background-size: auto 8lvw;
}


.cdbg{
	background-image: url(pretty/cdbg.jpg);
}
.cds{
	background-image: url(pretty/cds.jpg);
}



.rainbow-static{
	background-image: url(pretty/rainbow-sm.gif);
}

.rainbow-squares{
	background-image: url(pretty/rainbow-squares.gif);
}

.rainbow-balls{
	background-image: url(pretty/rainbow-balls.gif);
}

.red-cartoon-static{
	background-image: url(pretty/red-cartoon-static.gif);
}

.red-satin-static{
	background-image: url(pretty/red-satin-static.gif);
}

.red-wavy-lines{
	background-image: url(pretty/red-wavy-lines.gif);
}


.trippy-folds{
	background-image: url(pretty/trippy-folds.gif);
}


.spots{
	background-image: url(pretty/spots.jpg);
}



.smileys{
	background-image: url(pretty/smileys03.gif);
}

.glass{
	background-image: url(pretty/glass.gif), url(pretty/24517.png);
	background-position:center;
	 background-size: auto 6.7lvw;
}

.key2{
	background-image: url(pretty/key2.gif), url(pretty/button3.gif);
	background-position:center;
	 background-size: auto 7lvw;
}

.film{
	background-image: url(pretty/film.gif), url(pretty/Horiz_Bar.jpg);
	background-position:center;
	 background-size: auto 6.7lvw;
}

.none-response{	
	width: auto;
	margin: var(--fifth-space);
	padding: var(--fifth-space);
     
	}

.none-less{	
	width: auto;
	margin: 25px;
	padding:0;
	}
.none-wide{	
	width: 100%;
	margin: 25px;
	padding: 45px;
     
	}

.none-auto{	
	width: auto;
	margin:85px 25px;
	/* padding: 45px; */
     
	}


.empty-word{	
	width: 100%;
	margin:0;
	padding: 0;
	display: flow-root;
	background-color: green;
     
	}
.empty-neg{	
	width: auto;
	margin:-20px 0 0 0;
	padding: 0;
     
	}	
.empty-green{	
	width: auto;
	margin:0;
	padding: 0;
	background-color: #0f0;
     }
.brik{	
	width: auto;
	margin: 0;
	padding: 25px;
    border: 25px solid #000;     
	}


.brik-green{	
	width: auto;
	margin: 0;
	padding: 25px;
    border: 25px solid #0f0;     
	}
	
.brik_last{	
	width: auto;
	margin: 0;
	padding:0;
    border: 25px solid #000;     
	}

.brik_last-wide{	
	width: auto;
	margin: 0;
	padding: 30px 10px;
    border: 25px solid #000;   
   display: flex;
    justify-content: center;

	}



		
.blok_r50{	
	width: auto;
	margin: 0;
	padding: 45px 50px;
    border: 50px solid #f00;  
    background: #CE00BF;
	background: -moz-linear-gradient(top, #CE00BF 0%, #09FFC2 73%, #F0FF6A 100%);
	background: -webkit-linear-gradient(top, #CE00BF 0%, #09FFC2 73%, #F0FF6A 100%);
	background: linear-gradient(to bottom, #CE00BF 0%, #09FFC2 73%, #F0FF6A 100%);
	}
	
.brik_r50{	
	width: auto;
	margin: 0;
	padding: 45px 50px;
    border: 50px solid #f00;     
	}
.brik_r50_last{	
	width: auto;
	margin: 0;
	padding: 10px 20px;
    border: 50px solid #f00;  
    overflow: hidden;   
	}

.brik_r50_last img{	
display: flex;
	max-width: 100%;
	max-height: 100%;

	}
	
.blok_y50d{	
	width: auto;
	margin: 0;
	padding: 50px;
    border: 50px groove #ff0;  
    -moz-box-shadow: 3px 3px 4px #000;
	}
	
.brik_y50d{	
	width: auto;
	margin: 0;
	padding: 50px;
    border: 50px ridge #ff0;  
    -moz-box-shadow: 3px 3px 4px #000;   
	}
.brik_y50d_last{	
	width: auto;
	margin: 0;
	padding: 15px;
    border: 70px ridge #ff0; 
    -moz-box-shadow: 2px 2px 8px #000;    
	}
	
.blok_b50d {	
	width: auto;
	
	margin:0;
	padding: 75px;
    border: 70px ridge #00f;  
    
	}
	
.brik_b50d{	
	width: auto;
	margin: 0;
	padding: 15px;
    border: 70px ridge #00f;  
    -moz-box-shadow: 3px 3px 4px #000;   
	}
.brik_b50d_last{	
	width: auto;
	margin: 0;
	padding: 30px 15px 15px 15px;

    border: 70px ridge #00f; 
    -moz-box-shadow: 3px 3px 4px #000;     
    overflow:hidden;
	}



.wrap{
 display: inline-block;
margin-bottom: -30px;
padding-bottom:20px;
padding-top:20px;
   border: 25px ridge #f00; 
   background-image: url(pretty/fluid-sm.gif);
 
}



.flower-frame{
     border-image-source: url(pretty/pattern354.jpg);
 border-image-slice: 50;
   border-image-width: 30px;
border-image-repeat: round;
 
}
.flower-frame2{
     border-image-source: url(pretty/flower625.gif);
 border-image-slice: 50;
   border-image-width: 30px;
border-image-repeat: round;
 
}
.ridge{	
	width: auto;
		display: inline-block;
	margin: 20px;
	padding: 10px;
    border: 15px ridge goldenrod;  
 /*  background-image: url(pretty/notes.gif); */
	}
.ridge-pad{	
	width: auto;

  display: flex;
  justify-content: center;
	margin: 20px;
	padding: 15px;
    border: 15px ridge goldenrod;  
 /*  background-image: url(pretty/notes.gif); */
	}





.gradient{
	 border: 30px;
	border-image: linear-gradient(45deg, red, blue) 1 stretch;
}

.radial-repeating {
	border-width: 20px;
	border-image: repeating-radial-gradient(
			circle at 10px,
			turquoise,
			pink 2px,
			greenyellow 4px,
			pink 2px
		)
		1;
}
.full-withradius {
	position: relative;
	 background: #00ffff;

	/*The background extends to the outside edge of the padding. No background is drawn beneath the border.*/
	background-clip: padding-box;

	border: solid 8px transparent;
	border-radius: 0.8rem;

	&:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		margin: -8px; /* same as border width */
		border-radius: inherit; /* inherit container box's radius */
		background: linear-gradient(to left, turquoise, greenyellow);
	}
}
.linear-repeating {
	border-width: 10px;
	border-image: repeating-linear-gradient(45deg, turquoise, pink 4%) 1;
}

.flame-border {
background: #CE00BF;
background: -moz-linear-gradient(top, #CE00BF 0%, #09FFC2 73%, #F0FF6A 100%);
background: -webkit-linear-gradient(top, #CE00BF 0%, #09FFC2 73%, #F0FF6A 100%);
background: linear-gradient(to bottom, #CE00BF 0%, #09FFC2 73%, #F0FF6A 100%);
}

.rounded-box{
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

	}
.card-box{
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

}

.close-shadow{
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}


.writing{
   background-image: url(pretty/IZHOFABECOJ7YSD5YLLQCO235CI2P5FB.gif);
     background-size: auto 70px;
}
.research{
   background-image: url(pretty/KGOXNJKFQN6H4YYHAYXSFHZFRJJ5GPH6.gif);
     background-position: center;
     background-size: auto 30px;
}
.design{
   background-image: url(pretty/UVDKKOFOJLUQ4WR7JVZWPOKBIT6SUYQN.gif);
   background-size: auto 50px;
}
.material {
	 background-image: url(pretty/033C.jpg);
}
.material img{
width:100%;
height:100%;
}

.apples{
   background-image: url(pretty/apples.jpg);
}
.dna{
   background-image: url(pretty/dna3.gif);
}
.butterfly{
   background-image: url(pretty/butterfly.gif);
   background-size: auto 70px;
}
.school{
   background-image: url(pretty/school.gif);
}

.switch{
   background-image: url(pretty/switch2.gif);
   background-size: auto 10lvw;
}




.lightshow{
   background-image: url(pretty/J2WZVMW67QTAPSUZIW5UVFX7MPGLPIQQ.gif); 
}
.digital{
   background-image: url(pretty/digital.gif); 
    background-size: auto 50px;
}
.camera{
   background-image: url(pretty/camera.gif); 
      background-size: auto 50px;
      background-position: -20px 0 ;
}



.online{
   background-image: url(pretty/WM25UBFXHEPZW36QJQPYNCNDS4DBL33W.gif);
 
}

.screen-transfer{
   background-image: url(pretty/FP4JEMOPX5FIZLKG7LY4TKRFOLN524NW.gif);
   background-size: auto 80px;
}

.row-network{
   background-image: url(pretty/ANM7QC6JBGLKCWA6ZJEF32X6NV5QM6HZ.gif);
    background-color: #f0f;
}


.library{
   background-image: url(pretty/library.gif);
}



.rounded-corner{
	border-radius: 25px;
}


.air-guy{
	background-image: url(pretty/air-guy.gif), url(pretty/32623.png);
	background-size: auto 80px;
}

.button1{
	background-image: url(pretty/button1.jpg);
}
.button2{
	background-image: url(pretty/button2.gif);
}
.button3{
	background-image: url(pretty/button3.gif);
}
.graph{
	background-image: url(pretty/graph.gif);
}
.burger{
	background-image: url(pretty/burger.gif);
}



.coffee-only{
	background-image: url(pretty/coffee.gif);
	background-size: auto 60px;
	background-position: -100px -70px;

}
.tv{
	background-image: url(pretty/tv.gif);
}
.pad{
	margin: 20px;
}

.cyan{
	background-color: #00ffff;
}
/*background: radial-gradient(#9c27b0 0%, #ff9800 100%);
	  background: radial-gradient(#00ffff 0%, #00ffff 60%, #f3ffa8 100%); */








.silver-frame {
	 	border: 10px inset rgb(204, 204, 204);
	 	display: flex;
	 	justify-content: center;
	 	width: auto;
	 }
.box{
	 	background: #000;
	 	padding: 15px;
	 	border: 8px dotted #f0f; 
	 }

.stripe{
	 	display: inline-block;
	 	margin: auto;
	 	padding:30px 0 30px 14px;
	 	background: #fff;
	 	border:75px ridge #0f0; 
	 }



	 .flow-maker{
	 	display: flow;
	 }

	 .blue{	
	 	margin: 20px;
	 	padding: 10px;
	 	border: 15px inset #00f;  
	 	background: #f0f;
	 }

	
	 .word-center{
	 	display: flex;
	 	flex-direction: row;
	 	justify-content: space-between;
	 	align-items: center;
	 	/* margin: 30px 10px; */
	 	width: auto;
	 	padding: 40px 10px;
	 }

	 .word-flex{
	 	display: flex; 
	 	flex-direction: row;
	 	justify-content: space-evenly;
	 	align-items: center;
	 	width: auto;
	 }

	
	 .bird{	
	 	flex: 2 1 auto;
	 }

	 img.bleed{
	 	margin:-25px 0 0 0;
	 }

	 img.bleed-left{
	 	margin: 0 0 0 -50px;
	 }
	 .bleed-right{
	 	margin: 0 -30px 0 30px;
	 }
	 .bleed-right20{
	 	margin: 0 -20px 0 20px;

	 }
	


	 .yelo{	
	 	display: inline-block;
	 	margin: 0;
	 	padding: 0;
	 	border: 15px inset #ff0;  
	 	/*  background-image: url(pretty/notes.gif); */
	 }
	 .green{	
	 	margin: 0;
	 	padding: 10px;
	 	border: 15px inset #0f0;  
	 	background-image: url(pretty/155.gif);
	 }
	.card {
	 	width: 250px;
	 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	 	text-align: center;
	 }

.frame-green{	
	 	margin:2.5lvw;
	 	padding: ;
	 	border: 5lvw ridge #0f0;  
	 }



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

.dash{	
	width: auto;
	height: auto;
	margin: 10lvw 0;
	padding: 0;
	display: inline-flex;
	justify-content: center;
	border: 13px dashed #000; 
}

.folder{
	background-image: url(pretty/folder-20.gif); 
	/* background-size: 20px 21px; */ 
	background-size: 4lvw auto;
	background-repeat: round;
}

.balls{
	background-image: url(pretty/balls-128-128.gif);
	background-size: 128px 128px;
	background-repeat: repeat;
}

	 	.shadow-filter-mid{
	 		filter: drop-shadow(-22px 32px 2px rgba(0, 0, 0, 0.5));
	 	}

	 	.shadow-filter-soft{
	 		filter: drop-shadow(0px 10px 2px rgba(0, 0, 0, 0.8));
	 	}

	 	.shadow-filter-subtle{
	 		filter: drop-shadow(4px 5px 2px rgba(0, 0, 0, 0.6));
	 	}
	 	.shadow-filter-close{
	 		filter: drop-shadow(10px 14px 1px rgba(0, 0, 0, 0.7));
	 	}
	 	.shadow-filter-close2{
	 		filter: drop-shadow(16px 20px 2px rgba(0, 0, 0, 0.7));
	 	}


	 }