html { 
    background-image: url("background.png");
    background-repeat: repeat;
}

body { 
    background: ghostwhite;
    color: #525252;
    width: 1100px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Montserrat', 'Helvetica', sans-serif;
    line-height: 1.25;
    }

.header {
     border-radius: 20px;
    background: #57c1eb;
    background: linear-gradient(90deg,rgba(87, 193, 235, 1) 0%, rgba(87, 199, 178, 1) 37%, rgba(195, 74, 255, 1) 100%);
      font-size: 1.2em;
      height: 75px;
      position: relative;
      padding-top: 10px;
      width: 100%;

}
/*Gradient source: https://cssgradient.io/*/



.header a {
      text-decoration: none;
      color: #4B0082;

}

a:link {
    color: #4B0082;
    font-weight: 600;
}

a:visited {
   color: #4B0082;
}

a:hover {
   text-decoration: underline;
   background: #0D0628;
   font-weight: 800;
   color: white;
}



li {
   display: inline;
   padding-right: 10px;
   align: left;
}


.bodycopy {
   height: 100%
   background: white;
   width: 90%;
   margin-top: 50px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 50px;
   padding-left: 30px;
}


.homepage img {
     float: right; 
     height: 200px;
     width: 200px;
     border-radius: 20px;
     margin-left: 15px;
}


h1 { 
   font-family: 'Prata';
   color: #2DB2E6;
 }

h2 { 
font-family: 'Prata';

}

h3 { 
font-family: 'Prata';

}



/*Table Styling:*/
table {
    table-layout: fixed;
    width: 400px;
    margin: 0 auto;
      min-width: 500px;

}

th {
    background: #2DB2E6;
    color: #0D0D0D;
    padding: 0.6em;
    text-align: left;
}


td {
    padding: 0.6em;
    text-align: left;
    background: lavender; 


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}


/* image gallery on project page - 
found it on W3C schools and modified, 
but it's not doing what I want it to */
div.gallery {
   display: inline-block;
   align-items: center;
  margin: 5px;
  border: 1px solid #ccc;
  width: 50px;

}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}


.center { 
   display: block; 
   margin-left: auto; 
   margin-right: auto; 
   width: 800px; }

input {
    width: 100%;
    padding: 10px;

}




.button {
    background:    skyblue;
    border-radius: 11px;
    border: solid 2px white;
    padding:       20px;
    color:         #ffffff;
    display:       inline-block;
    font:          normal 20px/1 "Montserrat", sans-serif;
    text-align:    center;
    
}


.footer {
    background: skyblue;
      border: 2px solid white;
      width: 100%;
      border-radius: 20px;
      text-align: center;

}

.footer a {
   clear: right;
   text-decoration: none;
   align: left;

}