:root {
  --URL-colour-dark:rgb(12, 134, 134);
  --URL-colour-light:rgb(28, 230, 156);
  --URL-colour-visited:rgb(91, 11, 134);
}


html, body {
  margin: 0;
  padding: 0;

}

canvas {
  display: block;
}

a:link
{
  color: var(--URL-colour-dark);
  text-decoration: none;
  font-weight: bold;
}

a:visited
{
color: var(--URL-colour-visited);
}

a:hover ,a:active
{
font-style: oblique;
} 


p.small {
  font-variant: small-caps;
}


footer.a{
  color: var(--URL-colour-light);
}

.text 
{
  padding: 70px 20px;
}

#sketch-holder
{
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  margin-top: -120px

}


#p5Canvas
{

align-self: center;
border-top: 1px solid black;
border-bottom: 1px solid black;
}



footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  /* background-color: black; */

  /* color: white; */
  border-top: lightslategray 1px solid;
  text-align: center;
  font-size: 0.9em;
  background-color: whitesmoke;
}

/* --------------------------   SONG ------------  */

/* --------------------------   SONG ------------  */

.skeleton1
{
  /* position:absolute;
  top: 144px !important;
  left: 20px; */
}

.skeleton2
{
  /* position:absolute;
  top: 240px !important;
  left: 75px !important; */
  font-size: 1.2em;
}


  .skeleton3 {
  /* position: absolute;
  top: 343px !important;
  left: 98px !important; */
  font-size: 0.8em;
  max-width: 42em;
}


.skeleton4 {
/* position: absolute;
  top: 272px !important;
  left: 57px !important; */
  font-size: 2.2em;
}

ul{
  padding: 10px;
}
ul li {

  /* padding: 5px; */
  margin: 0;
  margin-left: 35px;
  
}

  /* MASONARY  */
  .grid {
    max-width: 1200px;
  }
  
  /* clearfix */
  .grid:after {
    content: '';
    display: block;
    clear: both;
  }

  
  .grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }



#description
{

    /* border: 1px red solid; */
    margin: 1em;
}


@media (min-width:320px)  { 
    #sketch-holder2 {
    position: relative;
    top: 0px;
    left: -150px;
    z-index: -150;
     /* border: 1px blue solid;  */
}

}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { 
  #sketch-holder2 {
    position: relative;
    top: 0px;
    left: -150px;
    z-index: -100;
     /* border: 1px red solid;  */
} 
}
@media (min-width:961px)  { 
  #sketch-holder2
{
  /* border-top: 1px solid black; */
  /* border-bottom: 1px solid black; */
      position: absolute;
    top: 0px;
    left: 1px;
    z-index: -100;
 /* border: 1px orange solid;  */
}
 }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }