*{
  box-sizing: border-box
  }
  
body {
  background-color: white;
  color: white;
  font-family: Verdana;
}


.navbar{
  background: #B70113;
  }
  
.navbar ul{
  list-style: none;
  display: flex;
  overflow:hidden;
    padding: 0;
    margin: 0;
  }
  
.navbar a{
  text-decoration: none;
  color: white;
  text-align: center;
  padding: 12px;
  display: block;
  }
  
.navbar ul a:hover{
  background: #1E1E1E;
  }
  

.navbar li {
  float: left;
 }


.content{
  background-image: url("https://i.pinimg.com/control1/736x/32/db/a4/32dba41fce201b0e5d738f288d2b351a.jpg");
  color: black;
  border: 3px solid #B70113;
  }
  
.wrapper{
  background: #1E1E1E;
  width: 575px;
  height: 1700px;
  margin: 1.5% auto;
  }

.grid {
  justify-content: center;
  display: grid;
  width: 475px;
  height: 1500px;
  grid-template-rows: 7% 2.5% 6% 13% 13% 15% 10% 35% 3.75%;
  grid-template-columns: 45% 55%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 120px;
  gap: 13px;
  }

.boxheader{
  background-color: #B70113;
  height: 30px;
  position: relative;
  }
  
.boxheader > h4{
  padding-top:3px;
  margin-top: 0;
  margin-left: 4px;
  color: white;
  }
  
.boxcontent{
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  display: inline-block;
  }
  

.boxcontent > table{
 width: 25%;
  float: right;
  margin-top: 15px;
  border-spacing: 3px;
}


.quangcao{
  border: 3px solid white;
  }
  
footer{
  border: 3px solid white;
  margin-top:10px;
    margin-bottom:5px;
  padding: 10px;
  }

header{
  grid-area: 1 / 1 / 2 / 4;
}

nav{
  grid-area: 2 / 1 / 3 / 4;
}

#qc1{
  grid-area: 3/ 1 / 4 / 4;
  }
  
#qc2{
  grid-area: 7/ 1 / 8 / 4;
  }

#avatar{
  grid-area: 4 / 1 / 6 / 2;
}

#intro {
  grid-area: 4 / 2 / 5 / 4;
}

#byf {
  grid-area: 5 / 2 / 6 / 4;
}

#dni {
  grid-area: 6 / 1 / 7 / 4; 
}

#fav {
  grid-area: 8 / 1 / 9 / 4; 
}


footer{
  grid-area:9 / 1 / 10 / 4;
  }