:root {
  /* Background Colors: */
  --background-color: #0a0c1b;
  --content-background-color: #1a1630;
  --sidebar-background-color: #ffffff;

  /* Text Colors: */
  --text-color: #79fff2;
  --sidebar-text-color: #8533ce;
  --link-color: #6f8cdc;
  --link-color-hover: #83076d;

  /* Text: */
  --font: Alkia, sans-serif;
  --heading-font: bohemian_soul, serif;
  --font-size: 18px;

  /* Other Settings: */
  --margin: 16px;
  --padding: 24px;
  --border: 3px double #83076d;
  --sidebar-width: 200px;
  
}


* {
  box-sizing: border-box;
}

body { 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: auto;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("cats/omenshrine_background.jpg");
}
h1,h2 {
  font-family: var(--heading-font);
}
/* LINKS */

a {
  text-decoration: underline;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}


hr {
    clear: both;
    visibility: hidden;
}



.tophead {
  grid-column: 1 / span 2;
  text-align: center;
  background-color: var(--content-background-color);
  border: var(--border);
  margin: 5px;
  
  
}


/* main*/
.main {
  display: grid;
  max-width: 650px;
  grid-template-areas: "links omen" "mediaplayer stampsbutton" "aboutme aboutme";
  column-gap: 5px;
  row-gap: 5px;


}
h2 { text-align:center;}

.aboutme {
  grid-area: aboutme;
  padding-left: 15px;
  padding-right: 15px;
  background-color: var(--content-background-color);
  border: var(--border);

}