html{
    height:auto;
}

.mainbody {
  text-align: center;
  padding: 1rem 2rem;
}

.mainbody > h2{
    font-size: 4rem;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, hsla(152, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mainbody > h3{
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.flexcontainer > p.intro{
    font-size: 2rem;
    text-align: left;
    width: 40%;
    flex: 1;
}

.flexcontainer > figure > img.intro{
    max-width: 500px;
    height: auto;
}

.flexcontainer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:20px;
}

.cardcontainer {
    display: grid;
    padding: 1.5rem 2rem;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
    background: rgba(19, 67, 112, 0.349);
    border-radius: 8px;
    padding: 2rem;
}

.card h2 {
    font-size: 1.5rem;
    text-align: left;
    margin: 1rem;
}

.card p{
    font-size: 1.2rem;
    text-align: left;
}


.card ul li{
    text-align: left;
    font-size: 1.2rem;
}

.card li::marker{
    color:darkseagreen;
}


.bounceword{
    display: inline-block;
    animation: 0.5s wordbounce cubic-bezier(0.55, 0.06, 0.68, 0.19) alternate infinite;
    animation-delay: 0.5s;
}



@keyframes wordbounce {

    0%{
        translate: 0px -5px;
    }
    100%{
        translate: 0px 0px;
    }
}