@font-face {
  font-family: barlow;
  src: url(./fonts/Barlow-Regular.ttf) format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: branch;
  src: url(./fonts/Branch.woff);
  font-weight: 400;
}






body {
    background: #dac7d0;
    font-family: 'barlow';
    color: #6c3b56;
    margin: 0;
}

.cardsp
{
   border-radius: 7px;
}

@import "compass/css3";

.cardsp:not(.old-school) {
  animation: flyin 1.2s ease forwards;
  opacity: 0;
  transform: scale(2);
  
  /* SEE NOTE IN JAVASCRIPT */
  -webkit-filter: blur(4px);
}

@keyframes flyin {
   to { 
     -webkit-filter: blur(0);
     transform: scale(1);
     opacity: 1;
     filter: drop-shadow(8px 8px 10px gray);
   }
}


.buttongame {
  background-color: #6c3b56;
  border: 4px solid #bb9b83;
  color: #E1C8D5;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none;
  font-weight: 400;
  font-family: 'branch';
  display: inline-block;
  font-size: 35px;
  width: auto;
  margin: 4px 10px;
  cursor: pointer;
}

.buttongame:hover {
    background-color: #5C3149;
}

.buttontalk {
  background-color: #BF8A38;
  border: none;
  color: white;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none;
  font-weight: 400;
  display: inline-block;
  font-size: 16px;
  width: 100px;
  margin: 4px 2px;
  border-radius: 7px;
}


html { font-size: 62.5%; } 

.centertxt
{
text-align: center;
}

.site_content
{
  text-align: center;
}

.site_container
{
position: relative;
margin: 0 auto;
width: 100%;
background-color: none;
}

.boxed-container {
    border: 5px solid #bb9b83;
    padding: 50px;
}

h1{
color: #303030; 
font-weight: bold;
text-align: center;
font-style: none;
font-size: 2.2rem;
font-family: 'barlow';
}

.buttonq
{
  background-color: #bb9b83;
  border: none;
  color: #6c3b56;
  font-family: 'barlow';
  font-weight: bold;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  width: auto; 
  margin: 4px 2px;
  cursor: pointer;
}

.buttonq:hover {
    background-color: #8d647a;
    color: #fff;
}


.cardsp {
    display: inline-block;
    height: auto;
    max-width: 200px;
    margin: 10px 20px;
    width: 100%;
}