html{
    height: 100%;
}

* {
    user-select: none;
}

body {
    margin: 0;
    padding: 0;
    background-image: linear-gradient(to bottom, #01dddd, #017777);
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
}

#title_text{
    font-family: "Frijole";
    color:#0f0;
    width:100%;
    text-align: center;
    font-size:4vw;
    text-shadow: 6px 6px #000;
}

#ged{
    width:100%;
    margin-top: 0vh;
    justify-content:center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

#ged_img{
    position:relative;
    width:25vw;
    align-self: center;
    cursor:pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: .08s;
}

#ged_img:hover{
    transform: scale(1.05);
}

#ged_img:active{
    transform: scale(0.95);
}

.weapon{
    position:absolute;
    width:5vw;
    pointer-events: none;
    animation-name: weapon_animation;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}

@keyframes weapon_animation{
    from {opacity: 1;}
    to {opacity: 0;}
}

#banke_ged{
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#ged h2{
    font-family: "Kite one";
    margin-top: 0;
}

#point_per_second {
    font-size: 1vw;
}

#upgrades_menu{
    width:100%;
    height:15vh;
    position:fixed;
    bottom:0;
    gap:2vw;
    padding: 0 1vw;
    box-sizing: border-box;
    background-color: rgba(0,0,0, .5);
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;

    overflow-x: scroll;
    cursor: grab;
}

.upgrade_card{
    height: 75%;
    min-width: 20vw;
    width: 20vw;
    flex-shrink: 0;
    background-color:#895129;
    border-radius: 20px;

    display: flex;
    flex-direction: row;
    align-items: center;

    transition: .1s;
}


.upgrade_card:hover{
    transform: scale(1.05);
}

.upgrade_card:active{
    transform: scale(0.95);
}

.weapon_card{
    background-color: #ffaaaa;
}




.upgrade_img{
    height:75%;
    width:auto;
    position:relative;
    left: 2%;
    background-color: #342011;
    padding:.4vw;
    border-radius: 30px;
    object-fit: contain;
}

.upgrade_text{
    flex: 1;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}

.upgrade_text h2{
    font-family: "Frijole";
    margin:0;
}

.upgrade_text p{
    font-family: "Kite one";
    margin:0;
}

.rock_throw{
    position: absolute;
    width:3vw;
    animation-name: stone_throwing;
    animation-duration: .700s;
    animation-timing-function: linear;
    margin:0;
    padding:0;
    top:25vh;
    left:90vw;
}

@keyframes stone_throwing{
    100% {left: 45vw; top:50vh;}
}

#baseball_bat_hit{
    position:absolute;
    width:10vw;
    left:22vw;
    top:0vh;
    transform-origin: bottom right;

    animation-name: bonk;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes bonk{
    0% {transform: rotate(45deg)}
    40% {transform: rotate(-10deg)}
    100% {transform: rotate(45deg)}
}

#lifebar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 15vh;
    width: 100%;
    height:5vh;
    text-align: center;
}

#hp_bar_red{
    position: absolute;
    width:100%;
    height:100%;
    background-image: linear-gradient(to bottom, #f00, #a00);
}

#hp_bar_green{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #0f0, #0a0)
}

#goat_name{
    z-index:100;
    margin-left: 2vw;
    font-family: "Frijole";
    font-size: 1.5vw;
}

#goat_hp{
    z-index: 100;
    margin-right: 2vw;
    font-family: "Frijole";
    font-size: 1.5vw;
}

#knife_hit{
    position:absolute;
    width:8vw;
    left:20vw;
    top:20vh;
    transform: rotate(70deg);

    z-index:-1;

    animation-name: knife_stab;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes knife_stab{
    40% {left: 15vw; top:15vh;}
}

#cloud_div{
    display: flex;
    flex-direction: column;

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

    visibility: hidden;
    position: absolute;
    width:25vw;
    margin:0;
    padding:0;
    z-index:-1;
    top:2vh;
    left:0vw;
    transform: translate(-25vw, -15vh);
}

.cloud_animation{
    animation-name: cloud_move;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    
}

#cloud_hit{
    width:100%;
}

#lightning_strike{
    width:20%;
    height: 35vh;
    transform: translateY(-10vh);

    z-index:-2;

    visibility: hidden;
}

@keyframes cloud_move{
    0% {left: 0vw;}
    100%{left:125vw;}
}

#lightning{
    visibility: hidden;
}

.lightning_animation{
    animation-name: lightning_strike;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes lightning_strike{
    0%{opacity:0}
    20%{opacity:.2}
    40%{opacity:0}
    70%{opacity:1}
    100%{opacity:0}
}