* {
  box-sizing: border-box;
  font-family: 'Bree Serif', serif; }

body {
  background: url("https://images.unsplash.com/photo-1523187747149-de89503385ed?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=619286876207bb4b39bbf1243630564a&auto=format&fit=crop&w=1350&q=80") no-repeat center center;
  background-attachment: fixed;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  width: 100%;
  height: 100%; }

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("https://images.unsplash.com/photo-1523187747149-de89503385ed?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=619286876207bb4b39bbf1243630564a&auto=format&fit=crop&w=1350&q=80") no-repeat center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.container {
  max-width: 1200px;
  margin: 2% auto;
  width: 100%;
  height: 100%; }

.row:before, .row:after {
  content: "";
  display: table;
  clear: both; }

[class*='col-'] {
  float: left;
  min-height: 1px; }

.col-1 {
  width: 33.33%; }

.col-2 {
  width: 66.66%; }

.col-3 {
  width: 100%; }

.row:nth-child(1) .col-3 {
  text-align: center;
  text-transform: uppercase;
  color: #fff; }
  .row:nth-child(1) .col-3 .randomColor {
    font-size: 200%; }

.row:nth-child(2) {
  margin-top: 2%; }
  .row:nth-child(2) .col-3 {
    color: #fff; }
    .row:nth-child(2) .col-3 ul {
      list-style-type: none;
      text-align: center;
      /* height:100%;*/ }
      .row:nth-child(2) .col-3 ul li {
        font-size: 1.9rem; }
  .row:nth-child(2) .newGame {
    margin-left: 0%;
    text-transform: uppercase; }
    .row:nth-child(2) .newGame:hover {
      font-size: 2.3rem;
      background: rgba(0, 0, 0, 0); }

.row:nth-child(3) {
  margin: 2% auto;
  display: flex;
  justify-content: center; }

#square {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: #fff;
  margin: 3%;
  opacity: 0.65;
  text-align: center; }
  #square:hover {
    opacity: 0.7;
    transform: scale(1.2); }

.col-3 {
  color: #fff; }
  .col-3 ul {
    list-style-type: none;
    text-align: center;
    /* height:100%;*/ }
    .col-3 ul li {
      text-transform: uppercase;
      font-size: 1.9rem;
      padding-right: 2%; }

@media only screen and (max-width: 768px) {
  body {
    background-attachment: initial; }

  .row:nth-child(1) .col-3 .randomColor {
    font-size: 95%; }
  .row:nth-child(1) .col-3 .luck {
    font-size: 80%; }

  .row:nth-child(2) {
    margin-top: 0%; }
    .row:nth-child(2) .col-3 {
      width: 100%;
      color: #fff; }
      .row:nth-child(2) .col-3 ul {
        list-style-type: none;
        width: 100%; }
        .row:nth-child(2) .col-3 ul li {
          list-style: none;
          font-size: 1.3rem;
          width: 100%;
          padding-right: 12%; }
    .row:nth-child(2) .newGame {
      float: left;
      text-decoration: underline; }
      .row:nth-child(2) .newGame:hover {
        background: rgba(0, 0, 0, 0); }

  .menu .message {
    padding-right: 10%;
    text-transform: uppercase; }

  #square {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #fff;
    margin: 3%;
    text-align: center; }
    #square:nth-child(3) {
      margin-right: 20px; }
    #square:hover {
      opacity: 0.7;
      transform: scale(1); } }

/*# sourceMappingURL=style.css.map */