html{

  background-size: cover;
  color: white;
  }


.box {
  
  max-width: 1000px;
  margin: 50px 400px;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 250px minmax(0, 1fr);
  
  }
  
  header,nav,main,footer, image1, image2, music{
    
      border: black 2px solid;
      
    }
    
header {
    
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    height: 220px;
    width: 445px;
    background-image: url("ruggi.jpg");
    background-size: 95%;
    background-position: center;
    overflow: hidden;
    font-family: Chemre;
    font-size: 100px;
    text-align: center;
    color: #240A0A;
    
    
    }
    
image1 {
    
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    height: 220px;
    width: 242px;
    background-image: url("mana.jpg");
    background-size: 110%;
    overflow: hidden;
    border-width: 7px;
    border-style: solid;
    border-image: url("https://i.imgur.com/wuDCEbv.png") 11 fill round;
    
  
    }
    
    
image2 {
    
    grid-row: 1 / 3;
    grid-column: 4 / 3;
    height: 220px;
    width: 250px;
    background-image: url("tea.jpg"); 
    background-size: 100%;
    overflow: hidden;
    border-width: 7px;
    border-style: solid;
    border-image: url("https://i.imgur.com/wuDCEbv.png") 11 fill round;   
    
    }
    
    
nav {
    
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: max-content;
    font-family: monospace;
    
    }
    
    
main {
    
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    height: max-content;
    font-family: monospace;
    
    }
    
    
footer {
    
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    font-family: monospace;
    
    }
    
    
music {
    
    grid-row: 2 / 3;
    grid-column: 4 / 3;
    width: 250px;
    height: 300px;
    font-family: monospace;
    
    }