html{
  background-color: rgb(48, 0, 0);
  padding: auto;
  margin: auto;
  
}


body{
    margin: 0px;
    color: white;
    
}
main{
    margin: 10px;
    padding: 10px;
    border: solid gray;
    margin-left: 5%;
    margin-right: 5%;
    background-color: black;
    
}
h1{
    text-align: center;
}



.navbar ul{
    list-style-type: none;
    background-color: hsl(0, 100%, 22%);
    padding: 0px;
    margin: 0px;
    overflow:hidden;
    text-align: center;
    
    background-repeat: no-repeat;
    
    height: 40px;             /* fixed height */
    line-height: 30px;        /* centers single-line text vertically */
    white-space: nowrap;      /* keep nav items on one line */
    justify-content: center;    /* center horizontally */
    align-items: center;        /* keep them aligned vertically */
    
    display: flex;
    border: solid rgb(80, 0, 0);
    
    
}
.navbar a{
    color: white;
    text-decoration: none;
    padding: 15px;
    display: inline-block;
    text-align: center;
    font-size: large;
}
.navbar a:hover{
    background-color: hsl(0, 0%, 10%);
}
.navbar li{
    float: left;
    text-align: center;
    }
.header{
  margin: 0%;
  text-align: center;
  align-items: center;
  align-content: center;
  background-image:url(Logo.png), url(headerbackground001.jpg) ; 
  background-position: center, center;
  background-size: 480px,800px;
  background-repeat: no-repeat,repeat;
  height: 150px;
  width: auto;
  color: black;
  
}

.h1 img{
  height: auto;
  width: 20px;
}


h4{
  padding: 0%;
}
.grid-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  gap: 0px;                              /* space between columns */
}

.grid-columns > div {
  background-color: #000000a6;
  padding: 5px;
  text-align: center;
  font-size: 22px;
}
article{
  
  width: 800px;
}

.duocolumn{
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* three equal columns */
  gap: 3px;                              /* space between columns */
}
iframe{
  padding: 50px;
  border-width: 5px;
  border-color: rgba(255, 0, 0, 0.219);
}
.gif-link {
  border: 3px solid rgb(114, 114, 114);   /* thickness, style, color */
  border-radius: 8px;      /* optional: rounded corners */
}
.gif-link:hover {
  border: 3px solid rgb(255, 0, 0);
}
.grid-columns01 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* three equal columns */
  gap: 10px;                              /* space between columns */
}
.grid-columns01 > div {
  padding: 5px;
  text-align: left;
  font-size: 18px;
}

.gallery{
    display: inline-block;
    border: 2px solid  rgb(114, 114, 114);
    margin: 5px;
    width: 300px;
}
.gallery .description{
    padding: 10px;
    text-align: center;
}
.gallery:hover{
    border: 2px solid rgb(255, 0, 0);
}
.gallery img{
    width: 100%;
    height: auto;
}
.bio{
  text-align: center;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  background-color: aquamarine;
}
.bio th,td{
  padding: 1rem;
  align-content: center;
  text-align: center;


}
table{
  margin: auto;
}


.centerTable { margin: 0px auto; }

.resp{
  width: 100%;
  max-width: 300px;
  height: auto;
  display: grid;
  aspect-ratio: 5/7;
  object-fit:fill;
  justify-items: center;
  margin: auto;
}

.BioGrid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: auto;
  gap: 1em;
  border: 10px solid rgba(255, 255, 255, 0.089);
  justify-items: center;
  max-width: 800px;
  justify-self: center;
  background-color: rgb(0, 0, 0);

}
.box {
  font-size: 2em;
  text-align: center;
  border-radius: 15px;
  justify-content: center;
  margin: auto;
}
#box1{
  
}
#box2{
  
  
}
#box3{
  
}