/* GameMaker Styles */
canvas {
    image-rendering: optimizeSpeed;
    -webkit-interpolation-mode: nearest-neighbor;
    -ms-touch-action: none;
    touch-action: none;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background: transparent;
}
:-webkit-full-screen #canvas {
width: 100%;
height: 100%;
}
div.gm4html5_div_class {
margin: 0px;
padding: 0px;
border: 0px;
}
/* START - Login Dialog Box */
div.gm4html5_login {
padding: 20px;
position: absolute;
border: solid 2px #000000;
background-color: #404040;
color:#00ff00;
border-radius: 15px;
box-shadow: #101010 20px 20px 40px;
}
div.gm4html5_cancel_button {
float: right;
}
div.gm4html5_login_button {
float: left;
}
div.gm4html5_login_header {
text-align: center;
}
/* END - Login Dialog Box */
:-webkit-full-screen {
width: 100%;
height: 100%;
}
/* End GameMaker Styles */

body {
    background-color: grey;
    background-image: url('/img/duowblankback.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    text-align: center;
    font-family: Timeburner;
}

p {
    font-size: 20px;
}

footer {
    position: sticky;
    width: 100%;
    bottom: 1%;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
}

footer p {
    text-align: center;
    font-family: Timeburner;
    font-weight: bold;
    font-size: 16px;
    color: rgba(184, 199, 199, 0.4);
    margin-top: 32px;
}

#logo {
    max-width: 50%;
    max-height: 120px;
    margin-top: 1%;
    position: relative;
    top: 0px;
    opacity: 100%;
    animation-name: intro-anim;
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(0.375, 0.885, 0.35, 1.5);
}

button {
    position: relative;
    font-family: Timeburner;
    text-align: center;
}

.navGames {
    display: block;
}

.btnWrap {
    display: inline-block;
    text-align: center;
    margin-right: 3%;
    margin-left: 3%;
}

.btnWrap h5 {
    margin-top: 5px;
}

.gbtn {
    background-color: rgb(0, 0, 0);
    border: none;
    border-radius: 32px;
    box-shadow: 3px 3px 2px rgba(72, 72, 72, 0.8);
    color: rgba(240, 240, 240, 0.863);
    padding: 4px 4px;
    margin: 2% 2%;
    transition-duration: 0.3s;
}

.gbtn.active_game {
    background-color: rgba(7, 133, 179, 0.932);
    transform: scale(1.1);
}

.gbtn img {
    position: relative;
    width: 32px;
    height: 32px;
    top: 3px;
}

.gbtn:hover {
    transform: scale(1.25);
}

.headerBtn {
    background-color: rgb(0, 0, 0);
    border: none;
    border-radius: 12px;
    box-shadow: 8px 8px 2px rgba(72, 72, 72, 0.8);
    font-size: 28px;
    color: rgba(240, 240, 240, 0.863);
    padding: 8px 16px;
    margin: 2% 2%;
    transition-duration: 0.3s;
    animation: intro-btn-anim 0.75s ease-in 1.5s forwards;
    opacity: 0%;
}

.headerBtn:hover {
    transform: scale(1.25);
}

.headerBtn:active {
    background-color: rgba(0, 144, 198, 0.863);
    box-shadow: 8px 4px 2px rgba(72, 72, 72, 0.8);
    transform: translate(0, -5%);
}

.headerBtn.active_page {
    background-color: rgba(0, 144, 198, 0.863);
    box-shadow: 8px 4px 2px rgba(72, 72, 72, 0.8);
    transform: translate(0, 5%) scale(1.1);
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#contentContainer {
    margin: 0;
    position: relative;
    top: 50%;
    left: 50%;
    min-width: 75%;
    max-width: 90%;
    min-height: 360px;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

#contentContainer.loading {
    display: none;
    visibility: hidden;
}

#contentContainer.showing {
    visibility: visible;
    animation-name: intro-btn-anim;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

.innerContent {
    display: flex; 
    display: -webkit-flex;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-align-items: center;
            align-items: center;
}

#socialHeader {
    display: block;
}

.social_icon {
    display: inline-block;
    margin-left: 8px;
    margin-right: 8px;
}

.social_icon i {
    color: rgb(214, 214, 214);
}

.social_icon i:hover {
    color: rgb(6, 96, 138);
}

.img_about {
    width: 25%;
    height: auto;
}

@keyframes intro-anim {
    from {opacity: 0%; top: 500px;}
    to {opacity: 100%; top: 0px;}
}

@keyframes intro-btn-anim {
    0% {opacity: 0%;}
    100% {opacity: 100%;}
}

@font-face {
    font-family: BitPotion;
    src: url('/fonts/BitPotion.ttf');
}

@font-face {
    font-family: Munro;
    src: url('/fonts/Munro.ttf');
}

@font-face {
    font-family: Timeburner;
    src: url('/fonts/Timeburner.ttf');
}

@font-face {
    font-family: Timeburner;
    src: url('/fonts/TimeburnerBold.ttf');
    font-weight: bold;
}