html,
body {
   background: linear-gradient(rgb(255, 240, 176,0.6), rgb(255, 152, 117,0.5)), url(/images/mbr-9.jpg) no-repeat center center fixed;


  

  padding: 0;
  margin: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 50em auto;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  
  background-position: center 20%;
}

a {
  color: inherit;
  text-decoration: none;
  flex-grow: 1;
   
}

* {
  box-sizing: border-box;
}

main {
  min-height: 100vh;
  padding: 4rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
   -webkit-text-stroke: 1px black;
   color: red;
  
   text-shadow:
       3px 3px 5px #383838,
     -1px -1px 3px #000,  
      1px -1px 3px #000,
      -1px 1px 3px #000,
       1px 1px 1px #404040;
  margin: 0;
  line-height: 1.15;
  font-size: 3.5rem;
  animation: colorchange 1s infinite;
  -webkit-animation: colorchange 1s infinite;
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
  
}


  @keyframes colorchange {
    0% {
     
      letter-spacing: 4px;
    }
    100% {
     
      letter-spacing: 10px;
    }
  }


.title,
.description {
  text-align: center;
}

.description {
  background: rgba(55,55,55,0.4);
  margin: 4rem 0;
  line-height: 1.5;
  font-size: 1.5rem;
  color: white;
}

.code {
  background: #fafafa;
  border-radius: 5px;
  padding: 0.75rem;
  font-size: 1.1rem;
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Courier New, monospace;
}

.grid {
  display: flex;
 
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  max-width: 800px;
 
}

.card {
  margin: 1rem;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  transition: color 0.15s ease, border-color 0.15s ease;
  max-width: 300px;
}

.card:hover,
.card:focus,
.card:active {
  color: #0070f3;
  border-color: #0070f3;
}

.card h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.card p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}

.button {

  margin: 1rem;
 width: 30vw;
   border-top: 1px solid #96d1f8;
   background: #65d7c0;
   background: -webkit-gradient(linear, left top, left bottom, from(#3f9d71), to(#65d7a6));
   background: -webkit-linear-gradient(top, #3f9d85, #65d7b5);
   background: -moz-linear-gradient(top, #3f9d7d, #65d7bb);
   background: -ms-linear-gradient(top, #3f9d79, #65d5d7);
   background: -o-linear-gradient(top, #3f9d97, #65d7c4);
   padding: 6.5px 13px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 24px;
   font-family: Helvetica, Arial, Sans-Serif;
  text-align: center;
   text-decoration: none;
   vertical-align: middle;
  
   }
.button:hover {
   border-top-color: #287b7a;
   background: #287b72;
   color: #ccc;
   }
.button:active {
   border-top-color: #1c5e5f;
   background: #1c5f5e;
   }

@media (max-width: 600px) {
  .button {
    width: 50vw;
  }
  html,
  body {
     background-size: cover;
  }
  .grid {
    width: 100%;
    flex-direction: column;
  }
}