*
{
    image-rendering: pixelated;
}
ul
{
    margin-left:20px;
}

html, body
{
    background-color:white;
    background-image:url("../images/custom/egg_bg.png");
    font-family: VT323;
    overscroll-behavior: contain;
    font-size:20px;
}

.Board
{
    display:grid;
    width:100%;
    height:100%;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(4, auto);
    align-items: center;
    justify-items: center;

}

.Board_img
{
    height:70%;
    width:70%;
    animation: sprite-anim1 1s infinite;
    object-fit: contain;
    /*filter:drop-shadow(0px 20px 10px rgba(0,0,0,0.3));*/
}

@keyframes jumping
{

    10%{
        transform:scaleX(4) scaleY(3.4) translateY(10%);
    }

    20%{
        transform:scaleX(4) scaleY(4) translateY(-10%);
    }

    30%{
        transform:scaleX(4) scaleY(4) translateY(10%);
    }
}

.MainLayout
{
    display:flex;
    flex-direction: column;
    height:100%;
}

.MainLayout-2
{
    animation: MainLayout-2-blink 0.5s forwards;
}

@keyframes MainLayout-2-blink
{

    50%{
        filter:brightness(2);
    }
}

.MainLayout-3
{
    animation: MainLayout-2-fight 2s forwards;
}

@keyframes MainLayout-2-fight
{

    100%{
        filter:brightness(10) opacity(0);
    }
}

.MainLayout_modal
{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index:1000;
    display:flex;
    align-items: center;
    justify-content: center;
    overflow:auto;
}

.MainLayout_modal_wrapper
{
    border:2px solid black;
    max-height:80%;
    width:90%;
    animation: fadein2 0.3s forwards;
    overflow:auto;
}


.MainLayout_modal_overlay
{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color: white;
    animation:fadein 15s;
    animation-fill-mode: forwards;
    pointer-events: none;
}

@keyframes fadein
{

    100%{
        opacity:0;
    }
}


@keyframes fadein2
{
    0%
    {
        opacity:0;
        transform:scale(0);
    }

    50%{
        transform:scale(1.1);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }
}

.MainLayout_midContent
{
    flex-grow:1;
    height:1px;
    overflow:auto;
}

.MainLayout_bottomContent
{
    height:40px;
}

.TabBar
{
    display:flex;
    width:100%;
    height:100%;
    align-items: center;
    overflow: auto;
    background-image: linear-gradient(to bottom, green, greenyellow);
}

.TabBar_button
{
    border-top:2px solid black;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0px 20px;
    background-color:white;
    width:100%;
}

.TabBar_button-2
{
    border-top:2px solid rgb(160, 0, 0);
    font-weight: bold;
    background-image:linear-gradient(to bottom, rgb(255, 175, 175) 0%, rgb(255, 243, 190) 100%);
}

.TabBar_button_icon
{
    width:30px;
    max-height:80%;
}

.Ranch
{
    flex-grow:1;
    height:100%;
    background-image:url(../images/custom/ranch.png);
    background-size:100% 100%;
    background-repeat: no-repeat;
    overflow:hidden;
    position:relative;
}

.Ranch_mailbox
{
    position:absolute;
    left:20px;
    top:3px;
    width:30px;
    height:50px;
    background-image:url("../images/custom/mailbox.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.Ranch_creatures
{
    position:absolute;
    width:100%;
    height:80%;
    top:15%;
}

.Ranch_creature_wrapper
{
    position:absolute;
    /*transition:all 2s;*/
    width:40px;
}

.Ranch_creature
{
    transform:scaleX(4) scaleY(4);
    animation:jumping 3s infinite;
}

.Ranch_creature_baloon
{
    position:absolute;
    border:2px solid black;
    background-color:white;
    padding:5px;
    border-radius:10px;
    top:-40px;
    /*right:-20px;*/
    animation: fade 4s infinite;
    transform:scale(0);
    opacity:0.7;
}

.Ranch_creature_baloon_img
{
    display:block;
    width:25px;
    position:relative;
    z-index:10;
}

@keyframes fade
{
    10%, 80%{
        transform: scale(1);
    }
}

.Ranch_shit
{
    transform:scaleX(4) scaleY(4);
    position:absolute;
    animation:jumping 3s infinite;
    width:8px;
    height:8px;
}

.CreatureDetailView
{
    width:100%;
    position:relative;
    height:100%;
    overflow:auto;
    display:flex;
    flex-direction: column;
    padding:30px;
    background-color:white;
    background-image:linear-gradient(to bottom, rgba(255, 255, 231, 0.2) 0%, rgba(208, 255, 210, 0.8) 100%);
}

.CreatureDetailView_modal
{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:rgba(255,255,255,0.8);
    display:flex;
    align-items: center;
    justify-content: center;
}

.CreatureDetailView_stat
{
    text-align: center;
    display:flex;
    align-items: center;
    justify-content: space-between;

}

.CreatureDetailView_stat_buy
{
    display:flex;
    justify-content: flex-end;
    align-items: center;
    width:100%;
}

.CreatureDetailView_stat_barwrapper
{
    width:55%;
    margin-right:20px;
    flex-shrink: 0;
}

.CreatureDetailView_stat_barwrapper-2
{
    width:100%;
}

.CreatureDetailView_stat_barwrapper-3
{
    width:100%;

}

.CreatureDetailView_stat_label
{
    font-weight: bold;
    font-size:18px;
}

.CreatureDetailView_stat_bar
{
    background-color:rgb(255, 123, 0);
    height:20px;
    border:3px solid black;
    margin-bottom:20px;
    position:relative;
}

.CreatureDetailView_stat_bar-2{
    background-image:linear-gradient(to right, red 0%, yellow 50%, lime 100%);
}

.CreatureDetailView_stat_bar_inner
{
    background-color:rgb(37, 194, 16);
    height:100%;
    width:50%;
}

.CreatureDetailView_stat_bar_inner-1
{
    background-color:rgb(151, 0, 0);
    animation: blink 0.5s infinite;
}

.CreatureDetailView_stat_bar_inner-2
{
    position:absolute;
    right:0;
    top:0;
    background-color:#aaa;
    border-left:2px solid black;
}

@keyframes blink
{
    50%{
        opacity:0.6;
    }
}

.CreatureDetailView_header
{
    display:flex;
    justify-content: space-evenly;
    margin-bottom:20px;
}

.CreatureDetailView_header_name
{
    font-size:28px;
    text-transform: capitalize;
    font-weight: bold;
}

.CreatureDetailView_header_img
{
    width:8px;
    animation: jumping 2s infinite;
    transform:scaleX(4) scaleY(4);
    align-self: center;
}

.buttons
{
    display:flex;
    justify-content: space-around;
    margin-bottom:20px;
}

.button
{
    border:2px solid black;
    background-color:coral;
    display:flex;
    align-items: center;
    padding:10px;
    border-radius:5px;
    color:rgb(0, 0, 0);
    font-weight: bold;
}

.button-2
{
    justify-content: center;
    opacity:0.2;
}

.button-3
{
   opacity:1;
   animation:glowing 1s infinite;
   animation-direction: alternate-reverse;
}

.button-3-2
{
    float:right;
}

.button-4
{
    background-color:rgba(0, 199, 0, 0.5);
    font-size:14px;
    padding:5px;
}

.button-5
{
    text-align: center;
    justify-content: center;
    margin-top:30px;
}

.button-6
{
    float:right;
}

@keyframes glowing
{
    0%{
        filter:saturate(1) brightness(2);
    }
}

.moneyRequest
{
    font-size:16px;
    display:flex;
    align-items: center;
    background-color:yellow;
    border:2px solid black;
    padding:5px;
    border-radius:5px;
    height:40px;
}

.moneyRequest-2
{

    background-color:rgb(219, 192, 255);
    padding-right:30px;
    background-image:url("../images/custom/energy.png");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: auto 20px;
}

.moneyRequest-3
{
    background-color:rgb(255, 230, 119);
    padding-right:50px;
    background-image:url("../images/custom/coins.png");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: auto 20px;
    height:auto;
}

.moneyRequest_img
{
    margin-left:5px;
    width:20px;
}

.StatusBar
{
    background-color:rgb(247, 255, 247);
    border-bottom:2px solid green;
}

.StatusBar_stats
{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:0px 5px;
}

.StatusBar_stats_coins
{
    margin-left:auto;
    margin-right:20px;
}

.coinsImg
{
    display:inline-block;
    background-image:url("../images/custom/coins.png");
    background-size:contain;
    background-repeat: no-repeat;
    width:20px;
    height:20px;
    background-position: bottom;
}

.StatusBar_stats_energy
{
    font-size:20px;
    display:flex;
    align-items: center;
}

.StatusBar_stats_energy > *
{
    margin-left:10px;
}

.StatusBar_energy
{
    width:100%;
    background-color:rgb(57, 0, 150);
    height:20px;
}

.StatusBar_energy_value
{
    background-color:rgb(120, 72, 196);
    height:100%;
    width:100%;
}

.EvolutionPanel
{
    background-image:linear-gradient(to bottom, yellow 0%, green 100%);
    padding:80px;
    border:3px solid black;
    position:relative;
    border-radius:10px;
    overflow:hidden;
}

.EvolutionPanel_overlay
{
    background-color:white;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0;
    animation: EvolutionPanel_overlay 5s;
    animation-fill-mode: forwards;

}

.EvolutionPanel_overlay-1
{
    animation-direction: reverse;
}

@keyframes EvolutionPanel_overlay
{
    100%{
        opacity:1;
    }
}

.EvolutionPanel_creature
{
    width:60px;
    animation: EvolutionPanel_creature_anim 0.3s infinite alternate-reverse;
}

.EvolutionPanel_creature-1
{
    animation-name: EvolutionPanel_creature_anim-2;
}

@keyframes EvolutionPanel_creature_anim
{
    0%{
        transform: translateY(-20%) scaleY(1.2);
    }
}

@keyframes EvolutionPanel_creature_anim-2
{
    0%{
        transform: translateY(-10%);
    }
}

.ActionModal
{
    background-image:linear-gradient(to bottom, yellow 0%, green 100%);
    padding:50px;
    border:3px solid black;
    display:flex;
    align-items: flex-end;
    justify-content: center;
    min-width:250px;
}


.ActionModal_chicken
{
    width:50px;
    height:50px;
    background-image:url("../images/custom/pollo.png");
    background-repeat: no-repeat;
    background-size:100%;
    background-position: bottom;
    overflow:hidden;
    animation: eated 3s;
    animation-fill-mode: forwards;
    overflow:hidden;
}

.ActionModal_soccer
{
    height:200px;
    background-image:url("../images/custom/soccer.png");
    width:50px;
    background-size: 100%;
    background-repeat: no-repeat;
    animation: soccerBall 0.5s infinite alternate-reverse;
    background-position: bottom center;
}

.ActionModal_pesi
{
    position:absolute;
    width:300%;
    background-image:url("../images/custom/pesi.png");
    height:50px;
    background-repeat: no-repeat;
    background-size: contain;
    left:-40px;
    top:0px;
    animation: weightLift 1s infinite alternate-reverse;
}

@keyframes weightLift
{
    50%{
        top:-30px;
    }
}

@keyframes soccerBall
{
    100%{
        background-position: top center;
    }
}

@keyframes eated
{
    100%{
        height:0px;
    }
}

.ActionModal_creature
{
    width:50px;
    animation: eating 0.5s infinite alternate-reverse;
    align-self: center;
}

.ActionModal_creature-2
{
    animation: jumping2 0.5s infinite;
}

.ActionModal_creature-3
{
    animation: lifting 1s infinite alternate-reverse;
}

@keyframes lifting
{
    50%{
        transform:scaleY(1.5);
    }
}

.ActionModal_pesi_wrapper
{
    position:relative;
}

@keyframes jumping2
{
    50%{
        transform: translateY(-20px);
    }
}

@keyframes eating
{
    0%{
        margin-left:20px;
    }
    100%{
        margin-left:0px;
    }
}

/* vt323-regular - latin */
@font-face {
    font-family: 'VT323';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/vt323-v11-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('VT323 Regular'), local('VT323-Regular'),
         url('../fonts/vt323-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/vt323-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/vt323-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/vt323-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/vt323-v11-latin-regular.svg#VT323') format('svg'); /* Legacy iOS */
  }

  .MessagePanel
  {
      background-image:linear-gradient(to bottom, white 0%, rgb(255, 255, 201) 100%);
      padding:30px;
      /*border:2px solid black;*/
      width:100%;
      height:100%;
      max-height:0px;
      overflow:hidden;
      animation: MessagePanel_opening 20s forwards;
      opacity:1;
  }

  .MessagePanel-2
  {
    animation: MessagePanel_closing 5s forwards;
    max-height:400px;
  }

  .MessagePanel-3
  {
      animation: none;
      max-height:none;
  }

  @keyframes MessagePanel_opening
  {
      100%{
          max-height:100vh;
      }
  }

  @keyframes MessagePanel_closing{
    100%{
        opacity:0;
        max-height:0px;
        padding:0px 30px;
    }
  }

  .CreatureDetailBig
  {
    background-image:linear-gradient(to bottom, yellow, green);
    padding:50px;
    border:2px solid black;
  }

  .CreatureDetailBig_img
  {
      width:100px;
  }

  .Ranch_gift
  {
    width:30px;
    height:30px;
    background-image:url("../images/custom/present.png");
    background-size:contain;
    background-repeat: no-repeat;
    animation: Ranch_gift_blink 1s infinite;
    position:absolute;
}

@keyframes Ranch_gift_blink
{
    50%{
        filter:brightness(1.5);
        transform:scale(1.1);
    }
}

.Ranch_gift-2
{
    animation: Ranch_gift_fadeOut 0.5s forwards;
}

@keyframes Ranch_gift_fadeOut
{
    100%{
        opacity:0;
        transform:scale(3);
    }
}

.Ranch_gift-3
{
    background-image:none;
    display:flex;
    align-items: center;
}

.MessagesPanel
{
    display:flex;
    flex-direction: column;
}

.MessagesPanel_title
{
    font-size:20px;
    margin-bottom:10px;
    padding:10px;
}

.MessagesPanel_item
{
    padding:20px;
    border-bottom:1px solid black;
    display:flex;
    justify-content: space-between;
}

.MessagesPanel_item-2
{
    font-weight: bold;
    background-color:rgba(238, 238, 238, 0.8);
}

.MessageDetailPanel
{
    /*border:2px solid black;*/
    padding:20px;
    background-color:white;
    width:100%;
    height:100%;
}

.MessageDetailPanel_from
{
    margin-bottom:20px;
}

.AddEnergyPanel
{
    background-image:linear-gradient(to bottom, rgba(111, 0, 255, 0.185) 0%, rgba(0, 0, 255, 0.185) 100%);
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.AddEnergyPanel_item
{
    border-bottom:1px solid black;
    padding:30px;
    height:100%;
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.CreatureDetailView_combatStats
{
    border:2px solid black;
    background-color: hsl(93, 87%, 54%, 0.2);
    padding:10px;
    border-radius:10px;
}

.CreatureDetailView_combatStats_header
{
    display:flex;
    justify-content: space-between;
}

.CreatureDetailView_combatStats_title
{
    font-size:20px;
    margin-bottom:10px;
    font-weight: bold;
}

.CreatureSelectPanel
{
    font-size:20px;
}
.CreatureSelectPanel_img
{
    width:30px;
    animation: smallJumping 1s infinite;
}

@keyframes smallJumping
{
    50%{
        transform:scaleY(0.8);
    }
}


.CreatureSelectPanel_item
{
    display:grid;
    grid-template-columns: 40px 1fr 1fr;
    align-items: center;
    grid-gap: 10px;
    padding:10px;
    border-bottom:1px solid rgb(221, 221, 221);
    background-color:rgba(0,0,0,0.01);
}

.MapPanel
{
    position:relative;
    flex-grow: 1;
    height:100%;
    background-image:linear-gradient(to bottom, rgba(0, 199, 0, 0.5) 0%, rgba(0, 100, 0, 0.5) 100%);
    background-image:url("../images/custom/grass.png");
    background-size:cover;
}

.MapPanel_modal
{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    background-color:rgba(0,0,0,0.5);
}

.MapPanel_road
{
    height:100%;
    width:100%;
}

.MapPanel_creatures
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

.MapPanel_creatures_item
{
    width:40px;
    animation: jumping3 1s infinite;
    margin-left:-20px;
    position:absolute;
    bottom:-10px;
}

.MapPanel_creatures_item-2
{
    animation: MapPanel_creatures_item-2-blink 1s infinite;
}

.MapPanel_creatures_item-3
{
    animation: MapPanel_creatures_item-3-moving 1s infinite;
    filter: none;
    transform:translateX(-10%);
}

.MapPanel_creatures_item-4
{
    animation: none;
    background-image:url("../images/custom/check.png");
    filter:saturate(0) brightness(2);
}

.MapPanel_creatures_item-4::after
{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;

}

@keyframes MapPanel_creatures_item-3-moving
{
    50%{
        transform:translateX(10%);
    }

}

@keyframes MapPanel_creatures_item-2-blink
{
    50%{
        filter:brightness(2);
    }
}


.MapPanel_creatures_item_wrapper
{
    position:absolute;
    width:0;
    height:0;
    overflow:visible;
}

@keyframes jumping3
{
    50%{
        transform:translateY(-10px);
    }
}

.advancedWrapper
{
    display:none;
    justify-content: space-evenly;
}

.MapPanelCreatureModal
{
    display:grid;
    grid-gap: 20px;
    padding:20px;
    grid-template-columns: auto auto;
    background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgb(255, 217, 92) 100%);
    border:2px solid black;
    border-radius: 20px;
    margin:auto;
    align-items: center;
}

.MapPanelCreatureModal_img
{
    width:60px;
    animation: jumping3 1s infinite;
}

.MapPanelCreatureModal_buttons
{
    display:grid;
    grid-gap:10px;
    text-align: center;
}

.MapPanelCreatureModal_buttons > *
{
    justify-content: space-around;
}

.MapPanelCreatureModal_buttons_name
{
    font-size:25px;
    text-transform: capitalize;
    font-weight: bold;
}

.CombatView
{
    display:flex;
    flex-direction: column;
    height:100%;
    overflow:hidden;
    align-items: center;
    background-image:url("../images/custom/arena1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.CombatView_enemyHealth
{
    width:100%;
    height:20px;
    background-color:red;
    border:2px solid black;
    border-left-width: 0;
    border-right-width: 0;
}

.CombatView_enemyHealth_inner
{
    background-color:rgb(123, 255, 0);
    border-right:2px solid black;
    height:100%;
}

.CombatView_selfCreature
{
    margin:20px;
    margin-top:auto;
    width:50px;
    /*transform:translateY(-200px);*/
    animation: jumping3 1s infinite;
}

.CombatView_selfCreature-2
{
    margin:20px;
}

.CombatView_actions
{
    display:flex;
    height:50px;
    width:100%;
}

.CombatView_actions > *
{
    width:100%;
}

.CreatureCombatView-2
{
    margin-top:auto;
}

.CombatView_selfCreature-3
{
    animation: attack2 0.5s;
}

.CombatView_selfCreature-4
{
    animation: attack 0.5s;
}

@keyframes attack
{
    50%{
        transform:translateY(-300px);
    }
}

@keyframes attack2
{
    50%{
        transform:translateY(300px);
    }
}

.AttackButton
{
    background-color:rgb(255, 211, 211);
    color:black;
    display:flex;
    align-items: center;
    justify-content: center;
    position:relative;
}

.AttackButton_inner
{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:50%;
    background-color:rgb(255, 110, 110);
}

.AttackButton_inner-2
{
    background-color:rgb(106, 255, 106);
    animation:blink2 0.5s infinite;
}

@keyframes blink2
{
    50%{
        filter:brightness(2);
    }
}

.AttackButton_text
{
    position:relative;
}

.CombatResultsModal
{
    background-color:white;
    /*border:2px solid black;*/
    padding:20px;
}

.CombatResultsModal_title
{
    font-size:24px;
    font-weight: bold;
    margin-bottom:20px;
}

.creatureName
{
    text-transform: capitalize;
    font-style: italic;
}

.Hotel
{
    padding:20px;
    background-image:url("../images/custom/floor.png");
    min-height: 100%;
    background-size:cover;
    height:100%;
    overflow:auto;
}

.Hotel_items
{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:10px;
    width:100%;
}

.Hotel_item
{
    background-image:linear-gradient(to bottom, rgba(66, 154, 255, 0.507) 0%, rgba(0, 255, 98, 0.5) 100%);
    padding:20px;
    border:2px solid black;
    border-radius:20px;
    text-align: center;
}

.Hotel_item_title
{
    text-transform: capitalize;
    font-size:24px;
    font-weight: bold;
    margin-bottom:20px;
}

.Hotel_item_img
{
    width:40px;
    animation: jumping3 1s infinite;
}

.NewsPanel
{
    background-color:rgba(255,255,255,0.8);
    padding:20px;
    font-size:18px;
}

.combatIcon
{
    width:100%;
}

.shareButton
{
    width:20px;
}