/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {font-family: "Cinnamon Cake"; src: url(http://static.tumblr.com/npggxjg/Jm9m1xlt2/cinnamon_cake.ttf);}
    
    body {
      /* image from Pexels.com - Septimiu Lupea */
      background-image: url("https://file.garden/aeur2iVxx2XDWeKX/Fox%20Den%20Website/forest%20-%20pexels-septimiu-lupea-271955805-33288548.jpg");
      background-attachment: fixed;
      background-size: cover;
      font-family: "Cinnamon Cake"; 
      color: white;
      overflow: scroll;
    }
    
    
    /*
    Music Player code copied from https://scripted.neocities.org/musicplayer - Image Circle Player
    */
    #music-player {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
        
            height: 1.425em;
            width: 1.425em;
            font-size: 1.5em;
            padding: 0.125em;
            border-radius: 50%;
            border: 3px dotted #ADE096;
            background: #779f14;
            position: relative;
            bottom: -1em;
            right: 0em;
            z-index: 1200;
            -webkit-animation: spin 2s linear infinite;
            -webkit-animation: spin 4s linear infinite;
            -moz-animation: spin 4s linear infinite;
            animation: spin 4s linear infinite;
        }
        @-moz-keyframes spin {
            100% {
                -moz-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes spin {
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
        @keyframes spin {
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        #music-player:hover {
            -webkit-animation: pop 0.3s ease;
        }
        
        .sign-image{
          width: 200px;
          margin-top: 53px;
        }
        
        .welcome {
          display: block;
          margin-left: auto;
          margin-right: auto;
          margin-top: 375px;
          width: 40%;
          
        }
        
        .text-box{
          position: absolute;
          z-index: -1;
          margin-top: 0px;
          margin-left: 0px;
          
          
        }
        .text{
          position: absolute;
          z-index: -1;
          text-align: center;
          width: 450px;
          margin-left: 46px;
          padding: 10px;
        }
       
       
       .image-button{
         position: relative;
         z-index: -1;
         top: 125px;
         left: 135px;
        }
        
        
        .button-text {
          top: 155px;
          left: 238px;
        }
        
        /*Below Code Snippet from ribo.zone*/
        .imgtxt {
          width: fit-content;
          height: fit-content;
          display: inline-block;
          position: relative;
          
        }
        
        .imgtxt span {
          opacity: 1;
          position: absolute;
          text-decoration: none;
          z-index: 5;
          font-size: 2.5rem;
          color: white;
          text-align: center;
          
        }
        
        
        .imgtxt:hover img, .imgtxt:focus img {
          transform: scalex(95%);
        }