@font-face {
    font-family: 'Georama';
    src: url('font/Georama-Bold.eot');
    src: url('font/Georama-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/Georama-Bold.woff2') format('woff2'),
        url('font/Georama-Bold.woff') format('woff'),
        url('font/Georama-Bold.ttf') format('truetype'),
        url('font/Georama-Bold.svg#Georama-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Georama';
    src: url('font/Georama-Regular.eot');
    src: url('font/Georama-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/Georama-Regular.woff2') format('woff2'),
        url('font/Georama-Regular.woff') format('woff'),
        url('font/Georama-Regular.ttf') format('truetype'),
        url('font/Georama-Regular.svg#Georama-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --blue:#1e3043;
    --blue-rgb:30,48,67;
    --sand:#dfdbc8;
    --lsand:#F6F4EB;
    --orange:#e3be62;
    --green:#93cec3;
    --gray:#CCCCCC;
    --lgray:#e3e4e6;

    --footer-max:250px;
    --navbar-max:100px;
}
pre {color: white!important;overflow:scroll;}
body {-moz-osx-font-smoothing:grayscale;font-family:'Georama'}
body, small, .fw-normal {font-weight:normal}
h1, h2, h3, h4, h5, h6, strong, b {line-height:inherit;font-weight:bold}
h1, h2, h3, h4, h5, h6 {line-height:1.2}
.fs-0 {font-size:0!important}
.fs-1 {font-size:.75rem!important}
.fs-2 {font-size:1rem!important}
.fs-3 {font-size:1.25rem!important}
.fs-4 {font-size:1.5rem!important}
.fs-5 {font-size:1.75rem!important}
.fs-6 {font-size:2.5rem!important}
.fs-7 {font-size:3.25rem!important}
.fs-8 {font-size:6rem!important}
.fs-9 {font-size:8rem!important}

a, a:link, a:visited {color:var(--orange)!important}
a:hover {color:var(--sand)!important}

.btn-blue {background-color:var(--blue);color:white;border-radius:1.5rem;font-weight:bold;font-size:1rem;}
.btn-blue:hover {background-color:var(--orange)}
.btn-orange {background-color:var(--orange);color:var(--blue);border-radius:1.5rem;font-weight:bold;font-size:1rem;}
.btn-orange:hover {background-color:var(--sand);color:var(--blue)}
.btn-sand {background-color:var(--sand);color:var(--blue)!important;border-radius:1.5rem;font-weight:bold;font-size:1rem;}
.btn-sand:hover {background-color:var(--lsand);color:var(--blue)!important}
a.btn-sand, a.btn-sand:link, a.btn-sand:visited {color:var(--blue)!important}

.fh {opacity:0;position:absolute;background-color:white;border-radius:50%;padding:.5rem;top:-.25rem;left:-.625rem;z-index:999;transition: opacity 200ms ease-in;cursor:pointer}

.navbar {background-color:rgba(var(--blue-rgb),.5);padding-left:3rem;padding-right:3rem}
.navbar .nav-link span {vertical-align:super;}
.navbar a, .navbar a:link, .navbar a:visited {color:white!important}
.navbar a:hover {color:var(--orange)!important}
.navbar-toggler {border:0 none;color:white!important}
#coin, #energy, #discover {background:white;border-radius:1rem;position:relative;color:var(--blue);font-weight:bold;padding:0 1rem 0 2.5rem;font-size:1.25rem;margin:1rem 2rem}
#coin img, #energy img, #discover img {position:absolute;width:3rem;height:auto;top:-.625rem;left:-1rem}
#discover {width:6.5rem}
#discover img {z-index:1}
#discover .percent {position:relative;z-index:1;width:6rem}
#discover .progress {
    position:absolute;
    border-top-right-radius:.875rem;
    border-bottom-right-radius:.875rem;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    height:1.625rem;
    top:.125rem;
    left:1.75rem;
    display:block;
    overflow:hidden;
    width:4.625rem;
}
#discover .progress span {background:var(--green);height:100%;display:inline-block;}
#merge-nav .nav-item {position:relative}

#game {background-repeat:no-repeat!important;background-position:center!important;background-size:cover!important;min-height:100vh;overflow:hidden;width:100vw}
#gameboard {background-repeat:no-repeat!important;background-position:center!important;background-size:cover!important;min-height:100vh;overflow:hidden;position:fixed;top:0;width:100vw}

.mergebase {position:absolute}
.mergebase .crest {width:auto;height:4rem}
.mergebase .info {position:absolute;cursor:pointer;min-width:10rem}
.mergebase .gallery {
    width:8rem;
    height:8rem;
    overflow:hidden;
    border-radius:50%;
    margin:0 auto;
    -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5); 
    box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5);
}
.mergebase h2 {background-color:white;font-size:1rem;padding:.125rem 2rem;border-radius:1rem;margin-top:-1rem;position:relative;z-index:1;text-align:center;color:var(--blue)}
.mergebase [class*=goal-] {background-image:url('images/igoal.png');background-repeat:no-repeat;background-position:center;background-size:cover;width:2.5rem;height:2.5rem;display:inline-block;position:absolute;z-index:2}
.mergebase [class*=goal-].active {background-image:url('images/agoal.png')}
.mergebase .goal-1 {top:4rem;left:0}
.mergebase .goal-2 {top:1rem;left:0}
.mergebase .goal-3 {top:-1.25rem;left:2rem}
.mergebase .goal-4 {top:-1.25rem;left:5rem}
.mergebase .goal-5 {top:1rem;left:7rem}
.mergebase img {-webkit-filter:grayscale(100%);filter:grayscale(100%)}
.mergebase.active .crest img {animation:pulse 1s infinite}
.mergebase.active img {-webkit-filter:grayscale(0%);filter:grayscale(0%)}

.merge-modal .modal-content, #article-modal .modal-content {background:transparent;border:0 none;border-radius:0;}
.merge-modal .modal-header, #article-modal .modal-header {border:0 none;}
.merge-modal .modal-header .close, #article-modal .modal-header .close {margin:0 auto;border-radius:3rem;background-color:white;opacity:1;color:var(--blue);font-size:3rem;padding:0 .75rem}
.merge-modal .modal-header .close:hover, #article-modal .modal-header .close:hover {background-color:var(--orange);opacity:1}

#mergebase-modal #mergebase.modal-body, #article-modal .modal-body, #mergeitem-modal .mergeitem, #mergeitem-modal .mergetype, #user-modal .modal-body {background:white;border-radius:2rem;padding:2rem}
#mergeitem-modal .mergetype {background:var(--sand);margin-bottom:1rem}
#mergeitem-modal .item-list h3 {font-size:1rem}
#mergeitem-modal .item-list a {display:inline-block;text-align:center;border-radius:.25rem;background-color:var(--sand);padding:.5rem}
#mergeitem-modal .item-list .img-div {height:3rem;width:auto}
#mergeitem-modal .td-text img {margin-bottom:1rem}

#template-section:not(:empty) {position:fixed;top:0;overflow:scroll;z-index:9999}
#template-section .close {margin:0 auto;border-radius:3rem;background-color:white;opacity:1;color:var(--blue);font-size:3rem;padding:0 .75rem;float:none}

.base-div {position:relative;margin-bottom:4.5rem;cursor:pointer;display:block}
a.base-div, a.base-div:link, a.base-div:visited {color:var(--blue)!important}
.base-div h3 {background:white;border-radius:2rem;padding:3rem 2rem 3rem 9rem;margin-left:2rem;font-size:1.25rem}
.base-div .img-div {border-radius:50%;width:10rem;height:10rem;padding:.75rem;background:white;position:absolute;top:-1.25rem}
.base-div .img-div img {border-radius:50%;overflow:hidden;}
#mergebase-list .base-div:hover h3, #mergebase-list .base-div:hover .img-div, #mergeitem-modal .base-div h3, #mergeitem-modal .base-div .img-div {background:var(--orange)}
.base-div .crest-div {height:4rem;width:4rem;position:absolute;z-index:1;left:3rem;top:-2.5rem}

#mergetype-modal .mergetype {background-color:white;border-radius:1.5rem;padding:1.5rem;text-align:center;height:100%}
#mergetype-modal .mergetype .img-div {height:3rem;width:auto;margin-bottom:1rem;display:block;}
#mergetype-modal .mergeitems {margin-top:1rem}
#mergetype-modal .progress {background-color:var(--orange);border-radius:1rem}
#mergetype-modal .progress-bar {background-color:var(--green)}
#mergetype-modal .disabled {background-color:var(--gray);}
#mergetype-modal .disabled h4, #mergetype-modal .disabled div {opacity:.7}

#user-modal .modal-body {text-align:center;margin:0 auto}
#user-modal label {font-weight:bold;text-transform:capitalize;}
#user-modal select {border:0 none;background-color:var(--lgray);border-radius:1.5rem;text-align:center;}

#board .close {
    float:none;
    display:block;
    margin-left:auto;
    background:white;
    opacity:1;
    padding:.25rem .5rem;
    border:1px solid var(--sand);
    margin-top:1rem;
    right: -4rem;
    position: relative;
    top: -3.125rem;
}
#board {position:fixed;top:var(--navbar-max);left:0;width:100vw;z-index:1030}
#board .space {width:95vw;max-width:calc(100vh - var(--navbar-max) - var(--footer-max));margin:0 auto}
#board .field {
    display:inline-block;
    width:calc(95vw / 7);
    height:calc(95vw / 7);
    max-width:calc((100vh - var(--navbar-max) - var(--footer-max)) / 7);
    max-height:calc((100vh - var(--navbar-max) - var(--footer-max)) / 7);
    border:1px solid white;
}
#board .field {background-color:var(--lsand)}
#board .field.dark {background-color:var(--sand)}
#board .field img {object-fit:contain;width:100%;height:100%;cursor:pointer;display:inline-block;touch-action:none;}
#board .field .elem {cursor:pointer;display:inline-block;touch-action:none;}
#board .field .elem.moving {z-index:9999;position:relative;}
#board .field .elem.act img {
    background:
        linear-gradient(to right, var(--orange) 4px, transparent 4px) 0 0,
        linear-gradient(to right, var(--orange) 4px, transparent 4px) 0 100%,
        linear-gradient(to left, var(--orange) 4px, transparent 4px) 100% 0,
        linear-gradient(to left, var(--orange) 4px, transparent 4px) 100% 100%,
        linear-gradient(to bottom, var(--orange) 4px, transparent 4px) 0 0,
        linear-gradient(to bottom, var(--orange) 4px, transparent 4px) 100% 0,
        linear-gradient(to top, var(--orange) 4px, transparent 4px) 0 100%,
        linear-gradient(to top, var(--orange) 4px, transparent 4px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    animation: heartBeat 1.35s linear 0s infinite
}
#board .field.drop-target {background-color:var(--green)}
#board .field .dropitem {position:relative;}
#board .field .dropitem.prog::before {display:none}
#board .field .dropitem::before {
    content:url('images/energy.svg');
    width:1.25rem;
    height:auto;
    position:absolute;
    bottom:-.25rem;
    left:-.25rem;
    z-index:1;
    animation: heartBeat 1.35s linear 0s infinite
}
#board .elem .progress {
    width:.5rem;
    height:3rem;
    background:var(--orange);
    display:-webkit-box;  
    display:-ms-flexbox;  
    display:-webkit-flex; 
    display:flex;        
    align-items:flex-end;
    -webkit-align-items:flex-end;
    position:absolute;
    bottom:.125rem;
    left:.125rem;
    opacity:0;
}
  
#board .elem .progress .progress-bar {
    width: 100%;
    height: 0;
    background-color:var(--green);
}


@keyframes heartBeat {
    0%  {transform:scale(1);opacity:1}
    15% {transform:scale(.95)}
    20% {transform:scale(.98);opacity:1}
    35% {transform:scale(1.05);opacity:.8}
    50% {transform:scale(1);opacity:1}
    100%{transform:scale(1)}
}



footer {position:fixed;bottom:0;padding:0 3rem;z-index:2;width:100%}
footer > .row {background:white;border-top-left-radius:1.5rem;border-top-right-radius:1.5rem;padding:1.5rem 1rem 1rem;margin:0}
.emily-t {width:7rem;height:auto;position:absolute;bottom:0;display:none;left:calc(50% - 3.5rem)}
.emily-r {height:auto;width:12rem;position:absolute;top:-6rem;}
footer .text-center {display:grid;align-items:end;padding-bottom:1rem}
#emily .td-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}
#emily > .row .btn {position:absolute;z-index:1}
#emily > .row .btn.load-modal {bottom:.5rem;right:-10rem}
#emily > .row .btn.sell, #emily > .row .btn.upgrade {bottom:3.5rem;right:-10rem}
#emily > .row .btn img {width:1rem;height:1rem;vertical-align:baseline;position:relative;top:.125rem}
#emily .new-base {text-align:center;padding:0 1rem}
#emily .new-base .img-div {width:auto;height:3rem}
#emily .new-base .img-div img {width:auto;height:100%;}
#emily .new-base .btn {position:relative;}
#emily .new-base .btn:disabled {opacity:1;background-color:var(--green);color:white}
#emily .new-base .btn:disabled:hover {background-color:var(--green)}
#emily .td-text img {display:none}

@keyframes pulse {
    0%{height:100%}
    50% {height:110%}
    100% {height:100%}
}

/* login,forgot,user */
section.login {min-height:100vh;padding-top:8vh;color:white;background-image:url('images/login.jpg');background-size:cover;background-position:center;background-repeat:no-repeat}

/* input */
input[type=text], input[type=password], input[type=email], input[type=file], .custom-select, textarea {
    border: 0 none;
    border-radius: 1.5rem!important;
    padding:.5rem 1rem;
}
.form-control-feedback {padding-left:1rem}
.form-control:disabled {background:#ddd!important;border:0 none}
.custom-select, textarea {padding:.75rem 1.5rem!important;height:auto!important}
.custom-check, .custom-radio {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.custom-check input, .custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color:white;
}
.custom-radio .checkmark {border-radius:50%}
.custom-check:hover input ~ .checkmark, .custom-radio:hover input ~ .checkmark {background-color:#ccc}
.custom-check input:checked ~ .checkmark {background-color:var(--orange)}
.custom-radio input:checked ~ .checkmark {background-color:white}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.custom-check input:checked ~ .checkmark:after, .custom-radio input:checked ~ .checkmark:after {display:block}
.custom-radio .checkmark:after {
    top: 4px;
    left: 4px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background:var(--orange);
}
.custom-check .checkmark:after {
    left: 9px;
    top: 5px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media(hover: hover) and (pointer: fine){
    .fh:hover {opacity:.8}
}

@media screen and (max-width:1199px){
}
@media screen and (max-width:991px){
    .emily-r {display:none}
    .emily-t {display:block}
    #map {text-align:center;margin-top:8rem}
    .mergebase, .mergebase .info {position:relative;top:0!important;left:0!important}
    .mergebase {display:inline-block;width:46vw;margin-top:2rem;}
    .mergebase .crest {position:absolute;z-index:2;right:4rem;bottom:3rem;height:7rem}
    .mergebase .gallery {width:20vw;height:20vw}
    .mergebase [class*=goal-] {width:3.5rem;height:3.5rem;}
    .mergebase .goal-1 {top:10.5vw;left:-1vw}
    .mergebase .goal-2 {top:4vw;left:-1vw}
    .mergebase .goal-3 {top:-1.75vw;left:1.75vw}
    .mergebase .goal-4 {top:-3.5vw;left:8vw}
    .mergebase .goal-5 {top:-2vw;left:14.25vw}
    .mergebase h2 {font-size:1.5rem}
}
@media screen and (max-width:768px){
    .navbar {padding-left:1rem;padding-right:1rem}
    .mergebase .gallery {width:30vw;height:30vw}
    .mergebase .crest {right:1rem;bottom:3rem;height:7rem}
    .mergebase .goal-1 {top:17.5vw;left:-1vw}
    .mergebase .goal-2 {top:9vw;left:-2vw}
    .mergebase .goal-3 {top:1.25vw;left:1.75vw}
    .mergebase .goal-4 {top:-3.5vw;left:9vw}
    .mergebase .goal-5 {top:-3vw;left:18vw}
}
@media screen and (max-width:480px){
    #coin, #energy, #discover {padding:0 1rem 0 2.5rem;font-size:1rem;margin:1rem 0 1rem .5rem}
    #coin img, #energy img, #discover img {position:absolute;width:2.5rem;height:auto;top:-.5rem;left:-.5rem}
    #discover {width:5.5rem}
    #discover .progress {
        height:1.25rem;
        width:3.625rem;
    }
    footer {padding:0}
    footer h3 {font-size:1rem}
    footer .td-text {font-size:.875rem}
    footer #info-text {padding:0;}
    .mergebase h2 {font-size:1rem}
    .mergebase .gallery {width:36vw;height:36vw}
    .mergebase .crest {right:-1rem;bottom:2.5rem;height:5rem}
    .mergebase [class*=goal-] {width:2.25rem;height:2.25rem;}
    .mergebase .goal-1 {top:20vw;left:-2vw}
    .mergebase .goal-2 {top:9vw;left:-2vw}
    .mergebase .goal-3 {top:-.75vw;left:2.75vw}
    .mergebase .goal-4 {top:-5vw;left:13vw}
    .mergebase .goal-5 {top:-4vw;left:24vw}
    #emily {padding:0}
    #emily h3 {font-size:.875rem}
    #emily .td-text {font-size:.75rem;height:3.25rem;-webkit-line-clamp:3;}
    .emily-t {width:6rem;left:calc(50% - 3rem);z-index:2}
    #emily > .row .btn.load-modal {bottom:auto;top:-3rem;right:11.5rem;padding-right:3rem}
    #emily > .row .btn.sell, #emily > .row .btn.upgrade {bottom:auto;top:-3rem;right:auto;left:11.5rem;padding-left:3rem}
    #emily .new-base {padding:0 .25rem}
    #emily .new-base h5 {font-size:.875rem}
    #emily .new-base .img-div {height:2rem}
    #emily button {padding:0 .5rem}
    #board .close {
        right: auto;
        position: relative;
        top: auto;
    }
}