/* FONTS */

@font-face {
  font-family: GothicValentine;
  src: url("https://witchinghourwebring.neocities.org/fonts/Gothic%20Valentine.ttf");
}

@font-face {
  font-family: Calvino;
  src: url("https://witchinghourwebring.neocities.org/fonts/Calvino-Regular.ttf");
}

@font-face {
  font-family: Calvino;
  src: url("https://witchinghourwebring.neocities.org/fonts/Calvino-Bold.ttf");
  font-weight: bold;
}

@font-face {
  font-family: Calvino;
  src: url("https://witchinghourwebring.neocities.org/fonts/Calvino-Italic.ttf");
  font-style: italic;
}

@font-face {
  font-family: Calvino;
  src: url("https://witchinghourwebring.neocities.org/fonts/Calvino-Bold-Italic.ttf");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: WitchHat;
  src: url("https://witchinghourwebring.neocities.org/fonts/Witch%20Hat.otf");
}

/* LAYOUT */

body {
  display: flex;
  justify-content: center;
  min-height: 500px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='114' height='114' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(159)'%3E%3Crect width='100%25' height='100%25' fill='rgba(47, 34, 63,1)'/%3E%3Cpath d='M-10 0.5h60v3h-60z' fill='rgba(15, 19, 26,1)' filter='url(%23filter-doodad-1)'/%3E%3Cpath d='M-10 40.5h60v3h-60z' fill='rgba(15, 19, 26,1)' filter='url(%23filter-doodad-1)'/%3E%3Cpath d='M-10 29.5h60v1h-60z' fill='rgba(247, 250, 252,1)' filter='url(%23filter-doodad-2)'/%3E%3Cpath d='M29.5-10v60h1v-60z' fill='rgba(247, 250, 252,1)' filter='url(%23filter-doodad-2)'/%3E%3Cpath d='M8.5-10v60h3v-60z' fill='rgba(15, 19, 26,1)' filter='url(%23filter-doodad-1)'/%3E%3C/pattern%3E%3Cfilter id='filter-doodad-1'%3E%3CfeTurbulence baseFrequency='0.30000000000000004' numOctaves='2' type='fractalNoise' result='result1'/%3E%3CfeDisplacementMap in2='result1' scale='3' result='result2' xChannelSelector='R' in='SourceGraphic'/%3E%3CfeComposite in2='result2' in='SourceGraphic' operator='atop' result='fbSourceGraphic'/%3E%3C/filter%3E%3Cfilter id='filter-doodad-2'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' type='fractalNoise' result='result1'/%3E%3CfeDisplacementMap in2='result1' scale='1' result='result2' xChannelSelector='R' in='SourceGraphic'/%3E%3CfeComposite in2='result2' in='SourceGraphic' operator='atop' result='fbSourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
  font-size: 16px;
  color: black;
  font-family: Calvino, Georgia, serif;
  line-height: 1.3em;
  margin: 20px;
  padding: 15px;
}

.gridlayout {
  width: 1000px;
  display: grid;
  grid-gap: 10px;
  grid-template: "header" "main";
}

header {
  grid-area: header;
  height: 75px;
  width: 80%;
  background: lightgray;
  margin-left: auto;
  margin-right:auto;
  padding: 5px;
  text-align: center;
  border: 18px solid transparent;
  border-image: url("https://witchinghourwebring.neocities.org/images/whitelaceborder.png") 34 round;
  background-clip: padding-box;
  display: flex;
  justify-content: center;
  align-items: center;
}


main {
  grid-area: main;
  width: auto;
  height: auto;
  overflow: hidden;
  background: lightgray;
  padding: 15px;
  border: 18px solid;
  border-image: url("https://witchinghourwebring.neocities.org/images/whitelaceborder.png") 34 round;
  background-clip: padding-box;
}

/* TEXT */

::selection {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  text-shadow: none;
}

bigbold {
  font-weight: bold;
  font-size: 1.2em;
}

blockquote {
  color: rgba(0, 0, 0, 0.1);
  font-family: Courier, Georgia, serif;
  padding: 5px;
  margin: 1em;
}

mark {
  text-shadow: 1px 1px 3px;
  background-color: inherit;
  color: purple;
}

/* LINKS */

a {
  text-decoration: underline;
  color: purple;
}

a:hover {
  color: darkblue;
  text-decoration: none;
}

.link {
  text-align: right;
  margin: 20px;
}

/* HEADINGS */

h1 h2 h3 h4 h5 h6 {
  font-family: Georgia, serif;
  line-height: 2em;
}

h1 {
  text-align: center;
  font-family: GothicValentine;
  font-size: 3.5em;
  text-shadow: 3px 3px 1px gray;
}

h2 {
  text-align: center;
  font-family: GothicValentine;
  font-size: 2em;
  text-decoration: underline dashed;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.3em;
}

h5 {
  font-size: 1.2em;
}

h6 {
  font-size: 1.1em;
}

/* /HR LINE BREAK */

hr {
  border: 0;
  border-top: 2px dashed white;
  margin: 1.2em;
}

/* BOXES */

.box {
 border: 1px solid white;
 background: white;
 border-radius: 2px;
 box-shadow: 1px 1px 5px;
 width: 450px;
 height: auto;
 max-width: 100%;
 overflow: hidden;
 margin: auto;
 text-align: center;
 justify-content: center;
}

.box ul {
  list-style-type: none;
  margin: 0;
  padding: 10px;
}

/* MEMBERS TABLE */

table {
  border: 3px solid white;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  background: darkgray;
  width: 100%;
  text-align: center;
  justify-content: center;
}

table th {
  border: 2px solid white;
  padding: 8px;
}

table td {
  border: 2px solid white;
  padding: 8px;
}

.members {
  overflow: auto;
}
  

/* TEXTAREA CODE BLOCK */

textarea {
  display: block;
  margin: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  max-width: 100%;
  height: 100px;
  box-shadow: 1px 1px 5px;
  font-size: 10px;
}

/* CENTERING DIVS */

.center {
  display: block;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

/* WITCH HAT FONT DIVIDER DIV */

.witchhat {
  font-family: WitchHat;
  font-size: 1em;
  color: purple;
  text-align: center;
}

/* IMAGES */

.headerimg {
  display: block;
  width: auto;
  height: auto;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
}

.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 85%;
}

/* MOBILE */

@media (max-width: 800px) {
  body {
    font-size: 15px;
    line-height: 1.5em;
  }
  
  .gridlayout {
    width: 100%;
    grid-template: "header" "main";
  }
  
  main {
    max-height: none;
    padding: 15px;
    max-width: 100%;
  }
  
  textarea {
    width: 75%;
  }
  
  .center {
    width: 75%;
  }
  
  h1 {
    line-height: 0.9em;
    font-size: 2.75em;
  }
  
  h2 {
    line-height: 1em;
  }
  
  .witchhat {
    max-width: 100%;
    overflow: hidden;
  }
}