button{
    background-color: rgba(0, 136, 129, 0.712);
    color: white;
 background-color: inherit;
 display: inline-block;
}
.btn{
    border: .1rem solid  rgba(194, 191, 191, 0.829);
margin: 0 1rem;
color: black;
font-size: 1.2rem;
font-family: 'Yellowtail'
}

.ferst{
    margin:1.5rem auto;
}
.up .container .bt{ 
    /* padding: 2rem; */
width: 9rem;
    height: 9rem;
border: none;
border-radius: 2rem;
transition: 500ms;
border: .1px solid rgba(255, 255, 255, 0.445);
font-size: 2rem;
}
.up .container .bt:hover{
  
    background-color: rgba(35, 139, 134, 0.651); 
    /* background-color: rgba(0, 136, 129, 0.712); */


}

.header{
    margin: auto;
}
.header h3{
text-transform: capitalize;
font-family: Yellowtail;
font-size: 3rem;
padding-top: .5rem ;
color: white;
}
.up{
    margin: auto;
}

body{
    background-color: rgba(35, 139, 108, 0.651); 
 
   

}

#joinbtn:hover{

    background-color: rgba(0, 136, 129, 0.712);


    color: beige;
}
.max{
    max-width: 600px;
}
input::placeholder{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

input{
    background-color: inherit;

}
.hed {
padding: .5rem 0;
    color: wheat;
    text-align: center;

}
.white{
    text-align: center;
    padding: .5rem 0;

    color: wheat;
}
#rematch{
    text-align: center;
margin: 1rem auto;
        color: wheat; 
padding: .7rem;
border: none;
border-radius: 2rem;
transition: 500ms;
border: .1px solid rgba(255, 255, 255, 0.445);
background-color: inherit;

}
#rematch:hover{


    background-color: rgba(0, 136, 129, 0.712);

}

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

}


@media screen and (min-width:1200px) and (max-width:2100px){
   .hed{
 position: absolute;
top: 30%;
font-size: 2rem;
left: 3rem;
text-align: center;


    }
    .white{
        position: absolute;
        top: 40%;
        left: 2rem;
    text-align: center;

    }
    #rematch{
        position: absolute;
        top: 55%;
        left: 1rem;
    }
}


@media screen and (max-width:600px){
    .max{
        max-width: 400px;
        

    } 

    .up .container .bt{ 
        /* padding: 1rem; */
    width: 5rem;
        height: 5rem;
    border: none;
    border-radius: 1rem;
    transition: 500ms;
    border: .1px solid rgba(255, 255, 255, 0.445);
    font-size: 1.3rem;
    margin-left: 1rem;
    
    }


    .btn{
        border: .1rem solid  rgba(194, 191, 191, 0.829);
        margin: 1rem 0rem;
        color: black;

    font-size: 1.2rem;
    font-family: 'Yellowtail'
    } 

    
    .header h3{
        text-transform: capitalize;
        font-family: Yellowtail;
        font-size: 2.5rem;
        padding: 1.5rem 0;
        }



  
}

@media screen and (min-width:601px) and (max-width:760px){
    .up .container .bt{ 
        /* padding: 2rem; */
    width: 8rem;
        height: 8rem;
    border: none;
    border-radius: 2rem;
    transition: 500ms;
    border: .1px solid rgba(255, 255, 255, 0.445);

    }
.header h3{
    font-size: 2.5rem;
}
    .ferst{
        margin:1rem auto;
    }


  .row  .btn{
   
        border: .1rem solid  rgba(194, 191, 191, 0.829);
        margin: 1rem 0rem;
        color: black;

    font-size: 1.2rem;
    font-family: 'Yellowtail'
    } 
}