/* 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." */


/* Dark theme */
@media(prefers-color-scheme: dark) {
  body {
    color:limegreen;
  }
}


/* General rules */
body {
  background-color: lightblue;
  background-image: url("/img/clouds.png");
  background-size: cover;
  color: black;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  margin:0;
}
body > * {
  margin:0 auto;
  max-width:960px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
img {
  display: block;
  max-width: 100%;
}
h1 {
  text-align:center;
}
footer {
  
}


/* Navigation bar */
#nav {
  background-color: #C0C0C0;
  border-width: 2px;
  border-style: outset;
  border-color: white black black white;
  margin:15px auto;
  position:sticky;
  top:0;
}
#nav .titlebar {
  background-image:linear-gradient(to right, #0000AA, #1084d0);
  display:flex;
  justify-content:space-between;
  padding:0 2px;
  color:white;
}
#nav .titlebarbuttons {
  display:flex;
  flex-flow:row wrap;
  margin:4px 0;
  height:14px;
}
#nav .titlebar img {
}
#nav ul {
  margin:5px 10px;
  display:flex;
  flex-flow:row wrap;
}
#nav li {
  background-color: #C0C0C0;
  border-width: 2px;
  border-style: outset;
  border-color: white black black white;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
#nav li:hover {
  background-color: #DADADA;
}
#nav li:active {
  background-color: #9B9B9B;
}

/* Title graphic */
#title {
  width:fit-content;
  margin-bottom: 15px;
  display:block;
}

/* Main page */
#main {
  background:pink;
  border:1px solid black;
  margin-bottom:15px;
}
#content {
 max-width:80%;
 margin:30px auto;
}

/* Footer */
#footer {
  background-color: #C0C0C0;
  border-width: 2px;
  border-style: outset;
  border-color: white black black white;
  margin:15px auto;
  position:sticky;
  bottom:0;
  display:flex;
  justify-content: space-between;
}
.footerleft {
  border-width: 2px;
  border-style: inset;
  border-color: black white white black;
  flex-grow:1;
}
.footerleft a {
  margin: 0 5px;
}
.footerright {
  border-width: 2px;
  border-style: inset;
  border-color: black white white black;
  background-image: url('/img/cat.png');
  background-repeat: no-repeat;
  background-position: right bottom;
}
.footerright p {
  margin: 0 5px;
}



/* Posts */
.posts {
  
}
.post {
  display:grid;
  grid-template-columns: 50px 1fr;
  border: 1px solid navy;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: hotpink;
  margin-bottom:15px;
}
.postavatar {
  height:50px;
  width:50px;
  margin: 10px;
  grid-column-start: 1;
}
.postavatar img {
  -webkit-border-radius: 30px;
  border-radius: 30px;
}
.postusername {
  grid-column-start: 2;
}
.postbody {
  grid-column-start: 2;
}
.postimg {
  display:block;
}

.emoji {
  display:inline;
}

/* Cats */
.cat {
  display:flex;
  justify-content:space-between;
  border:1px solid black;
  background-color:lavender;
  margin-bottom:15px;
  gap:1rem;
}
.cat.left {
  text-align: left;
}
.cat.right {
  text-align: right;
}
.catdesc {
  flex:1;
  margin:10px;
}
.catdesc h3 {
  margin: 0 0 15px 0;
}
.catpic {
  background-image: url("/img/cat.png");
  background-size: cover;
  min-height:50px;
  min-width:50px;
  max-height:250px;
}

/* Sitemap */
.sitemap #content ul {
  list-style-type: square;
}


/* Misc */
.bfly {
  max-width:150px;
  display:inline-block;
}