/* 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." */
body{
        font-family: Max;
        color: black;
        font-size: 20px;
        margin: 20px auto;
        background-image: url(img001.jpg);
         /*   background-repeat: no-repeat;
            background-size: 10%;
            background-position: bottom right; */
        background-size: 10%;
    } 
    
    #container{
        max-width: 1400px;
        margin:0 auto;
        font-size: 15px;
        
        display: grid;
            grid-template-rows:170px 10px 660px 30px;
            grid-template-columns:200px 1fr 200px;
            grid-template-areas: 'header header header'
                                 'line line line'
                                 'left main right'
                                 'footer footer footer';
    }
    
    #header{
        display: grid;
        grid-template-columns: 760px 300px;
        grid-template-rows: 100%;
        gap: 10px;
      margin-bottom: 5px;
        
    }
    
    #left{grid-area: left; border: 1px solid tan; border-right: 0; background-image: url(img001.jpg);
        display: grid; grid-template-columns: 100%; grid-template-rows: 245px 40px 1fr; grid-template-areas: 'navigation' 'divider' 'jaguar'}
    #right{grid-area: right; border: 1px solid tan; border-left: 0; background-image: url(img001.jpg);
        display: grid; grid-template-columns: 100%; grid-template-rows: 1fr 60px 350px; grid-template-areas: 'musicplayer' 'divider' 'todo'}
  


  .my-box {
        width: 1400px; /* Set the width of the box */
        height: 100px; /* Set the height of the box */
        border: 2px solid #333; /* Add a border around the box */
        padding: 20px; /* Add space between content and border */
        margin: 10px auto; /* Add space outside the border and center the box */
        background-color: white; /* Set a background color */
        box-sizing: border-box; /* Include padding and border in width/height calculation */
    }
    
    .rightbox {
        width: 50px; /* Set the width of the box */
        height: 300px; /* Set the height of the box */
        border: 2px solid #333; /* Add a border around the box */
        padding: 20px; /* Add space between content and border */
        margin: 10px; /* Add space outside the border and center the box */
        background-color: #f0f0f0; /* Set a background color */
        box-sizing: border-box; /* Include padding and border in width/height calculation */
    }
    
    .box{
        border: 1px solid ;
        padding: 10px;
        background-color: blue;
        font-family: max;
            font-size: 15px;
    }
    
  main{
        grid-area: main;
        overflow: auto;
        border: 1px solid tan;
            border-top-left-radius: 45px;
            border-top-right-radius: 45px;
        background-color: White;
        padding: 20px;
        padding-top: 30px;
        
        display: grid;
    grid-template-rows: 1fr; /* only one row, takes available height */
    grid-template-columns: 1fr; /* single column */
    grid-template-areas: 
        'welcome'; /* only one area */
    gap: 10px; /* optional spacing */
    }
    
     footer{
        grid-area: footer; 
        background: gray; 
        border-bottom-left-radius: 10px; 
        border-bottom-right-radius: 10px; 
        text-align: right; 
        font-size: 12px; 
        padding: 7px;
     }

    
    .header{
        background: linear-gradient(to right, #c2b447, #d2c672);
        padding: 10px;
        border: 1px solid black;
            border-bottom: 0px;
            border-top-left-radius: 15px;
        color: black;
    }
    
 button{
        font-family: Max;
        font-weight: bold;
        font-size: 15px;
        width: 100%;
        height: 40px;
        text-align: Center;
        border: 1px solid black;
        background: white;
        border-bottom: 1px solid black;
        line-height: 100%;
    }
    
        button:hover{
            font-style: italic;
            width: 100%;
            height: 50px;
            cursor: pointer;
            line-height: 100%;
        }
        
    .scrollbar-hide{
        -ms-overflow-style: none; 
        scrollbar-width: none;
    }
    
@font-face {
  font-family: Whatnot;
  src: url("Whatnot W00 Regular.ttf");
}

@font-face {
  font-family: Max;
  src: url("Dudu_Calligraphy.ttf");
}

@font-face {
  font-family: Chloe;
  src: url("Faraco Hand.ttf");
}

h1 {
    font-family: Whatnot;
    font-size: 48px;
    color: black;
}