/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image:url(images/joeslairentrancelowres.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: white;
  font-family: arial;
  
}
  
a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #a7c5cc;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
  
}



.container{
    
    max-width: 750px;
    margin: 20px auto;
    display: grid;
    grid-gap: 3px;
    grid-template-columns:150px 300px 150px 150px ;
}


intro {
  text-align: center;
  display: block;
  margin: 20px auto auto 10px;
  color: white;
  font-family: arial;
    

}
      
header img {
      height: auto;
      max-width: 100%;
      display: block;
      margin: auto auto 20px auto;

  /* Animation properties */
  animation-name: float;
  animation-duration: 5s; /* How long one cycle takes */
  animation-iteration-count: infinite; /* Makes it repeat forever */
  animation-timing-function: ease-in-out; /* Smooths the start and end of the movement */
}

/* The @keyframes rule defines the animation stages */
@keyframes float {
  0% {
    transform: translateY(0); /* Start at the original position */
  }
  50% {
    transform: translateY(10px); /* Move up 20 pixels in the middle of the animation */
  }
  100% {
    transform: translateY(0); /* Return to the original position */
  }
  
}

about  {
    padding:10px;
    background: rgb(33, 33, 31,0.4);
    border: white 4px;
    border-style:groove;
    grid-row: 1 / 2;
    grid-column: 1 / 5;
}

musicplayer {
    padding: 0px;
    background: rgb(33, 33, 31,0.4);
    max-height: 254px;
    margin: auto;
    border: white 4px;
    border-style:groove;
    grid-row: 2 / 3;
    grid-column: 1 / 4;
}

adright {
  
  padding:0px;
  height: auto;
    background: rgb(33, 33, 31,0.4);
    border: white 4px;
    border-style:groove;
    grid-row: 2 / 4;
    grid-column: 4 / 5;
  
}

adright img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  
}

sidebar {
    
    padding:10px;
    background: rgb(33, 33, 31,0.4);
    border: white 4px solid;
    border-style:groove;
    line-height:0.5;
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    height: max-content;

}

main {
    padding:10px;
    background: rgb(33, 33, 31,0.4);
    border: white 4px solid;
    border-style:groove;
    grid-row: 3 / 4;
    grid-column: 2 / 4;
    height: max-content;

}

gallery {
    text-align: center;
    padding:10px;
    background: rgb(33, 33, 31,0.4);
    border: white 4px solid;
    border-style:groove;
    max-height:400px;
    overflow-y: scroll;
    grid-row: 4 / 5;
    grid-column: 2 / 4;
    
}

gallery img {
  
    max-width: 400px;
    max-height: 400px;
    
    
}

weblinks {
  padding:10px;
    background: rgb(33, 33, 31,0.4);
    border: white 4px solid;
    border-style:groove;
    grid-row: 5 / 6;
    grid-column: 2 / 3;
    height: max-content;
    
}

ad {
  padding:0px;
    background: rgb(33, 33, 31,0.4);
    border: white 4px solid;
    border-style:groove;
    object-fit: fill;
    grid-row: 4 / 5;
    grid-column: 1 / 2;
    height: auto;
    
}

ad img {
  
    width: 100%;
    height: 100%;
    object-fit: fill;
    
}


contact {
  padding:10px;
    background: rgb(33, 33, 31,0.4);
    border: white 4px solid;
    border-style:groove;
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    
}
  
form {
    padding:10px;
    background: rgb(33, 33, 31,0.4);
    border: white 2px solid;
    border-style:groove;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    
    
}

contact img {
  max-height: 50px;
  max-width: 50px;
  
}