@font-face {
    font-family: 'Mandalika';
    src: url('../fonts/mandalika.woff2') format('woff2'),
         url('../fonts/mandalika.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Peachy Lime';
    src: url('../fonts/peachylime.woff2') format('woff2'),
         url('../fonts/peachylime.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Marigold Magic';
    src: url('../fonts/marigoldmagic.woff2') format('woff2'),
         url('../fonts/marigoldmagic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Always Forever';
    src: url('../fonts/alwaysforever.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Angelina';
    src: url('../fonts/angelina.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cinnamon Cake';
    src: url('../fonts/cinnamoncake.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Comic Runes';
    src: url('../fonts/fantasy/ComicRunes.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Elder Magic';
    src: url('../fonts/fantasy/eldermagic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Half Elven';
    src: url('../fonts/fantasy/halfelven.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Endor';
    src: url('../fonts/fantasy/endor.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
  /*define variables here*/
  
  --highlight-color: #fdffe4;
  --main-color: #efc8c3;
  --accent-dark: #a1699a;
  --accent-light: #cd8ea9;
  
  --title-font: "Half Elven", "Playwrite GB S", cursive;
  --heading-font: "Endor", "Amatic SC", cursive;
  --body-font: "Kavivanar", sans-serif;
  --strong-font: "Playwrite GB S", cursive;
  --text-light: #fff;
  --text-dark: #000;
  
  --cursor: url("../pictures/mini/manavial.gif"), auto;
  
  --background1: url("../pictures/backgrounds/wizardatnight.png");
  --background2: url("../pictures/backgrounds/pplstar.gif");
  }

body {
  background: var(--main-color);
  font-family: var(--body-font);
  cursor: var(--cursor);
  }
  
strong {
  font-family: var(--heading-font);
  color: var(--accent-dark);
  }

ul {
  background-color: var(--accent-dark);
  border: 2px dotted var(--accent-dark); 
  color: var(--text-dark);
  list-style-type: none;
  margin-top: 10px;
  margin-bottom: 1px;
  max-width: 500px;
  padding: 0;
  }

ul li {
  background-color: var(--accent-light);
  border: 2px dotted var(--accent-dark);
  padding: 5px;
  }

ul li:before {
  content: "⇛ ";
  }

ul li a {
	 color: var(--text-light);
 }

ul li a:hover {
	 color: var(--accent-dark);
 }

a {
  cursor: var(--cursor);
  color: var(--accent-dark);
  }
  
a:visited {
  cursor: var(--cursor);
  color: var(--accent-dark);
  }

a:hover {
  color: var(--highlight-color);
  }
  
iframe {
	border: none;
	height: 100%;
	width: 100%;
}

h1 {
	font-family: var(--heading-font);
	font-size: 24px;
	color: var(--accent-dark);
	border-bottom: 3px double var(--accent-dark);
  }
  
@media (orientation:portrait) {
  img {
    max-width: 200%;
    }
  }
  
h1 img {
  max-height: 40px;
  }