@import url(vars.css);

body{
  background-color: var(--accColor3);
  font-family: 'mainText';
  font-size: 1.2em;
}

.middle{
  background-color: var(--accColor2);
  color: var(--mainColor);
  border: var(--accText) var(--spacing) ridge;
  border-radius: var(--spacing);
  max-width: 675px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
}

header{
  font-family: 'boldText';
  text-align: center;
}
nav{
  text-align: left;
}
nav ul{
  display: flex;
}
nav ul li{
  text-decoration: none;
  justify-content: center;
  justify-items: center;
  list-style: none;
}
nav ul li a{
  padding: var(--spacing);
}
nav ul li a:hover{
  background-color: var(--accText);
}

main{
  background-color: var(--mainColor);
  color: var(--mainText);
  overflow: scroll;
  height: 100%;
  padding-bottom: 50px;
  padding-left: 20px;
  padding-right: 20px;
  max-height: 600px;
}
footer{
  text-align: center;
}
a {
  color: var(--mainColor);
  text-decoration: none;
}
main a{
  color: var(--mainText);
  text-decoration: underline;
}
main a:hover{
  color: var(--accText);
}
.post{
  color: var(--mainText);
  text-decoration: underline;
}
.post:hover{
  color: var(--accText)
}
.button{
  background-color: var(--accText);
  color: var(--mainColor);
  text-decoration: none;
  border: var(--accColor3) 5px ridge;
  border-radius: 5px;
  padding: 2px;
  margin: var(--spacing);
  display: block;
  text-align: center;
  width: fit-content;
}
.button:hover{
  background-color: var(--accColor2);
  color: var(--mainColor);
  text-decoration: none;
}
article{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.picture{
  border: var(--accColor3) 5px ridge;
  border-radius: 5px;
  height: 250px;
  width: auto;
}