/* 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 {
  src: url(https://dl.dropbox.com/s/ktlx5w7t8gk42nb/SakeMoru-Regular.ttf);
  font-family: "SakeMoru"
  }

body {
  overflow: hidden;
  background-color: #3a3845;
 }
 
  .static {
    position: relative;
  }

    #welcome {
      opacity: 1;
      margin-left: 260px;
      margin-top: 20px;
      width: 370px;
      height: 40px;
      font-size: 80%;
      font-family: "SakeMoru";
      color: black;
      text-align: justify;
    }
    
    #scrapyard {
      display: flex;
      justify-content: center;
      align-items: center;
      
    }
    
    .divider {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .text {
      font-family: SakeMoru;
      font-size: 23px;
      margin-left: 280px;
    }
    
    
    
    .btn-group {
      margin-top: 30px;
      flex-direction: column;
    }
  
      #inspo {
        background-color: #4c516d;
        width: 130px;
        height: 130px;
        border: 1px #3a3845;
        border-radius: 8px;
        color: white;
        padding: 8px;
        text-align: center;
        text-decoration: none;
        font-size: 90%;
        cursor: pointer;
      }
      
      
      #writing {
        background-color: #7289da;
        width: 80px;
        height: 80px;
        border: 1px #3a3845;
        border-radius: 8px;
        color: white;
        padding: 8px;
        text-align: center;
        text-decoration: none;
        font-size: 90%;
        cursor: pointer;
      }
      
      #resources {
        background-color: #7289da;
        width: 250px;
        height: 140px;
        border: 1px #3a3845;
        border-radius: 8px;
        color: white;
        padding: 8px;
        text-align: center;
        text-decoration: none;
        font-size: 90%;
        cursor: pointer;
      }
      
      #art {
        background-color: #979aaa;
        width: 150px;
        height: 150px;
        border: 1px #3a3845;
        border-radius: 8px;
        color: white;
        padding: 8px;
        text-align: center;
        text-decoration: none;
        font-size: 90%;
        cursor: pointer;
      }
      
       #guestbook {
        background-color: #7289da;
        width: 170px;
        height: 170px;
        border: 1px #3a3845;
        border-radius: 8px;
        color: white;
        padding: 8px;
        text-align: center;
        text-decoration: none;
        font-size: 90%;
        cursor: pointer;
      }
    
      .btn-group #inspo:hover {
        background-color: dodgerblue;
        }
      
       .btn-group #writing:hover {
          background-color: dodgerblue;
        } 
        
        .btn-group #resources:hover {
          background-color: dodgerblue;
        } 
        
        .btn-group #art:hover {
          background-color: dodgerblue;
        } 
        .btn-group #guestbook:hover {
            background-color: dodgerblue;
          }
      .btn-group:not(:last-child) {
        border-bottom: none;
      }
      
        .musicplayer {
          position: relative;
          margin: auto;
          background-color: white;
          width: 500px;
          height: 500px;
        }
        
        .image {
          position:relative;
          margin:auto;
          background-image: url"images/graphic1.png";
          width: 200px;
          height:200px;
          
        }