/* Mobile View */

html { 
  background: url(../images/campsite-satellite-img.png) no-repeat 20% 0 fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 50% 50%;
  grid-template-areas:
    "content"
    ".";
  justify-items: center;
  align-items: center;
}

.circle {
  grid-area: content;
  display: grid;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  background: #014421;
  border-radius: 50%;
}

.circle-content {
  margin: auto auto;
  text-align: center;
  color: white;
}
.circle-content a {
  color: white;
}
.circle-content a:hover {
  color: grey;
}

#countdown {
  text-align: center;
  font-size: 30px;
  margin-top: 0;
}

.social-links{
  font-size: xx-large;
}

/* Desktop View */
@media screen and (min-width: 480px) {
  html { 
    background: url(../images/campsite-satellite-img.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  body {
    width: 100vw;
    height: 100vh;
    margin: 0;
  }
  
  .container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 20% 60% 20%;
    grid-template-areas:
      ". . ."
      ". content ."
      ". . .";
    justify-items: center;
    align-items: center;
  }
  
  .circle {
    grid-area: content;
    display: grid;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
    background: #014421;
    border-radius: 50%;
    color: white;
  }
  
  .circle-content {
    margin: auto auto;
  }
}