* {
  line-height: 1.5;
  padding: 0;
}

ul,
ol {
  padding-left: 22px;
}

body {
  margin: 0;
  padding: 0;
  font-family: "MozillaText", sans-serif;
  background: #fff url('../img/background.jpg') no-repeat scroll -95px top;
  color: #000;
}

h1,h2,h3,h4,h5,h6 {
  font-family: "MozillaHeadline", sans-serif;
  line-height: 1.1;
}

h2 {
  font-size: 1.75em;
  color: #b72822;
  margin-bottom: 0;
}

h4 {
  margin: 0 0 0 15px;
  border-bottom: 1px solid #ccc;
}

h4 a {
  color: black;
}


a {
  color: #148cb5;
  text-decoration: none;
}

a:hover {
  color: #148cb5;
  text-decoration: underline;
}

.menu {
  display: flex;
  gap: 8px;
  list-style-type: none;
  padding: 0;

  &.vertical {
    flex-direction: column;
  }
}

.menu-item {
  align-items: center;
  display: flex;
  gap: 8px;
}

#header {
  background: url('../img/header-bg.jpg');
  height: 100px;

  & h1 {
	  display: flex;
	  margin: 0 16px;
	  align-items: center;
	  height: 100%;
  }

  & a {
    color: #ffffff;

    &:hover {
      text-decoration: none;
    }
  }
}

#dino {
  background: url('../img/header-dino.jpg') no-repeat;
  height: 100px;
  width: 300px;
}

#utility {
  font-size: 62.5%;
  margin: 0.8em 0 0.7em 30px;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 30px 0 0;
}

#utility * {
  display: inline;
}

#utility p {
  margin-right: -20px;
}

#utility strong {
  color: #000;
  font-size: 11px;
}

#utility ul {
  margin-left: 10px;
}

#utility li {
  background: transparent url('../img/bullet_utility.png') no-repeat 4px center;
  padding-left: 16px;
  font-size: 11px;
}

#utility li:first-child {
  background: none;
  padding: 0;
}

.main-container {
  display: flex;
  gap: 16px;
  margin: 0 auto;
  max-width: 1200px;
}

.main-content {
  flex-grow: 1;
  max-width: 900px;
}

/* Post */
.post {
  border: 1px solid #eeeeee;
  border-radius: 8px;
  box-shadow: #dddddd 0 0 8px 0;
  margin-block: 16px;
  padding-block: 8px;
  padding-inline: 16px;

  & img {
	  width: 50% !important;
	  height: 50% !important;
  }
}

.post-title a {
  color: #000000;
  font-size: 1.5rem;
}

.post-metadata {
  color: #555555;
  font-size: 0.85rem;
  margin-block-start: -1.15rem;
}

/* Label */
.label {
  background-color: #eeeeee;
  border-radius: 4px;
  font-size: 0.85rem;
  padding-block: 4px;
  padding-inline: 8px;
}

/* Footer */
#footer {
  background-image: url('../img/footer.jpg');
  background-position: center;
  background-repeat: no-repeat;
}

#footer-content {
  padding-top: 100px;
}

#footer-content p {
  text-align: center;
  padding: 5px;
  background-color: #2a2a2a;
  color: #999999;
  font-size: 0.9em;
}

.sidebar-content {
  max-width: 300px;
	font-size: 70%;
}

.sidebar-content .feeds,
.sidebar-content .disclaimer {
  padding-left: 15px;
}

.sidebar-content .feeds p {
  padding: 0;
  margin: 5px 0 0 0;
}

.sidebar-content .main {
  background: transparent url('../img/sidebar-back.png') no-repeat left top;
  background-size: 100%;
  padding: 15px 0 0 15px;
}

.sidebar-content .feeds ul,
.sidebar-content .main ul.planets {
  padding-left: 10px;
}

.sidebar-content .main ul.planets li {
  font-size: 1.3em;
}

.sidebar-content .subscriptions {
  list-style-type: none;
  padding-left: 10px;
}

.sidebar-content .main .bottom {
  height: 28px;
  width: 100%;
  background: transparent url('../img/sidebar-bottom.png') no-repeat 50% bottom;
  padding-bottom: 30px;
}

.sidebar-content .message {
  cursor: help;
  border-bottom: 1px dashed red;
}

.sidebar-content a.message:hover {
  cursor: help;
  background-color: #ffD0D0;
  border: 1px dashed red !important;
  text-decoration: none !important;
}

/* Unstyled video tags can break the site layout as they take the whole viewport width */
video {
  max-width: 80%;
  border: 1px solid lightgray;
  border-radius: 10px;
}

@media (width < 900px) {
  .main-container {
    flex-direction: column;
    margin: 16px;
  }
  .main-content,
  .sidebar-content {
    min-width: 100%;
  }
}