body
{
    background-image: url('img_bg.png');
    color:antiquewhite;
    font-size:200%;
    text-align: center;
    
}
table, th, td {
  border: 1px solid;
    text-align: left;

}
table{
    width:100%
}
th,td
{
          padding: 15px;
}
th
{
 text-align: center;   
}
.shllwrks
{
        
        font-size: 300%;
        
}


.tagline
{
        
        font-size: 75%;
      color: darkgrey;
        transform: translateY(-240%)
}

  .tit{
     position: relative;
  
  left: 50%;
  transform: translate(-50%,0%) scale(.25);

	width: 500px;
	height:256px;
  }
@media only screen and (min-width: 1000px) {
.tit
{
  
  position: relative;
  
  left: 50%;
  transform: translate(-50%,0%);

	width: 500px;
	height:256px;
	
	
}
}


.indexesyy
{
	justify-content: center;
	display: flex;
	gap: 200px;

	
	
}
.dartind{
	 
	 transform: scale(1.25,1.25)translate(0px,-256px);
	 

}
.gramind{
	
    transform: scale(1.25,1.25)translate(0px,-256px);
	
}

.shoopind{
	flex: 3;
     transform: scale(1.25,1.25);

	 
}

.shellyknows{

transform: scale(.625) translate(-50%,-38%);
       position:fixed;
   left:140px;
   
   
}
.shellyknowsprog{

    
    position: absolute;
    text-align: left;
    transform: translate(195%,-320%) scale(2.3);
    
    
}
.a3dart
{
		margin-left: 200px;
}
.pshop
{
	margin-left: 200px;
	height:80px;
}
.programming
{
	margin-left: 200px;
}


.shellyknowsshop{
display: inline-flex;
	
       position:absolute;
	bottom: -50px;
	left:0px;
	

	
   
  
}

.shellyknowsshop2{
 
    position: relative;
    text-align: left;
	left:-340px;
	bottom:-50px;
	font-size: 110%;

	width: 150%;
}
.shellyknows3d{
	margin-left: 200px;
transform: scale(.3) translate(-155%,-128%);
       position:absolute;
   left:140px;
   
   
}

.shellyknows3d2{

    
    position: fixed;
    text-align: left;
    transform: translate(100%,-240%) scale(1.53);
    
    
}
.spotme{
   position:fixed;
   right:0px;
   bottom:0px;
   height:83px;
}
.spotme2{
  position:relative;
	height:0px;
	left: -274px;
	bottom:-245px;
}
.beavis{
    padding-top: 30%;

}
/* unvisited link */
a:link {
  color: antiquewhite;
}

/* visited link */
a:visited {
  color: darkgrey;
}

/* mouse over link */
a:hover {
  color: white;
}

/* selected link */
a:active {
  color: ghostwhite;
}




/* (A) GALLERY WRAPPER */
/* (A1) BIG SCREENS - 3 IMAGES PER ROW */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  max-width: 1200px;
  margin: 0 auto; /* horizontal center */
}
 
/* (A2) SMALL SCREENS - 2 IMAGES PER ROW */
@media screen and (max-width: 640px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}
 
/* (B) THUMBNAILS */
.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* fill | contain | cover | scale-down */
  border: 1px solid #cdcdcd;
  cursor: pointer;
		margin-left: 200px;
}
 
/* (C) FULLSCREEN IMAGE */
.gallery img.full {
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
  object-fit: contain; /* fill | contain | cover | scale-down */
  border: 0;
  background: #fff;
		margin-left: 200px;
}

/* this is for mtg btw */
/* (A) GALLERY WRAPPER */
/* (A1) BIG SCREENS - 3 IMAGES PER ROW */
.gallerymtg {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  max-width: 1200px;
	margin-left: 200px;
  margin: 0 auto; /* horizontal center */
}
 
/* (A2) SMALL SCREENS - 2 IMAGES PER ROW */
@media screen and (max-width: 640px) {
  .gallerymtg { grid-template-columns: repeat(4, 1fr); }
}
 
/* (B) THUMBNAILS */
.gallerymtg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill | contain | cover | scale-down */
  border: 1px solid #cdcdcd;
		margin-left: 200px;
  cursor: pointer;
}
 
/* (C) FULLSCREEN IMAGE */
.gallerymtg img.full {
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;	margin-left: 200px;
  object-fit: contain; /* fill | contain | cover | scale-down */
  border: 0;
  background: #fff;
}


.galleryvid{
		margin-left: 200px;
}

.sidebar
{
position: fixed;
	overflow: auto;
	width: 300px;
	text-align: left;
}

