Cacher is the code snippet organizer for pro developers

html,
body {
  max-width: 1200px;
  margin: auto;
  font-family: "Space Mono", sans-serif;
  font-size: 18px;
  line-height: 1.4em;
  color: GhostWhite;
}

body {
  background-image: url("../img/space.jpg");
  height: 100%;
  background-attachment: fixed;
  background-size: cover;
}

.clearfix {
  clear: both;
}

/* Title and Description */

.page-title {
  text-align: center;
  margin: auto;
  line-height: 2em;
}

.logo {
  height: 80px;
  width: 80px;
  background-image: url("../img/spaceship.png");
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;
  top: 1em;
}

.page-title h1 {
  display: inline-block;
}

.main {
  text-align: center;
}

.page-description {
  font-size: 0.8rem;
  padding: 30px;
}

.learn-more {
  color: DarkOrange;
  text-decoration: none;
  display: block;
  margin: 25px 0 0 0;
  font-weight: bold;
}

/* Gallery */

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.gallery-item {
  margin: 20px;
}

.gallery-item .thumbnail {
  width: 240px;
  border: 2px solid GhostWhite;
  border-radius: 4px;
}

/* Footer Navigation */

nav {
  margin-top: 30px;
}

nav ul {
  display: block;
}

nav li {
  display: inline;
  margin: 0 20px 0 0;
  color: GhostWhite;
}

nav a {
  line-height: 60px;
  border: 1px solid GhostWhite;
  padding: 7px;
  border-radius: 4px;
  color: DarkOrange;
  text-decoration: none;
}

.contact-btn {
  cursor: pointer;
  margin: 20px 30px;
  text-align: center;
}

.contact-btn a:active {
  position: relative;
  bottom: 2px;
}


@media only screen and (max-width: 480px) {
  .page-title {
    width: 270px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px), (orientation: portrait) {
  .gallery-item .thumbnail {
    width: 95%;
  }
}


@media only screen and (min-resolution: 150dpi) {
  .logo {
    background-image: url("../img/spaceship@2x.png");
  }
}

@media only screen and (max-resolution: 150dpi) and (max-width: 480px) {
  .page-description {
    font-size: 20px;
  }
}


@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .page-title, .page-description {
  	float: left;
    width: 20em;
	}
  .page-description {
      text-align: left;
	}
}

MEDIA QUERIES
Review: Media Queries
Incredible work! You learned how to change the way a website appears on different screens with media queries and breakpoints

Throughout this lesson, you learned:

When a website responds to the size of the screen it’s viewed on, it’s called a responsive website.
You can write media queries to help with different screen sizes.
Media queries require media features. Media features are the conditions that must be met to render the CSS within a media query.
Media features can detect many aspects of a user’s browser, including the screen’s width, height, resolution, orientation, and more.
The and operator requires multiple media features to be true at once.
A comma separated list of media features only requires one media feature to be true for the code within to be applied.
The best practice for identifying where media queries should be set is by resizing the browser to determine where the content naturally breaks. Natural breakpoints are found by resizing the browser.
With your knowledge of media queries and CSS, you can make websites that look great on any device, from a small phone to a huge television. By making your websites responsive, you’ll make it possible for any of your users to have a great experience.