body{
color: #414793;
overscroll-behavior: contain;
}
.logo-column{
  text-align: left;
}
#logo{
  width: 150px;
  height: auto;
}
.page-title{
  margin: 10px;
  font-size: 24px;
}
p.text-muted.lead{
  font-size: 16px;
}
.card-title{
  color: #414793;
  margin: 10px;
  font-size: 24px;
}
.jumbotron{
  padding: 1rem 1rem;
  margin: 0px;
}
.cloudsmedia-row{
  margin-top: 15px;
}
/****** FIRST CREATE THE BUBBLE *****/
p.thought {
position:relative; /*see the support section below for more info*/
width:400px; /*size of the bubble*/
max-width: 100%;
padding:20px 40px;
margin: 10px auto;
/**give the corners a large curve**/
-webkit-border-radius:180px;
-moz-border-radius:180px;
border-radius:180px;
/**add a drop shadow to the bubble**/
-webkit-box-shadow: -3px 4px 8px #989898;
-moz-box-shadow: -3px 4px 8px #989898;
box-shadow: -3px 4px 8px #989898;
/**style the text**/
font-size:1em;
}
/******NOW CREATE THE THOUGHT CIRCLES*****/
/****FIRST THE LARGE CIRCLE***/
p.thought:before {
content:"";
position:absolute; /*see the support section below for more info*/
bottom:-40px; /*distance from the bottom of the bubble*/
left:150px; /*distance from the left edge of the bubble*/
width:30px; /*same as the height*/
height:30px; /*same as the width*/
/*add a curve to the corners the same size as the height and width*/
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
/*add a drop shadow*/
-webkit-box-shadow: -3px 3px 4px #989898;
-moz-box-shadow: -3px 3px 4px #989898;
box-shadow: -3px 3px 8px #989898;
}
/*****NOW THE SMALL CIRCLE***/
/**Created exactly the same way as the large circle, except with smaller width, height and border-radius**/
p.thought:after {
content:"";
position:absolute;
bottom:-55px;
left:130px;
width:15px;
height:15px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
-webkit-box-shadow: -3px 3px 4px #989898;
-moz-box-shadow: -3px 3px 4px #989898;
box-shadow: -3px 3px 8px #989898;
}

.instructor{
  direction: ltr;
  text-align: left;
  margin: 0px;
}

.game-status-details {
    display: flex;
    flex-wrap: wrap;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
    padding: 0.3em;
    text-align: center;
}
.game-status-details span,
.game-status-details p{
    text-align:center;
}

.move-counter,
.restart-btn {
    width: 100%;
    display: inline-block;
}

.move-counter, .timer, .timer-text {
    font-size: 1.3em;
}

.show-modal {
    display: block;
}
.album{
  padding: 15px 0px;
}
.modal-content {
    border: 3px solid #414793;
    border-radius: 0px;
}
.modal-header{
  background-color: #414793;
  border-radius: 0px;
}
.modal-title{
  color: #ffffff;
  font-size: 22px;
}
.congrats-message{
    color: #d03c28;
}
#modal-play-title{
  color: #d03c28;
}
.levels-buttons{
  direction: rtl;
  display: block;
  margin: 3px 0px;
}
.button-secondary{
  display: none;
}
.modal-footer{
  padding: 5px;
  margin: 0px;
}
p.hint{
  font-size: 12px;
}
.congrats-wrapper{
  display: inline-block;
  width: 100%;
}
#burst-animation{
  text-align: center;
  margin: 5px 0px;
}
.profile-column{
  font-size: 13px;
}
#profile-picture img{
  border: 1px solid #424793;
  border-radius: 50%;
}
#overall-profile-picture img{
  border: 1px solid #ef462c;
  border-radius: 50%;
}
#overall-status,
#top-scores-label,
#top-scores-value,
#top-scores-time,
#top-scores-clicks,
#top-scores{
  color: #ef462c;
}
@media only screen and (max-width: 820px) {
  body{
    font-size: 14px;
  }
  .logo-column{
    text-align: center;
  }
  .profile-column{
    margin: 30px 0px 15px 0px;
  }
  .card-title {
    font-size: 18px;
	   width:100%;
  }
  .game-status-details span, .game-status-details p, .game-status-details a {
      width: 100%;
  }
  .btn{
    margin: 0 auto;
    font-size: 16px;
  }
  .move-counter, .timer, .timer-text {
      font-size: 16px;
  }
  .modal-body .message{
    text-align: center;
  }
}
@media only screen and (max-width: 768px) {
  .memory-game-section{
    position: relative;
    overflow: hidden;
  }
  .remaining-failed-attempts{
    display: block;
    width: 100%;
    text-align: center;
  }
  .game-board, .game-status-details{
    max-width: 100%!important;
  }
  .move-counter, .timer, .timer-text {
      font-size: 13px;
  }
  .btn{
    margin: 0 auto;
    font-size: 13px;
  }
  .game-status-details span, .game-status-details p, .game-status-details a {
      width: 100%;
  }
}
@media only screen and (min-width: 992px) {
    .game-status-details {
        display: block;
    }
    .move-counter,
    .timer,
    .restart-btn {
        width: initial;
        display: inline-block;
    }
}