web.css

*{
    box-sizing: border-box;
    margin: .2rem;
    padding: 0rem;
}
html{
    font-size: 62.5%;
    background-color: rgb(0, 0, 0);
    color: aliceblue;
    overflow-wrap: auto;
}
.navbar img{
    height: 10.0rem;
    width: 10.0rem;
    cursor: pointer;
    rotate: 45deg;
    padding: .9rem;
    margin: .3rem;
    filter: invert(100%);
}
.navbar{
    background-color: rgb(0, 0, 0);
    border: .2rem solid black;
    /*position:sticky*/
}
.navbar ul{
    list-style: none;
    display: flex;
    position:sticky;
}
.navbar ul li{
    text-align: center;
    font-size: 2.0rem;
    padding: 3.1rem 5.6rem;
    margin: .1rem;
}
.navbar ul li a{
    color: aliceblue;
    text-decoration: none;
    height: 1.0rem;
    width: 2.0rem;
}
.navbar input{
    height: 4.6rem;
    background-color: black;
    color: aliceblue;
    width:20.0rem;
    border: .2rem solid white; 
    padding:.3rem;
    margin-left: 8.7rem;
    margin-top: 2.3rem;
}
.navbar ul li a:hover{
    background-color: rgb(183, 197, 197);
    color: black;    
}
.container{
    display:flex;
    margin: 3rem auto;
    /* width:160rem; */
    height: 50rem;
    padding:.5rem;
    box-shadow: 0rem 0rem 1.2rem .6rem grey;
    /* background-image:url(image/run.jpg); */
    background-repeat:no-repeat;
    background-size: contain;
    background-position: 76.0rem center;
}
.container img{
    height: 47rem;
    width: 47rem;
    margin: auto;
}
.club{
    display: inline-block;
    margin:5.0rem;
    margin-left: 10.0rem;
    font-family: 'Paytone One', sans-serif;
    font-size: 10.0rem;
}
.club:hover{
    transform: scale(1.2);
}
.container p{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-left: 40.0rem;
    font-size: 2.0rem;
}
.features{
    float:left;
    display: block;
    padding: 1.7rem;
    font-size: 3.0rem;
    width:40.0rem;
}
.features li{
    padding: 1.3rem;
}
.imagesec{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 10rem auto;
    width: 117rem;
    padding: 0.4rem;
}
.imgsec{
    display: flex;
    flex-direction: column;
    border: .2rem solid white;
    /* padding: 1.3rem; */
    margin: 10.0rem 2.0rem;
    border-radius: 1.0rem;
    box-shadow: 0rem 0rem 1.2rem .6rem grey;
}
.imgsec img{
    height:30rem;
    width:30rem;
}
.img2{
    height:30rem;
    width:30rem;
}
.imagesec p{
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.secjp{
    margin: 3rem auto;
    margin-bottom: 20.6rem;
    display: flex;
    justify-content: center;
}
.join{
    display: flex;
    flex-direction: column;
    font-size: 5.0rem;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    /*border: 2rem solid white;*/
    /* width:40%; */
    height: 40.0rem;
    margin: 1.0rem;
}
.para{
    margin-top: 7.0rem;
    padding: .5rem;
    text-align: center;
}
.pic{
    /* width:40rem; */
    margin: 1.0rem;
    height: 40.0rem;
    /*border: 2rem solid white;*/
    /* background-image: url(image/muscles.jpg); */
    background-repeat: no-repeat;
    background-size:contain;

}
.pic img{
    height: 40rem;
    width: 40rem;
}
.formbtn{
    text-decoration: none;
    display: block;
    margin-top:3.3rem;
    margin-left:17.0rem ;
    padding: .5rem;
    background-color: aliceblue;
    color: black;
    border: .2rem solid black;
    border-radius: .4rem;
    width:14.0rem;
    height: 4.0rem;
    font-size: 2.3rem;
    cursor: pointer;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.formbtn:hover{
    background-color:black;
    color:aliceblue;
    border: .2rem solid aliceblue;
    border-radius: .4rem;
}
footer{
    text-align: center;
    font-size: 2rem;
    border:.2rem solid aliceblue ;
}
@media (max-width:980px) {
    html{
        font-size: 55%;
    }
}
@media (max-width:800px) {
    html{
        font-size: 50%;
    }
}
@media (max-width:720px) {
    html{
        font-size: 50%;
    }
}
@media (max-width:600px) {
    html{
        font-size: 50%;
    }
}
@media (max-width:500px) {
    html{
        font-size: 45%;
    }
}@media (max-width:400px) {
    html{
        font-size: 40%;
    }
}