/*general basics for the whole site*/
body {/*background*/
  background-color: #CFE6CF;
  }
a {   /*link*/
  color: #182F18;
  text-decoration: underline dotted #ff8000;
  cursor: pointer;
  }
p {   /*text*/
  color: #182F18;
  font-family: verdana;
  overflow-wrap: break-word;
  line-height: 2;
  cursor: crosshair;
  }
h1 {    /*biggest heading*/
  color: #182F18;
  font-family: verdana;
  overflow-wrap: break-word;
  line-height: 2.5;
  }
h3 {    /*third-largest heading/subtitle*/
  color: #182F18;
  font-family: verdana;
  overflow-wrap: break-word;
  line-height: 2;
  }
  
nav ul {
  list-style-type: none;
  font-family: verdana;
  margin: 0;
  padding: 0;
  line-height: 3;
}
  li a:hover:not(.active) {
    background-color: #CFE6CF;
    padding: 10px;
  }

/*classes start with a '.' Classes can be referenced in html sheet by using (tag class="name")*/

.date{/*special text is highlighted*/
 margin: 5px;
 font-family: yu gothic light;
 color: #C76A30;
 background-color: #F4E8C3;
}
.button { /*pale green button*/
  background-color: #EEF6EE;
  border: outset;
  border-color: #F4E8C3;
  border-radius: 3px;
  color: #182F18;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: verdana;
  font-size: 16px;
  margin: 4px 2px;
  }
.buttondisable{
  background-color: #93c893;
  opacity: 0.5;
  border: inset;
  border-color: #F4E8C3;
  border-radius: 3px;
  color: #182F18;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: verdana;
  font-size: 16px;
  margin: 4px 2px;
}
.page {/*basic settings for text posts*/
  background-color: #FBF7EA;
  border: 1px outset #F4E8C3;
  margin: 5px;
  padding: 10px;
  
 }
 
* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
}

nav ul {
  list-style-type: none;
  font-family: verdana;
  margin: 0;
  padding: 0;
  line-height: 3;
}
  li a:hover:not(.active) {
    background-color: #CFE6CF;
    padding: 10px;
  }
/* Mobile first */
.container > * {
  font-family: verdana;
  padding: 10px;
  grid-column: col-start / span 12;
}

@media (min-width: 576px) {
  .sidebar {
    background-color: #93c893;
    grid-column: col-start / span 2;
    grid-row: 3;
  }
  .content {
    grid-column: col-start 3 / span 12;
  }
  nav ul {
    display: flex;
    justify-content: space-between;
    background-color: #93c893;
  }
}

@media (min-width: 768px) {
  .nav {
    grid-column: col-start / span 2;
    grid-row: 2 / 4;
    background-color: #93c893;
  }
  .content {
    grid-column: col-start 3 / span 8;
    grid-row: 2 / 4;
  }
  .sidebar {
    grid-column: col-start 11 / span 2;
    grid-row: 2 / 4;
    background-color: #93c893;
  }
  nav ul {
    flex-direction: column;
    padding: 8px 10px;
  }
}
.frameworkHeader {
  text-align: center;
  transform: skew(1deg, -1deg);
}
.footer {
  margin: 10px;
  text-align: center;
  font-family: verdana;
  
}