@keyframes buttonanim {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
  0%   {background-color:white; color:black}
  100% {background-color:black; color:white}
}

main {
    gap: 200px
}
body {
}
img{
    height: 600px;
}
.gt{
    font-family: "Impact", "Lucida Console", monospace;
    font-weight: bold;
    font-size: 40px;
    background-image: linear-gradient(to bottom, aqua, deepskyblue);
    background-clip: text;
    color:transparent;
}
header{
    background-color: white;
    width: 400;
    box-sizing: border-box;
    
    height: 100px;
    padding: 5px;
    border: 3px solid rgb(0, 0, 0);
    margin: 50px;  
}
button{
    font-weight: bold;
    font-size: 24px;
    color:rgb(0,0,0) ;
    font-family:'Courier New';
    background-color: lightgray;
    width: 100%;
    height: 100%;
    border: 3px solid rgb(0, 0, 0);
    display: inline-block;
    color: rgb(0, 0, 0);
      gap: 0;
}
button:hover {
  animation-name: buttonanim;
  animation-duration:1s;

}




h1{
    font-family: Impact;
    color: rgb(255, 0, 187);
}
iframe {
    display: flex;
    width: 100%;
    height: 600;
}

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "menu menu"
    "content content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 3px;
  background-color: rgb(0, 0, 0);
  padding: 5px;
border: 3px solid rgb(0, 0, 0);
}
.container div {
  background-color: gray;
  padding: 10px;
}
.container div.header {
    font-weight: bold;
    color:rgb(255, 255, 255) ;
    font-family:'Courier New';
  grid-area: header;
  font-size: 50;
  text-align: center;
   border: 10px solid transparent;
   background-image: url('CheckeredFlagHeader01.png'); 
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  height: 60px;
}
.container div.menu {
    gap: 0;
    margin:0px;
    padding:0px;
    width: 100%;
    grid-auto-flow: column;
    display: grid;
  grid-area: menu;
  object-fit: fill;
}
.container div.content {
  grid-area: content;
}
.container div.footer {
  grid-area: footer;
  text-align: center;  
}