@import url('https://fonts.googleapis.com/css2?family=Cause:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');

body{
    background:linear-gradient(90deg, #771fd5 , #e40d80);
}
.tower-choice {
  width: 300px;
  height: 300px;
  border: 10px solid #2f2f2f;
  border-radius: 50%;
  background: transparent;
  display: inline-block;
  box-sizing: border-box;
  margin-top:100px;
  margin-left:100px;
}
.tower-option{
    background:linear-gradient(90deg, #939393 , #bbb8bd);
    border:#2f2f2f 5px solid;
    border-radius:35%;
    display:flex;
    justify-content:center;
    align-items:center;
    width:90px;
    height:90px;
    transition:all 0.3s;
}
.tower-option:hover{
    filter:brightness(115%);
    cursor:pointer;
    transition:all 0.3s;
    transform:scale(1.1);
}
.tower-cost{
    position:absolute;
    top:90px;
    background:linear-gradient(90deg, #939393 , #bbb8bd);
    display:flex;
    justify-content:center;
    align-items:center;
    border:3px solid #2f2f2f;
    width:50px;
    height:20px;
    border-radius:0 0 10px 10px;
    color:rgb(218, 150, 24);
    font-family:'Sour Gummy', cursive;
    text-shadow: 0 1px 0 rgba(200, 96, 11, 0.859), 0 3px 6px rgba(255, 132, 0, 0.623);
    font-size:20px;
    
}
.cost{
    filter:brightness(150%)
}
.title{
    font-family:'Sour Gummy', cursive;
    background:linear-gradient(90deg, #771fd5 , #e40d80);
    color:transparent;
    -webkit-background-clip:text;
    background-clip:text;
    font-size:70px;
    font-weight:500;
}
.stats-container{
    margin-left:20px;
}
.description{
    font-family:'Sour Gummy', cursive;
    background:linear-gradient(90deg, #28d7c0 , #560fda);
    color:transparent;
    -webkit-background-clip:text;
    background-clip:text;
    font-size:40px;
    margin:20px;
}
.stats{
    background:linear-gradient(90deg, #771fd5 , #e40d80);
    color:transparent;
    -webkit-background-clip:text;
    background-clip:text;
    font-size:40px;
    font-family:'Sour Gummy', cursive;
}
.hidden{
    display:none;
}
#archer{
    position:relative;
    top:-40px;
    left:90px;
}

.tower-stats{
    position:absolute;
    top:50px;
    right:80px;
    width:500px;
    height:600px;
    background:rgba(0,0,0,0.5);
}


#mage{
    position:relative;
    top:-40px;
    left:-40px;
}
#engineer{
    position:relative;
    top:10px;
}
#wild-hunter{
    position:relative;
    top:-90px;
    left:180px;
}
#barracks{
    position:relative;
    top:-340px;
    left:220px;
}