@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Waterfall&display=swap');


* {
    box-sizing: border-box;
}

body,
html {
    background : #000000;
    font-family: 'Trebuchet MS', sans-serif;
    text-align : center;
}

.mainContainer h1 {
    font-family: 'Josefin Sans', sans-serif;
    padding    : 5px 0px 10px 0px;
    color      : #ffffff;
    text-shadow: 0 0 10px #11d30b;
}

.mainContainer h1:hover {
    text-shadow: 0 0 14px #0b7e07;

}

.container .teamName {
    text-transform: uppercase;
    padding       : 10px 0px;
    letter-spacing: 20px;
    font-family   : 'Josefin Sans', sans-serif;
    color         : #0ae7d5;
    font-size     : 17px;
}

.container .teamName span {
    color: red;
}

.hr {
    width : 600px;
    border: 2px solid #292b2983;
}

.mainImage {
    margin       : 20px 0px;
    width        : 200px;
    border       : 3px solid rgba(14, 167, 14, 0.774);
    border-radius: 50%;
    box-shadow   : 0px 0px 17px #06d117;

}

.mainImage:hover {
    box-shadow: 0px 0px 19px #0c8a16;
}

.mainContainer {
    text-shadow: 2px 2px 2px 2px green;
}

.text1 {
    padding       : 5px 200px;
    text-transform: uppercase;
    color         : green;

}


.textbox {
    background-color: #97e900;
    color           : #000000;
    font-size       : 17px;
    border-radius   : 20px;
    padding         : 10px 0px;
    border          : none;
    text-align      : center;
}

.text2 {
    color         : #ffffff;
    font-size     : 22px;
    letter-spacing: 5px;
    font-family   : 'Waterfall', cursive;
}

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

    .text1 {
        padding       : 0px 20px;
        text-transform: uppercase;
        color         : #008000;
    }

    .effect2 {
        font-size  : 17px;
        padding-top: 1px;
    }

    .container .teamName {
        padding       : 10px 0px;
        letter-spacing: 12px;
        font-size     : 14px;
    }

    .mainContainer h1 {
        padding: 2px 0px;
    }

    .textbox {

        font-size: 13px;
        width    : 300px;
    }

    .hr {
        width: 300px;
    }

    .text2 {
        color         : #ffffff;
        font-size     : 17px;
        letter-spacing: 4px;
        font-family   : 'Waterfall', cursive;
    }
}