.body{
    width:100%;
    height:600px;
    display:flex;
    flex-flow: column;
    justify-content:center;
    align-items:center;
}

.box{
    width:400px;
    height:200px;
    background: #33cca8;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color: #fff;
    box-shadow:  0 6px 6px hsl(0deg 0% 0% / 0.3);;
}

.join{
    font-size: 1.2rem;
    text-decoration: none;
    color: #fff;
    background: #ffc700;
    padding: 10px 20px;
    border-radius: 10px;
}

.join:hover{
    color: #555;
    transition: .5s;
}

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

    .box{
        width: 300px;
        
    }

    .body p{
        text-align: center;
    }


}