/* 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." */

        @import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
          
          body {
              font-family: 'DotGothic16', sans-serif;
              font-size: 14px;
              background-image: url("images/music016.gif");
              background-repeat: repeat;
              background-attachment: fixed;
          }

       
       .banner {
         text-align: center;
         width: 100%;
       }
       
       .banner img {
         width: 100%;
         max-width:900px;
         height: auto;
       }
       
        .intro {
            background-color: #ffffff;
            color: black;
            border: 5px solid #958989;
            border-radius: 12px;
            padding: 20px;
        }
        
        .main-layout {
            display: flex;
            max-width: 950px;       
            margin: 20px auto;      
            gap: 20px;              
            align-items: flex-start;
        }
        
        .sidebar {
            width: 220px;           
            background-color: white; 
            border: 3px solid #958989; 
            border-radius: 8px;
            padding: 15px;
            box-shadow: 2px 2px 0px #000; 
        }
        
        .sidebar h3 {
            margin-top: 0;
            font-size: 1.1rem;
            text-align: center;
            border-bottom: 2px dashed #958989; 
            padding-bottom: 8px;
        }
        
        .sidebar ul {
            list-style-type: none;  
            padding: 0;
            margin: 10px 0 0 0;
        }
        
        .sidebar li {
            margin-bottom: 8px;     
        }
        
        /* Sidebar Links */
        .sidebar a {
            text-decoration: none;
            color: black;
            font-size: 0.95rem;
            display: block;
            padding: 4px;
        }
        
        .sidebar a:hover {
            background-color: #FBDCEB; 
            border-radius: 4px;
        }
        
        .content-area {
            flex: 1;                
        }


        

      h1 {
        color: #958989;
        text-align: center;
      }
        
      a {
        color: #6B3199;
      }
      
      a:hover {
       color: #C16FFC;
      }
      
      
      
              body.choso-page {
            background-image: url("images/choso background.gif");
            background-repeat: repeat;
            background-attachment: fixed;
        }
        
              
              
      .parent {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(10, 1fr);
          gap: 8px;
      }
          
      .div1 {
          grid-row: span 8 / span 8;
          grid-column-start: 1;
          grid-row-start: 2;
      }
      
      .div4 {
          grid-column: span 4 / span 4;
          grid-column-start: 1;
          grid-row-start: 1;
      }
      
      .div5 {
          grid-column: span 2 / span 2;
          grid-row: span 8 / span 8;
          grid-row-start: 2;
      }
      
      .div6 {
          grid-row: span 8 / span 8;
          grid-column-start: 4;
          grid-row-start: 2;
      }
      
      .div7 {
          grid-column: span 4 / span 4;
          grid-row-start: 10;
      }