html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-family: Arial;
}
p{
  margin: 0;
}
a{
  text-decoration: none;
}
#wrapper{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 6fr 1fr;
  grid-template-rows: 48px 32px 6fr 1fr;

}

.header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background-color: rgb(80, 80, 80);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(82, 82, 82);



}

.footer{
  grid-row: 7;
  grid-column: 1/6;
  display: flex;
  align-self:flex-end;
  height: 50px;
  background-color: rgb(48, 48, 48);
}

.main-background {
  grid-column: 2/3;
  grid-row: 3/4;
  background-image: linear-gradient(to bottom right, rgb(155, 155, 155), rgb(107, 107, 107));
  border-style: solid;
  border-width: 1px;
  border-color: rgb(139, 139, 145);
  border-radius: 5px;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.3);

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 2fr 1fr 2fr;
}

.name {
  grid-column: 2/5;
  grid-row: 1/2;
  color: rgb(255, 255, 255);
  font-size: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}



.button1, .button2{
  width: 100%;
  height: 100%;
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  justify-self: center;
  font-size: 26px;
  background-image: linear-gradient(to bottom right, rgb(0, 102, 255), rgb(69, 0, 230)); 
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 1px 5px rgb(50, 60, 150);
  color: white;
  opacity: 0.9;
  width: 90%;
  height: 75%;

  transition: margin 0.2s, box-shadow 0.2s;
}

.button1:hover, .button2:hover {
  box-shadow: 0 4px 10px rgb(60, 75, 225);
}

.button1 {
  grid-column: 3/3;
  grid-row: 2/3;
}

.button2{
  grid-column: 4/5;
  grid-row: 2/3;
}

.deco{
  grid-row: 1;
  grid-column: 1;
  height: 100%;
  width: 100%;
}


@media (max-width: 750px) {
  .main-background {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 36px 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  .button1{
  grid-column: 2/3;
  grid-row: 3/4;
  }
  .button2{
  grid-column: 2/3;
  grid-row: 5/6;
  }
  .name{
  grid-column: 2/3;
  }
}
@media (min-width: 751px) and (max-width: 999px) {
  .main-background {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 36px 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  .button1{
  grid-column: 2/3;
  grid-row: 3/4;
  }
  .button2{
  grid-column: 2/3;
  grid-row: 5/6;
  }
  .name{
  grid-column: 2/3;
  }
}
@media (min-width: 1000px) and (max-width: 1500px) {
  .main-background{
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

}