@font-face {
 font-family: Jacquard;
 src: url("font/Jacquard12-Regular.ttf");
}
@font-face {
  font-family: Medodica;
  src: url("font/MedodicaRegular.otf");
}

body {
  font-family: "Medodica", monospace;
  background: url("https://web.archive.org/web/20091024200441/http://www.geocities.com/unicorn_pegasus/Stars_twinkle_Background.gif") repeat fixed #000;
  color: #fff;
  text-shadow: 1px 1px #000;
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  font-family: "Jacquard", monospace;
  color: tan;
}

hr {
  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;
  border: 0px;
  border-top: 1px solid grey;
}

a:link, a:visited {
  color: pink;
  text-decoration: none;
}
a:hover, a:active {
  color: teal;
  text-decoration: none;
}



#main {
  background: url("img/bg-main.jpg") repeat grey;
  display: grid;
  grid-template-columns: 2fr 6fr 2fr;
  grid-template-areas: 
    'header header header'
    'left content right'
    'footer footer footer';
  gap: 10px;
  padding: 10px;
  width: 80%;
  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;
}



#content {
  grid-area: content;
  background: #3c3c3c;
  border: 1px solid #fff;
  padding: 1em;
}
#content img {
  max-width: 90%;
}



#header {
  grid-area: header;
  background: #3c3c3c;
  border: 1px solid #fff;
  text-align: center;
  padding: 1em;
}
#header img {
  max-width: 100%;
}



#left {
  grid-area: left;
  background: #1f1f1f;
  border: 1px solid #fff;
  overflow: auto;
  padding: 1em;
}
#left > a { 
  display: block;
}
#left > a:before {
  content: '\2767';
  color: tan;
  padding-right: .2em;
}
#left a:link, #left a:visited {
  color: teal;
  text-decoration: none;
}
#left a:hover, #left a:active {
  color: pink;
  text-decoration: none;
}
#left img {
  display: block;
  max-width: 100%;
  padding-top: 1em;
  padding-bottom: 1em;
}



#right {
  grid-area: right;
  background: #1f1f1f;
  border: 1px solid #fff;
  overflow: auto;
  padding: 1em;
}
#right img {
  max-width: 100%;
}
#right a:link, #right a:visited {
  color: teal;
  text-decoration: none;
}
#right a:hover, #right a:active {
  color: pink;
  text-decoration: none;
}



#footer {
  grid-area: footer;
  background: #3c3c3c;
  border: 1px solid #fff;
  text-align: center;
  padding: 1em;
}
#footer img {
  max-width: 100%;
}



@media only screen and (max-width:700px){
  #main {
    display: block;
    width: 90vw;
  }
  #header {
	margin-bottom: 10px;
  }
  #footer {
	margin-top: 10px;
  }
  #content, #left, #right {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}