/*
  color references

  #CB7B0A Orange
  #ED2D0F red
  #FFD704 yellow
  #02003d very dark blue for text
  # dark gray blue
  #F7FDFF grey-white
  #060DCE bottom of sidebar rich blue
  #8386FA top of sidebar light blue
  #26f244 neon green
*/
  
body {
  background-color: #2C376E;
  color: #F7FDFF;
  font-family: 'Courier New', monospace;
  text-shadow: 2px 2px 2px #02003d;
}

/*text*/

h1 {
  color: #FFD704;
  font-size: 3em;
  font-family: arial;
  text-shadow: 5px 5px 3px #02003d;
}
h2 {
  color: #F7FDFF;
  font-size: 2em;
  font-family: courier;
  text-shadow: 5px 5px 3px #02003d;
}
p {
  color: #F7FDFF;
  padding: 10px;
}

/* links */

a:link {
  color: #FFD704;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #26f244;
}

/* mouse over link */
a:hover {
  color: #26f244;
}

/* selected link */
a:active {
  color: #060DCE;
}

header {
  background-color: #2C376E;
  background-image: linear-gradient(#060DCE, #000000);
  padding: 15px;
  text-align: center;
  font-size: 25px;
  color: #FFD704;
  text-shadow: 5px 5px 3px #02003d;
}

footer {
  background-color: #060DCE;
  background-image: linear-gradient(#060DCE, #000000);
  padding: 10px;
  text-align: center;
  color: #F7FDFF;
  text-shadow: 5px 5px 2px #02003d;
}


.linktable {
    overflow: auto;
    width: 100%;     
}

.linktable img {
  width: 300px;
  height: 100px;
  object-fit: cover;
}

.linktable table {
    border: 1px groove #F7FDFF;
    height: 200px;
    width: 998px;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 5px;
    text-align: center;

}

.linktable caption {
    caption-side: top;
    text-align: left;
    color: #FFD704;
    font-size: 30;
    font-family: arial;
    font-weight: bold;
    background: #8386FA;
    padding: 1rem;
}

.linktable th {
    border: 1px groove #F7FDFF;
    background-color: #060DCE;
    color: #FFD704;
    font-size: 35;
    font-family: 'arial';
    text-align: left;
    background-image: linear-gradient(#8386FA,#060DCE);
    padding: 6px;
}

.linktable td {
    border: 1px groove #F7FDFF;
    background-color: #426fa8;
    background-image: linear-gradient(#060DCE, #02003d);
    color: #F7FDFF;
    font-family: 'arial';
    text-align: left;
    padding: 6px;
}

/* Change color on hover */
.linktable a:hover {
  background-color: #26f244;
  color: #FFD704;
  padding: 0px
  
}

/* art gallery */
.gallery {
    display: inline-block;
    border: 1px solid #2C376E;
    margin: 5px;
}

.gallery .description {
    padding: 10px;
    text-align: center;
}
.gallery:hover {
    border: 1px dashed #26f244;
}

.gallery img {
    width: 300px;
    height: auto;
}

/* main chunk of stuff on the page */
.content {
  background-color: #060DCE;
  background-image: linear-gradient(#040894, #000000);
  max-width: 1000px;
  padding: 100px;
  text-align: left;
  float: none;
  border: 2px groove #F7FDFF;
}

/* top navigation bar */

.topnav {
  overflow: hidden;
  background-color: #8386FA;
  background-image: url('https://yanick.fm/images/elements/cloudbanner.png');
  /*background-image: linear-gradient(#060DCE, #8386FA);*/
  border: none;
  float: left;
  display: block;
  width: 100%;
  font-weight: bold;
}

/* the links in the nav bar */
.topnav a {
  text-align: left;
  text-decoration: none;
  color: #FFD704;
  font-size: 20;
  padding: 16px;
  font-family: 'arial';
}

/* change color on hover */
.topnav a:hover {
  background-color: #26f244;
  color: white;
}

/*lists*/
.list ul {
    list-style: none;
    padding: 0px;
    text-align: left;
}

ul li:before
{
    content: '\2661';
    margin: 0 1em;    /* heart */
}