.m-append-content {
    position: relative;
    width: inherit;
    height: inherit;
    overflow: auto;
    transform: translate3d(-110%,0,0);
    transition: transform ease 1s; 
}


#gameContainer {
    /* background-image: url('./assets/CityHall.jpg'); */
    background-color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
}
canvas+div {
    background-image: url('./assets/progressLogo.Light.png') !important;
}
.m-append-content.show {
    transform: translate3d(0,0,0);
}
html, body{
    margin: 0;
    padding: 0;
    font-size: 32px;
    user-select: none;
}

/* canvas {
    position: absolute;
    left : 150px;
    top : 150px;
    background-color: #000;
    width:1000px;
    height: 1000px;
    font-size: 32px;
} */
@font-face{
    font-family: "TCM";
    src: url('fonts/SourceSansPro-Regular.ttf');
}
@font-face{
    font-family: "ttm";
    src: url('fonts/tt0173m.ttf');
}
.UIwrap{
    background-color: white;
    padding: 0 10px; 
}
h1.title{
  font-size: 1.5em;
  font-family: ttm;
  padding-top: 36px;
  padding-left: 20px;
  margin-bottom: 32px;
  margin-top: 20px;

}
.content {
    font-size: 0.6em;
    font-family: TCM;
    padding: 20px 20px;
    color:#333;
    line-height: 32px;
}

.tp-p p{
    margin: 10px 0;
}

img {
    display: block;
    /* width: 90%; */
    max-width: 90%;
    margin: 20px;
}

.link-img{
    display: inline-block;
    /* width: 90%; */
    max-width: 42%;
    /* margin: 20px; */
    border: 1px solid #333;
    margin: 10px 3%;
    border-radius: 10px;
}

.close{
  position: fixed;
  width: 20px;
  right: 20px;
  top: 20px;
  height: 40px;
  background-image: url(./assets/close.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.link{
    text-align: center;
}
.link a{
    display: inline-block;
    color:#272727;
    margin-top: 40px; 
    font-size: 16px;
    font-weight: 600;
    word-break: break-all;
}

.question-link{
    text-decoration:none;
    outline: none; 
    color: #333;
}

.link a.m-link.m-link:hover,
.link a.m-link.m-link:active {
    color:#ffd345
}
.link a:visited{
    color:#80b5da;
}

.answer-part{
    margin-top:40px;
    font-weight: 600;
}

.m-answer{
    font-size: 22px;
    color: #ffd345;
}

.m-question{
    font-weight: 600;
    font-size: 22px;
}

.content p.m-answer.m-answer:hover,
.content p.m-answer.m-amswer:active {
    cursor: hand;
    color:#ffbe45;
}
.content p:visited{
    color:#80b5da;
    
}

.link-btn{
    width: 56%;
    height: 50px;
    max-width: 180px;
    min-width: 145px;
    margin: 20px 0;
    letter-spacing: 1px;
    border: 2px solid #333;
    border-radius: 25px;
    background-color: #fff;
    color: #333;
    font-size: 18px;
    outline: none;
}

.link-btn-long{
    max-width: 240px;
}

.link-btn-4{
    max-width: 260px;
}

.tp-btn{
    width: 30%;
    height: 35px;
    max-width: 180px;
    min-width: 145px;
    margin: 0 10px;
    letter-spacing: 1px;
    border: 2px solid #333;
    border-radius: 25px;
    background-color: #fff;
    color: #333;
    font-size: 16px;
    outline: none;
}

.fb-part{
    text-align:center;
    position: relative;
}

.fb-btn{
    height:60px;
    width:60px;
    margin: 0;
    display:inline-block;
    position: absolute;
    transform: translate(50% , -20%);
    cursor: hand;
}

.fb-txt{
    font-weight: 600;
    display:inline-block;
    position: absolute;
    transform: translate(-80%);
}

.content button.link-btn.link-btn:hover{
    background-color: #ffd345;
    border: 2px solid #ffd345;    
}
.content button.link-btn.link-btn:active {
    background-color: #ffbe45;
    border: 2px solid #ffd345;    
}

.content button.tp-btn.tp-btn:hover{
    background-color: #ffd345;
    border: 2px solid #ffd345;    
}
.content button.tp-btn.tp-btn:active {
    background-color: #ffbe45;
    border: 2px solid #ffd345;    
}