* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
background-color: gainsboro;
background-image: url('./purplestripe.png');
font-family: serif;
}

body.about {

background-image: url("lacybg.gif");
background-size: repeat;

}

@font-face {
    font-family: 'Yapix'; 
    src: url('./yapix/yapix.ttf'); 
}

a {

color: black;
text-decoration: none;
}



.sidebar {
height: 100%;
position: fixed;
background-image: linear-gradient(to right, whitesmoke, aliceblue, gray);
border: 1px solid whitesmoke;
outline: 1px solid gray;
width: 33px;
right: 0%;
top: 0%;
writing-mode: vertical-rl;
padding: 6px;
z-index: 1;
font-size: 14px;
font-family: verdana;
}


.basebar {
width: 100%;
position: fixed;
border-top: 1px dashed black;
height: 30px;
left: 0%;
bottom: 0%;
padding: 6px;
z-index: 0;
color: black;
font-family: monospace;
padding-top: -5px;
background-color: gainsboro;
}

@keyframes fade {

from {filter: invert(0%);}
to {filter: invert(100%);}

}


.description {
border: 3px double black;
background-color: gainsboro;
width: 20%;
padding: 4.5px;
position: fixed;
bottom: 20%;
right: 22%;
color: black;
font-size: 17px;
  }


    .title {
border: 1px solid black;
background-color: gainsboro;
color: red;
max-width: 100px;
padding: 4.5px;
position: fixed;
right: 6%;
top: 6%;
color: gainsboro;
-webkit-text-stroke: 1px black;
font-size: 21px;
  }
  
.dither {

    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACX0lEQVR4Xu2awZaCQAwE8f8/evewHhQW22JaQC2vZDJJpScTeF4mf1UCl6o3nU0CLYtAoAItEyi7U6ECLRMou1OhAi0TKLtToQItEyi7U6EfAPQH5jAv+nw9fQ63Z+ZHKFSgrEbRWqARETMQKOM1JWCpzdD1tKfO00nxoPSrzq47UyDzgOl6gYaSC3QGiAJRoQHgK9oI6mPQOLUM5K6RfDUgFH3HuBq/QKfFVDLEZGjxyq3e8NnR3nNe3k6h6ZJ6Lu2e1Uvf/RtqShUWKBSDQG+AqdATXEpJkWlQbxSRHKJd492S3K4BEnIrtrvGK9BlFWgB7jwI9ARAaY8cqvg3HHmBPqjyliMvUIGie2OoRW1RKN2Q2hfa5p2LtH96NUaMkPHGr0spoTbA0ZY0X48YIWOB5toLdPkuv7tCR4/UliJmaaxbpJaTnqO9G8mlgNJzFPAG47R/eo62FOgJPt955MuDPZ3bqkcKnb8/Y7o/tUdvDf/FL1AVikSkQkMboICoParWM0c+TQpDAW7omYdemgmGQGFFBcqngIeIBSpQeAY5sKGer0KX9RGoYxM+tUMLqOKo/fAcOjrnDdEpLPb/oQWIty4EKtB7AunrVJlXdPf2Co0ZHmwwdAnNY98yh9JL6WBecXuBRkTMQKCMV7Q+HdDUAlKbSQmlSy21rdH1sSKPZjK0eMWYJiBQ+O6sQgdlqkIHAdLl9IinQTztn3psWo+e77rZNTKBohJlY4FmRshCoAjXlxsf0UM/GrlAy+UVqEDLBMruVKhAywTK7lSoQMsEyu5UqEDLBMruVGgZ6C+hntBVHgzSTQAAAABJRU5ErkJggg==") 28 /  10px / 0 round;
    border-width:  10px;
    border-style:  solid;
height: 206px;
position: fixed;
right: 11%;
bottom: 1%;
z-index: -1;
transform: rotate(-178deg);
}

.poem {
position: fixed;
color: black;
font-family: verdana;
font-size: 12px;
padding: 3px;
z-index: -1;
}

.fade {

animation-duration: 8s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: linear;
}


.fade:hover {

opacity: 0%;

}

.myname {


    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACX0lEQVR4Xu2awZaCQAwE8f8/evewHhQW22JaQC2vZDJJpScTeF4mf1UCl6o3nU0CLYtAoAItEyi7U6ECLRMou1OhAi0TKLtToQItEyi7U6EfAPQH5jAv+nw9fQ63Z+ZHKFSgrEbRWqARETMQKOM1JWCpzdD1tKfO00nxoPSrzq47UyDzgOl6gYaSC3QGiAJRoQHgK9oI6mPQOLUM5K6RfDUgFH3HuBq/QKfFVDLEZGjxyq3e8NnR3nNe3k6h6ZJ6Lu2e1Uvf/RtqShUWKBSDQG+AqdATXEpJkWlQbxSRHKJd492S3K4BEnIrtrvGK9BlFWgB7jwI9ARAaY8cqvg3HHmBPqjyliMvUIGie2OoRW1RKN2Q2hfa5p2LtH96NUaMkPHGr0spoTbA0ZY0X48YIWOB5toLdPkuv7tCR4/UliJmaaxbpJaTnqO9G8mlgNJzFPAG47R/eo62FOgJPt955MuDPZ3bqkcKnb8/Y7o/tUdvDf/FL1AVikSkQkMboICoParWM0c+TQpDAW7omYdemgmGQGFFBcqngIeIBSpQeAY5sKGer0KX9RGoYxM+tUMLqOKo/fAcOjrnDdEpLPb/oQWIty4EKtB7AunrVJlXdPf2Co0ZHmwwdAnNY98yh9JL6WBecXuBRkTMQKCMV7Q+HdDUAlKbSQmlSy21rdH1sSKPZjK0eMWYJiBQ+O6sQgdlqkIHAdLl9IinQTztn3psWo+e77rZNTKBohJlY4FmRshCoAjXlxsf0UM/GrlAy+UVqEDLBMruVKhAywTK7lSoQMsEyu5UqEDLBMruVGgZ6C+hntBVHgzSTQAAAABJRU5ErkJggg==") 28 /  10px / 0 round;
    border-width:  10px;
    border-style:  solid;

position: fixed;
bottom: 25%;
right: 45%;
-webkit-text-stroke: 1px black;
color: gainsboro;
font-size: 55px;
padding: 1px;
}

@keyframes spin {

from {transform: rotate(0deg);}
to {transform: rotate(350deg);}


}


.shards {

animation-name: spin;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-fill-mode: linear;
position: fixed; 
bottom: 33%; 
right: 15%;
width: 300px;
}


.product {
border-radius: 10px;
width: 200px;
height: 320px;
margin-left: 30px;
margin-top: 22px;
padding-top: 10px;
float: left;
background-color: gainsboro;
border: 3px black double;
text-align: center;
}

.buy {

height: 50px;
padding-right: 20px;
padding-left: 20px;
width: 190px;
border: 2px black dotted;
position: relative;
top: 3%;
background-color: gainsboro;

}

.buy:hover {

background-color: lime;
}

.shopheader {
-webkit-text-stroke: 1px black;
text-shadow: 0px 0px 10px lime;
margin-top: 33px;
color: lime;
font-size: 88px;
text-align: center;

}

