/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
    font-family: "rainyhearts";
    src: url(fonts/rainyhearts.ttf) format("truetype");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "billo";
    src: url(fonts/billo.TTF) format("truetype");
    font-weight: 500;
    font-style: normal
}


@font-face {
    font-family: "stringlime";
    src: url(fonts/Stringlime.otf) format("truetype");
    font-weight: 500;
    font-style: normal
}

.container {
  display: grid;
  grid-template:
    "header header header header header header" /* row 1 */
    "sidebar main main main main main"  /* row 2 */
    "sidebar footer footer footer footer footer" /* row 3 */
	/ 1fr 10fr;
}

/* assign your elements to the areas you defined in the grid-template rule: */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
.footer { grid-area: footer; }
			
.sidebar {
  border: 9px solid transparent;
  border-inline: 19px solid transparent;
  padding: 15px;
  border-image-source: url(backgrounds/bordersidebars.png);
  border-image-slice: 138 88 130 107;
  border-image-width: 20px 20px 20px 20px;
  border-image-repeat: stretch; 
  background-clip: padding-box;
  background-color: white;
}

.header {
  border: 10px solid transparent;
  border-inline: 12px solid transparent;
  padding: 15px;
  border-image-source: url(backgrounds/borderheader.png);
  border-image-slice: 134 146 123 173;
  border-image-width: 20px 20px 20px 20px;
  border-image-repeat: stretch;
  background-clip: padding-box;
  background-color: white;
}

.footer {
  border: 10px solid transparent;
  border-inline: 12px solid transparent;
  padding: 15px;
  border-image-source: url(backgrounds/borderheader.png);
  transform: scaleY(-1);
  border-image-slice: 134 146 123 173;
  border-image-width: 20px 20px 20px 20px;
  border-image-repeat: stretch;
  background-clip: padding-box;
  background-color: white;
}

.footer-content {
  transform: scaleY(-1); 
}

body {
  color: black;
  font-family: "rainyhearts",monospace,sans-serif,"MS gothic";
  background-color: #E6E6FA;
  margin: 0;
  font-size: 2vw;
  
}

body {
  cursor:url(cursors/Handwriting.png),auto;
}

main {
  border: 10px solid transparent;
  border-inline: 12px solid transparent;
  padding: 14px;
  border-image-source: url(backgrounds/bordersidebars.png);
  transform: scaleX(-1);
  border-image-slice: 134 146 123 173;
  border-image-width: 20px 20px 20px 20px;
  border-image-repeat: stretch;
  background-clip: padding-box;
  background-color: white;
}

.main-container {
  transform: scaleX(-1);
  background-color: white;
}

h1 {
  color: black;
  font-family: "billo",monospace,sans-serif,"MS gothic";
  font-size: 4vw;
}

h3 {
  font-size: 3vw;
  text-decoration: underline;
}

#glossarySubject {
  font-weight: bold;
  text-decoration: underline;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}