/*This is a comment in CSS*/

body{
    font-family: Georgia, serif;
}

h1{
    font-size: 30px;
}

p{
    font-size: 20px;
}

.centered-wrapper{
    width:800px;
    margin: 0 auto;
    text-align: center;
    padding-top: 100px;
}


.clock{
    width:800px;
    margin: 0 auto;
    text-align: center;
    padding-top: 300px;
}

/* When giving a child element position absolute you should give the parent position value as well */
/* The child will then be positioned absolute in realtion to the box container of the parent */
/* positioning elements on the page is fundamental to understanding CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/position */
.title{
    position: relative;
    width: 350px;
    text-align: left;
    margin: 0 auto;
}
.title a{
    position: absolute;
}
.title a.forking{
    left: 80%;
    top: 0px;
    rotate: 0deg;
}
.title a.paths{
    left: 78%;
    top: 30px;
    rotate: 28deg;
}

.title a.bored{
    left: 48%;
    top: 30px;
    rotate: 28deg;
}
.title a.boredd{
    left: 48%;
    top: 40px;
    rotate: 80deg;
}
.title a.boredbored{
    left: 48%;
    top: 40px;
    rotate: -60deg;
}

/* a.dead-link:hover{
    opacity: 0;
} */

a.dead-link:hover{
    opacity: 0;
}
a.dead-link:hover .tooltiptext{
    visibility: visible;
}
a.dead-link{
    position: relative;
    display: inline-block;
   
}


a.dead-link .tooltiptext{

    visibility: hidden;
    width: 120px;
    background-color: rgb(0,0,0);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;

}

span#ghost{
    opacity: 0.4;
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer; 
    
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color:rgb(255,255,255);
    color: rgb(210, 49, 151);
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  .tooltip:hover {
    visibility: collapse;
  }