@import url('fonts.css');

@import url('colours.css');
body{
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--main-bg-colour);
  color: #faf0f3;
  font-family: "Lil Grotesk", "Comic Sans MS", sans-serif;
  font-size: large;
  font-kerning: none;
  }
  

h1{
  font-family: "Katahdin", sans-serif;
  text-align: center;
  font-size: xx-large;
  }
/*main title*/
.indexHeader{
  -webkit-text-stroke: 1px var(--main-header-accent-colour);
} 

h2{
  font-family: "Katahdin", sand-serif;
  text-align: left;
  font-size: x-large
}
/*grid doesnt work unless i add it with the nav grid maybe???*/

.comicpanel{
 display: block;
 margin: 0 auto;
 width: 80vw;
  }


#formnotice{
  text-align: center;
  padding: 8px;
  background-color: var(--notice-bg);
  border-style: outset;
  margin-bottom: 10px;
  }

#nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 13px;
  padding: 10px;
  border-radius: 1px 7px 7px 7px;
  font-family: "Abordage", sans-serif;
  }
  
#nav > div {
  background-color: rgba(5, 28, 12, 0.5);
  text-align: center;
  padding: 20px 0;
  font-size: 24px;
  border-radius: 10px 35px 18px;
  transition: 0.2s;
  outline-style: solid;
  outline-color: #674683;
  outline-width: 2px;
  
}
#nav > div:hover {
  background-color: var(--index-nav-hover-colour);
  box-shadow: 5px 5px 5px black;
  transform: translate(2px, 2px);
  }

 /* Links*/
a:link {
  color: #faf0f3;
}

a:visited {
  color: #ffbdbd;
}

a:hover {
  color: #ff6969;
}

a:active {
  color: blue;
} 

details, summary{
  cursor: pointer;
  }

.dropdownContents{
  list-style-type: none;
  }