@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Gothic+A1&family=Mali:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Gothic+A1&family=Mali:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

.box-text {
    text-transform: uppercase;
    text-align: center;
    font-family: 'Anton', sans-serif;
    /* font-family: 'Gothic A1', sans-serif; */
    /* font-weight: bold; */
    font-size: 22px;
}

.flex-container {
    display: flex;
    margin-bottom: 20px;
}

.flex-child {
    flex: 1;
    margin-right: 20px;
}

.flex-child.white  {
    background-color: whitesmoke;
    padding-top: 20px;
    height: 77.9091px;
    
    clip-path: inset(0 round 5px);
    border-style: solid;
    border-width: 5px;
    border-image-slice: 1;
}



.flex-child.white.border-gradient-purple {
    border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}

.flex-child.white.border-gradient-blue {
    border-image-source: linear-gradient(to left, #8383ff, #1a1ad6);
}

.flex-child.white.border-gradient-pink {
    border-image-source: linear-gradient(to left, pink, #e37c8e);
}

.flex-child.white.border-gradient-green {
    border-image-source: linear-gradient(to left, #00C853, #B2FF59);
}

.flex-child.white.border-gradient-orange {
    border-image-source: linear-gradient(to left, orange, #d38900);
}

.flex-child.white.border-gradient-red {
    border-image-source: linear-gradient(to left, red, #990000);
}



#purplefont {
    color: #743ad5;
}

#lightbluefont {
    color: #8383ff;
}

#pinkfont {
    color: #e37c8e;
}

#lightgreenfont {
    color: #00C853;
}

#orangefont {
    color: orange;
}

#redfont {
     color: red;
}

.flex-child.red {
    background-color: rgba(248, 63, 63, 0.975);
    color: black;
    padding-top: 20px;
    height: 77.9091px;
}

.flex-child.lightblue {
    background-color: lightblue;
    color: yellow;
    padding-top: 20px;
    height: 77.9091px;
}

.flex-child.lightgreen {
    background-color: lightgreen;
    color: yellow;
    padding-top: 20px;
    height: 77.9091px;
}

.flex-child.lightpink {
    background-color: yellow;
    color: red;
    padding-top: 20px;
    height: 77.9091px;
}

.flex-child.lightyellow {
    background-color: lightgoldenrodyellow;
    color: coral;
    padding-top: 20px;
    height: 77.9091px;
}

.flex-child.lightorange {
    background-color: rgb(249, 163, 2);
    color: blue;
    padding-top: 20px;
    height: 77.9091px;
}



@media screen and (max-width: 1180px) {
    

    
        .box-text {
             font-size: 18px;
        }
}

@media screen and (max-width: 860px) {
    .flex-container {
        display: block;
        margin-bottom: 5px;
    }

    .flex-child {
        margin-bottom: 5px;
    }
        .box-text {
             font-size: 15px;
        }
}

/* @media screen and (max-width: 694px) {
    .box-text {
        font-size: 12px;
    }
} */