* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;

    background: rgb(247, 247, 251);
    background: radial-gradient(
        circle,
        rgba(247, 247, 251, 1) 0%,
        rgba(74, 224, 242, 1) 42%,
        rgba(0, 103, 142, 1) 78%
    );

    overflow: hidden;
    max-height: 100vh;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
}

.star {
    position: absolute;
    top: 16%;
    width: 0px;
    height: 0px;
    border-right: 4.3rem solid transparent;
    border-bottom: 2.5rem solid #f9b70b;
    border-left: 4.3rem solid transparent;
    transform: rotate(35deg);
}

.star:before {
    border-bottom: 3.15rem solid #f9b70b;
    border-left: 1.25rem solid transparent;
    border-right: 1.25rem solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -39px;
    left: -45px;
    content: "";
    transform: rotate(-35deg);
}

.star:after {
    position: absolute;
    display: block;
    top: 3px;
    left: -73px;
    width: 0px;
    height: 0px;
    border-right: 4.37rem solid transparent;
    border-bottom: 2.5rem solid #f9b70b;
    border-left: 4.37rem solid transparent;
    transform: rotate(-70deg);
    content: "";
}

.star-bright {
    position: absolute;
    z-index: -1;
    top: 5%;
    width: 19rem;
    height: 19rem;
    border-radius: 50%;
    background-color: #eee286;
    filter: blur(50px);
}

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent #0e7a3a transparent;
    position: absolute;
}

.t-one {
    border-width: 0 10rem 10rem;
    top: 20%;
}

.t-two {
    border-width: 0 15rem 10rem 15rem;
    top: 30%;
}

.t-three {
    border-width: 0 20rem 10rem 20rem;
    top: 40%;
}

.t-four {
    border-width: 0 25rem 14rem 25rem;
    top: 45%;
}

.base {
    position: absolute;
    top: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: -1;
}

.base .trunk {
    width: 6.25rem;
    height: 3.75rem;
    background-color: #502207;
    box-shadow: 0 0 5px #391a08;
    border: 3px solid #391a08;
}

.base .border {
    width: 11.9rem;
    height: 3.125rem;
    background-color: #8e0002;
    border: 5px solid #620a0b;
    border-radius: 5px;
    z-index: 1;
}

.base .bottom {
    width: 10.6rem;
    height: 6.25rem;
    background-color: #8e0002;
    border: 5px solid #620a0b;
    box-shadow: 0 0 5px #630808;
    border-radius: 5px;
    position: relative;
    top: -10px;
}

.ball {
    position: absolute;
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    background-color: #cf0f0f;
    box-shadow: 0 0 5px #630808;
    z-index: 10;
}

.ball::after {
    position: absolute;
    height: 25px;
    width: 20px;
    border-radius: 50%;
    top: 5px;
    left: 10px;
    filter: blur(5px);
    background-color: #e69b9b;
    z-index: 100;
    content: "";
}

.b1 {
    bottom: 67%;
    left: 52%;
}

.b2 {
    bottom: 63%;
    left: 44%;
}

.b3 {
    bottom: 57%;
    left: 57%;
}

.b4 {
    bottom: 53%;
    left: 49%;
}

.b5 {
    bottom: 55%;
    left: 40%;
}

.b6 {
    bottom: 45%;
    left: 56%;
}

.b7 {
    bottom: 40%;
    left: 35%;
}

.b8 {
    bottom: 42%;
    left: 45%;
}

.b9 {
    bottom: 35%;
    left: 64%;
}


main{
  padding: 0;
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    font-size: 20px;
    background-color: #134e4e;
    padding: 1rem 6rem;
    display: flex;
    justify-content: space-around;
}

a:active, a:visited, a:link {
    color: white;
    text-decoration: none;
}