* {
  box-sizing: border-box;
}

/*this removes the default browser spacing. */
body {
  margin: 0;
}


/*------------------------------------------*/
.template {
  display: grid;
  grid-template-areas: 
    "header header header"
    "leftbox mainbox rightbox"
    "footer footer footer";
  
  grid-template-columns: 1fr 2fr 1fr;
  
  /* CHANGED: max-content shrinks top and bottom rows down strictly to content size */
  grid-template-rows: max-content 1fr max-content; 
  
  min-height: 100vh; /*expands the rows*/
  padding: 0vh 0vh; 
    /*acts like the margin. we use padding here, as we are manipulating the boxes INSIDE. If we use margin, it will expand and force you to scroll. */
    /*5vh affects the top & bottom, while 10 vh affects right & left */
  background-image: url("stars6.jpg");
  background-repeat: repeat; 

}
 
/*HEADER--------------------------------*/
.header {
  grid-area: header;
  display:flex;
  color: white;
  max-width: 100%;       
  overflow: hidden;       
  white-space: nowrap;   
  text-overflow: ellipsis;

  /* CHANGED: Remove vertical margins/padding so it takes bare minimum vertical space */
  margin: 0;
  padding: 0;
  align-items: center;
}
  
/*RIGTH GRID--------------------------------*/
.rightbox {
  grid-area: rightbox;
  display: flex;
  flex-direction: column;
  /* border-style: solid;*/
  margin: 5px 10px 10px 5px; 
}
/*LEFT GRID--------------------------------*/

.leftbox {
  grid-area: leftbox;
  display: flex;
  /* border-style: solid;*/
  flex-direction: column;

  margin: 5px 5px 10px 10px; 
}
.mainbox {
  grid-area: mainbox;

  
  display: flex;
  flex-direction: column;

  margin: 5px 5px 10px 5px; 
  
  align-items: center;     
  justify-content: center;
  min-width: 0; 
  width: 100%;
 
  
  background-image: url("tv.png");
  background-repeat: no-repeat; 
  background-size: contain; 
  background-position: center; 
}
.sparkle-trail {
  width: 10vw;    /* Set your desired width */
  height: auto;     /* Keeps the original picture proportions */
  transform: translateY(-5vh);
}
.dogimage {
  color: white;
}






/*FOOTER--------------------------------*/
.footer {
  grid-area: footer;
  display:flex;
  color: white;
  max-width: 100%;       
  overflow: hidden;       
  white-space: nowrap;   
  text-overflow: ellipsis;

  /* CHANGED: Remove vertical margins/padding so it takes bare minimum vertical space */
  margin: 0;
  padding: 0;
  align-items: center;
}


/* -------------------------------------------------------- */
/* MOBILE */
/* -------------------------------------------------------- */

@media (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .template {
    grid-template-areas:
      "header"
      "mainbox"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr max-content; 
  }

  .leftbox,
  .rightbox {
    display: none;
  }

  .mainbox {
    margin: 5px 0;
    min-height: 60vh;
    background-size: contain;
  }
}