body{
  background-color: #042f4b;
        margin: 0;
}
.container {
  width: 80%;
  margin:auto;
  text-align: center;
}
.title {
  margin: 30px;
  font-family: 'Lobster', cursive;
  text-shadow: 1px 0 #232931;
  font-size: 6rem;
color: #4ecca3;
}
img{
   width:40%;
}
.main-img{
  width:30%
}
.btn-start{
       background: #4ecca3;
       font-family: cursive;
       border-radius: 7px;
       color: #ffff;
       font-size: 30px;
       padding: 16px 25px 16px 25px;
       text-decoration: none;
   }

   .btn-start:hover {
       background: #232931;
       text-decoration: none;
   }

/* play file css */
.dice {
  text-align: center;
display:inline-block;
width:40%;
}
p {
  font-size: 2rem;
 font-family: "Indie Flower", cursive;
  font-family: cursive;
  font-weight: 300;
  margin:50px;
  color: #4ecca3;
}

.btn-play{
  width:30%;
  margin:100px;
}
/* media queries */
@media only screen and (max-width: 768px) {
  .title{
    font-size:5rem;
  }
  .container{
    width:100%;
  }
  .main-img{
    width:70%;
    margin:10px;
  }
.btn-start{
    margin:25px;
  }
  .btn-play{
    margin:100px;
  }
}
@media only screen and (max-width: 550px){
  .title{
    font-size: 3rem;
  }
  p{
    font-size: 1rem;
    margin:30px;
  }
  .btn-play{
    width:50%;
    font-size:15px;
  }
  img{
    width:50%;
  }
}