body {
    background-image: url(../images/backgrounds/skyspiral2.1.png);
    background-size:cover;
    background-repeat:no-repeat;
    font-family: Garamond, serif;
}
.tooltip {
    position: relative;
    display: inline-block;
  }

  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #606e60;
    border: 2px solid black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 3px 0;

  
    /* Position the tooltip */
    position: absolute;
    z-index: 3;
    top: 80px;
    left: 90%;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  .btn {
    background-color: transparent;
    border-color: transparent;
    }
    .btn:hover {animation: shaking 0.5s infinite;}
    @keyframes shaking {
       0% {transform: rotate(0deg);}
       20% {transform: rotate(-4deg);}
       50% {transform: rotate(0deg);}
       70% {transform: rotate(4deg);}
       100% {transform: rotate(0deg);}
    }
    .flexbox-container {
        display: flex;
        justify-content: center;
        justify-content: space-around;
    }
    #box_3 {
        
        opacity: 0.75;
        min-width: 66%;
        margin-right: 15%;
        margin-left: 10%;
        padding-left: 3px;
    }
    .flexbox-container-2 {
        display: flex;
        justify-content: center;
        justify-content: space-around;
    }
    #box_4 {
        background-color: #eaf1dd;
        min-width: 66%;
     
    }
    #month {
        margin-left: 5px;
    }
    #text {
        padding-left: 10px;
        padding-right: 10px;
    }
    a:visited {
        color: navy;
    }
    a {
        color: navy;
    }
   #read {
    color: beige;
    
   }