html {
width: 100%;
height: 100%;

}

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;
}


a:hover {

color: lime;

}

.sidebar {
height: 100%;
position: fixed;
background-image: linear-gradient(to right, whitesmoke, aliceblue, gray);
border: 1px solid whitesmoke;
outline: 1px solid gray;
width: 1.7%;
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: 2.5%;
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: 50%;
left: 18%;
color: black;
font-size: 17px;
  }


    .title {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAKtJREFUOE/tVVsOwCAIw/sfeotkuNrQaYz+zS9BqMijFuvXBWIxM5TJ1Pi8yr7a5gFgmW3CLy5L/UNZjdCgOmc6jFb6xBMQHB35IgbNbK8M9AuI84rpaIGNQFUKWI+yRxr5U8VT0WVF9cJiW8xWftQBrdeyPK5U31/NOR21zMz5D/qSxtbqH+tTRSzLE9WNWMJWaqJUe6WEsoWlFHeuTJT7HGV+Jon4Rpb+qBsThFQJ1bb73QAAAABJRU5ErkJggg==') 7 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid; 
background-color: gainsboro;
color: red;
width: 11.5%;
padding: 4.5px;
position: fixed;
left: 6%;
top: 6%;
color: gainsboro;
-webkit-text-stroke: 1px black;
font-size: 21px;
  }
  
.dither {

    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAKtJREFUOE/tVVsOwCAIw/sfeotkuNrQaYz+zS9BqMijFuvXBWIxM5TJ1Pi8yr7a5gFgmW3CLy5L/UNZjdCgOmc6jFb6xBMQHB35IgbNbK8M9AuI84rpaIGNQFUKWI+yRxr5U8VT0WVF9cJiW8xWftQBrdeyPK5U31/NOR21zMz5D/qSxtbqH+tTRSzLE9WNWMJWaqJUe6WEsoWlFHeuTJT7HGV+Jon4Rpb+qBsThFQJ1bb73QAAAABJRU5ErkJggg==') 7 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid; 
background-color: gainsboro;
position: fixed;
right: 18%;
top: 17%;
height: 335px;
}

.poem {
position: fixed;
color: blue;
font-family: verdana;
font-size: 12px;
padding: 3px;
}

.fade {
animation-name: 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,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAKtJREFUOE/tVVsOwCAIw/sfeotkuNrQaYz+zS9BqMijFuvXBWIxM5TJ1Pi8yr7a5gFgmW3CLy5L/UNZjdCgOmc6jFb6xBMQHB35IgbNbK8M9AuI84rpaIGNQFUKWI+yRxr5U8VT0WVF9cJiW8xWftQBrdeyPK5U31/NOR21zMz5D/qSxtbqH+tTRSzLE9WNWMJWaqJUe6WEsoWlFHeuTJT7HGV+Jon4Rpb+qBsThFQJ1bb73QAAAABJRU5ErkJggg==') 7 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid; 

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



.shards:hover {

transform: rotate(-5deg);


}