
html,
 

body {
  background-color: #000;
  margin: 30px auto 30px auto;
  padding: 10px auto 10px auto;
  font-family: 'Roboto', sans-serif;
  color: #FFF;
  text-align: center;
  width: auto;
  height:100%;
  max-width: 768px;
  min-height: 50%;
  overflow: hidden;
  
  

  
}
.container {
 
  overflow: hidden;
  position: center;
  justify-content: center;
  margin: 0 auto 0 auto;
  text-align: center;
  background-color: #000;
  border-radius: 5px;
  display: grid; 
 
  gap: 10px 10px; 
  padding: 10 1em 10 1em;
  max-width: 760px;
  width: 75%;
  

}

.jam {

 justify-self: start; 
  align-self: start; 
  grid-area: 1 / 1 / 2 / 2; 
  width: 25%; 
  height: 25%; 
}
.quotes {
 justify-self: end; 
  align-self: start; 
  grid-area: 1 / 1 / 2 / 2; 
  width: 25%; 
  height: 25%; 
}
.button {
 
  justify-self: center; 
  align-self: start; 
  grid-area: 1 / 1 / 2 / 2; 
  width: 25%; 
  height: 25%; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  width: 100px;
  height: 20px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }

.button:hover {
  background-color: #FC1F1F;
  box-shadow: 0px 5px 8px rgba(252, 31, 20, 0.4);
  color: #fff;
  transform: translateY(2px);
}
#godions{
  display: flex;
        justify-content: center;
    }
    img {
        max-width: 100%;
        height: auto;
    }

