html {
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}


body {
    background-color: #6eaa49;
}

img {
    width: 100%;
}

h2, p {    
    color: rgb(234, 234, 234);
    font-family: Arial, Helvetica, sans-serif;
    
        display: block;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
}

h2 {
    font-size: 1.5vw;
    font-weight: bold;
}

p { 
    font-size: 0.9vw;
}

.hidden {
    display: none;
}

h1, .farm-title {
    position: fixed;
    top: -2vw;
    left: 8.4vw;

    border-radius: 1.25vw;

    display: flex;
    justify-content: center;
    width: 80vw;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 4vw;

    color: #3e2513;
    background-color: rgba(235, 230, 215, 0.5);

    z-index: 11;
}

.welcome {
    margin-right: 1vw;
}

.farm-name {
    border-radius: 1.25vw;
    background-color: rgba(235, 235, 225, 0.7);

    transition: transform 0.3s ease;
}

.farm-name:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.farmName-menu {
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 12vw;
    left: 41vw;

    border-radius: 2vw;

    width: 18vw;
    height: 12vw;

    display: none;
    

    z-index: 10;

}

.farmName-menu.visible {
    display: block;
}


.farmName-menu__text {
    padding: 2vw 1.75vw 0vw 1.75vw;
}

.farmName-menu__form {
    position: relative;
    top: 1vw;
    left: 50%;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    

    transform: translateX(-50%);
    z-index: 12;
}

.farmName-menu__form--input {
    padding: 0.5vw 1vw;
    border-radius: 0.75vw;
    border: none;



    font-family: Arial, Helvetica, sans-serif;
    font-size: 1vw;
    color: #3e2513;

    background-color: rgb(205, 205, 205);
}

#farmName-menu__submit, #farmName-menu__cancel {
    position: relative;
    top: 1.5vw;

    
    width: 4.5vw;
   
}



.header-image {
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100vw;
    
    z-index: 10;
}

header {
    display: flex;
    flex-direction: column;

    position: fixed;
    top: 6.94vw;
    left: 0px;
    
    width: 100vw;

    z-index: 3;
}

.top-ui {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
}

.ui__left {
    display: flex;
    flex-direction: column;
    /* gap: 1rem; */
}

.score {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    padding: 0.75rem;
    margin-top: 2rem;
    margin-left: 4rem;
    text-align: center;
}

#score__egg--icon, #score__dna--icon{
    position: relative;
    top: 0.35rem;
    width: 1.5rem;
}

.ui__right {
    display: flex;
    height: 6.9444444vw;
    margin-right: 0.5556vw;
}

.ui__button {
    background-image: url(./assets/wood_texture_wide.png);
    background-size:cover;

    margin: 0vw 0.5556vw;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 2rem;
    
    width: 6.9444444vw;
    height: 100%;

    transition: transform 0.2s ease-in ;
}

.ui__button:hover {

    cursor: pointer;
    transform: scale(1.05);
}



#toggleSound {
    display: none;
}

#openDinos {
    background-position-x: left;
}

#dino_icon {
    
    width: 70%;
}

#openShop {
    background-position-x: center;
}

#hut {
    width: 85%;
}

#openAchievements {
    background-position-x: right;
}

#book {
    position: relative;
    top: 0.2vw;
    left: 0.2vw;

    width: 60%;
}

.menu {
    display: none;

    background-image: url(./assets/wood_texture.png);
    background-size: contain;
    
    border-style: solid;
    border-color: #824A28;
    border-width: 0.5vw;
    border-right-width: 1vw;

    position: absolute;
    top: 6.9444444vw;
    right: 0.5556vw;    

    width: 23.61111vw;
    height: calc(100vh - 2*6.9444444vw);
   

    overflow-x: hidden;
    overflow-y: auto;

    z-index: 3;
}

.menu.visible {
    display: block;
    
    
}

.menu::-webkit-scrollbar {
    width: 0.6vw;
}

.menu::-webkit-scrollbar-track {
    background: transparent;
}

.menu::-webkit-scrollbar-thumb {
    background-color: #512f19;
    border-radius: 7px;
}

.locked {
    filter: brightness(0.5);
}

.dinoSlot, .upgradeSlot, .achievementSlot, .infoSlot {
    background-color: rgba(0, 0, 0, 0.2);
    margin: 1.2vw 1vw;
    
    border-radius: 1.2vw;
    flex-shrink: 0;
    

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);


    height: 6.9444444vw;
   
    z-index: 3;

    transition: filter 0.2s ease;
}



.dinoSlot:hover,
.upgradeSlot:hover,
.achievementSlot:hover {
    cursor: pointer;
    filter: brightness(1.2);
}

.dinoSlot.locked:hover,
.upgradeSlot.locked:hover,
.achievementSlot.locked:hover {
    cursor: pointer;
        filter: brightness(0.80);
}


.dinoSlot__icon, .upgradeSlot__icon {
    grid-row: 1 / 3;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 6.9444444vw;
    height: 100%;
}



.dinoSlot__text, .upgradeSlot__text {
    grid-column: 2 / 4;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.achievementSlot__text {
    grid-column: 1 / 4;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.achievementSlot__text--name, .achievementSlot__description {
    position: relative;
    left: 1.5vw;
}


.dinoSlot__text--amount, .upgradeSlot__text--bought, .achievementSlot__text--unlocked {


    position: relative;
    right: 1vw;
    top: 0.1vw;

    font-size: 1.5vw;
}   

.dinoSlot__text--amount {
    font-weight: bold;
}

.upgradeSlot__text--bought {
    font-weight:550;
}

.dinoSlot__description, .upgradeSlot__description {
    grid-row-start: 2;
    grid-column: 2 / 4;
}

.achievementSlot__description {
    grid-row-start: 2;
    grid-column: 1 / 4;
}

.infoSlot {
    background-color: rgba(0, 0, 0, 0.5);
    height: calc(1.8 * 6.9444444vw);

    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

.infoSlot__text {
    padding: 0.7vw;
}



.infoSlot__text--title {
    grid-row: 1 / 3;
    grid-column: 1 / 3;

    display: flex;
    align-items: center;
    justify-content: space-around;
}

#infoClickCount {
    grid-row: 3;
}

#infoEggPerClick {
    grid-row: 4;
}

#infoBaseClick {
    grid-row: 5;
}

#infoMultiplier {
    grid-row: 3; 
}

#infoTotalEggsPS {
    grid-row: 4;
}

#infoDinos {
    grid-row: 5;
}

.infoCards {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0vw;
    right: 26vw;
    
    width: 12vw;
    height: calc(100vh - 2*6.9444444vw);

    z-index: 7;
}



.dinoCard, .upgradeCard {
    position: absolute;
    
    

    background-color: rgba(0, 0, 0, 0.7);
    margin: 1vw;
    border-radius: 1vw;

    display: none;

    grid-template-rows: repeat(3, 1fr);

    width: 13vw;
    

    z-index: 7;
}

.dinoCard {
    transform: translateY(-11vw);
    height: 13vw;
    
}
.upgradeCard {  
    transform: translateY(-5vw);
    height: 6vw;
}

.dinoCard.visible, .upgradeCard.visible {
    display: grid;
}

.dinoCard__top, .upgradeCard__top {
    grid-row: 1;
    grid-column: 1;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.dinoCard__name, .upgradeCard__name {
    font-size: 1.1vw;
}


.dinoCard__bottom, .upgradeCard__bottom{
    grid-row: 2 / 4;
    grid-column: 1;

    padding: 0.75vw;

    display: flex;
    flex-direction: column;
}



#dinoSlot_Minisaur__icon {
    width: 70%;
}

#dinoSlot_Velociraptor__icon {
width: 85%;
}
#dinoSlot_Stegosaurus__icon {
width: 95%;
}
#dinoSlot_Brachiosaur__icon {
width: 65%;
}

#Feeder {
width: 75%;
}

#Nest{
    width: 75%;
}
 #Lamp{
    width: 55%;
 }
  #Playground{
    width: 75%;
  }
   #Dinopark{
    width: 75%;
   }


.background-container {

    width: 100vw;
}

.background {
    position: absolute;
    top: 5vw;
    left: 0;

z-index: -5;
}




.game-container {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;

    position: relative;
    left: 20vw;

    width: 60vw;
    

    height:100%;

    transition: transform 0.6s ease-out;

    

    overflow: hidden; 
}

.game-container.menuOpen {
    transform: translateX(-8vw);
    z-index: 5;
}

.main-egg {
position:relative;
top: 10vw; 

width: 15vw;
height: auto;

z-index: 5;

transition: filter 0.2s ease-in;


}

.main-egg:hover {

    cursor: pointer;
    filter: drop-shadow(0 0 10px rgba(255, 255, 235, 0.8));
 
}

.egg {
transition: transform 0.15s ease;
transition: filter 0.7 ease;

z-index: 5;
}

.egg:hover {
transform: scale(1.01);
}

.egg.egg--shrink {
    transform: scale(0.95);
}

.egg.egg--bonus {
    filter: drop-shadow(0 0 15px rgba(255, 214, 52, 0.8));
}
.egg.egg--bonus-rare {
    filter: drop-shadow(0 0 15px rgba(158, 97, 223, 0.8)) hue-rotate(45deg);
}

.egg.egg--expand {
    
    transform: scale(1.1);
}

.grass-patch {
    position: relative;
    top: 2vw;
    
    width: 50vw;
    height: auto;

    z-index: -1;
}

.dinosaurs__container {
    display: flex;
    

    position: relative;
    bottom: 25vw;
}

#overworldDino_Minisaur {
    
    position: relative; 
bottom: 1vw;


width: 6.5vw;
}

#overworldDino_Velociraptor {
   
    position: relative;
    top: 3vw;
    right: 1vw;
        
        width: 9.5vw;
    
}

#overworldDino_Stegosaurus {

position: relative;
bottom: 1vw;


width: 10vw;
}

#overworldDino_Brachiosaur {
  

    position: relative;
        
    width: 8vw;
}

.overworldDinoExtra {


    position: absolute;
    top: 5vw;
    left: 0vw;

    z-index: -2;
}

.fossil-container {
    position: absolute;
    top: 4.5vw;
    left: 0vw;

    z-index: -2;
}

#overworldDino_Pterodactyl {
    position: relative;
    left: 3vw;
}

#star {
    display: none;

    position: absolute;
        top: 8vw;
            left: 57vw;

    width: 5vw;

    z-index: 9;

    
}

#star.visible {
    display: block;
    transition: transfrom 0.6s ease;
}

#star.visible:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.meteor {
    opacity: 0;

    position: absolute;
    top: 8vw;
    left: 57vw;
    
    width: 5vw;

    

    transition: transform 4s cubic-bezier(1, 0.25, 0.95, 0.85), opacity 0.3s ease;
    
    z-index: 8;
}

.meteor.visible {
    opacity: 1;
    transform: scale(15) translate(-1vw, 2vw);
}



.extinction-menu { 
    
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 12vw;
    left: 41vw;

    border-radius: 2vw;

    width: 18vw;
    height: 12vw;
 
    display: none;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);

   z-index: 10;


}

.extinction-menu.visible {
    display: grid;
}



.extinction-menu__text {
 
    grid-column: 1 /3;
    grid-row: 1 / 4;

    padding: 2vw 1.75vw 0vw 1.75vw;
}



.extinction-menu__buttons { 
    display: flex;
    align-items: center;
    justify-content: space-around;

    grid-row: 4 / 6;
    grid-column: 1 / 3;

}

.extinction-menu__buttons--right, 
.extinction-menu__buttons--left, 
.infoSlot__button, 
.farmName-menu__button {
    border-radius: 0.5vw;
    width: 3.5vw;
    height: 2vw;
    color: white;
    font-size: 1vw;
    justify-items: center;

    border-color: rgba(0, 0, 0, 0.0);
    background-color: #8e8e8e;

    transition: background-color 0.3s ease, transform 0.3s ease;
}

#infoSave {
    transition: width 0.3s ease;
}

.extinction-menu__buttons--right:hover,
.extinction-menu__buttons--left:hover, 
.infoSlot__button:hover, 
.farmName-menu__button:hover  {
    
    cursor: pointer;
    transform: scale(1.1);
}

.extinction-menu__buttons--right:hover, 
#infoSave.saved, 
#farmName-menu__submit:hover {
    background-color:#5ab024;
}

.extinction-menu__buttons--left:hover,
#infoRestart.activated, 
#farmName-menu__cancel:hover {
    
    background-color: #c51f1f;
}

#infoSave.saved {
    width: 4.5vw;
}