/* body{
    display: flex;
    justify-content: center;
    align-items: center;
} */
*{
    margin: 0;
    padding: 0;
}
body{
    background-image: url('../img/op.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
 
}

.friend{
    padding: 30px;
}
/* .friend *{
    padding-bottom: 30px;
} */

.bigger{
    font-size: 5rem;
}



#power3{
    background-image: url('../img/nami.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
}

.wid{}

#power2{
    background-image: url('../img/zoro.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
  
}
#power2 h4{
    opacity: 1;
}

#power1{
    background-image: url('../img/luffy.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
}

html{
    font-size: 62.5%;
}

body{
    height: 100vh;
}


 
.friend{
    margin: 20px;
}

.cont1{
   margin-bottom: 10%;
}

.friend *{
    color: rgb(0, 0, 0);
}
.friend{
    background-color: rgba(255, 255, 255, 0.632);
    border-radius: 20px;
    font-size: 2rem;
    margin: 10px;
}

.cont1{
    background-color: rgba(255, 255, 255, 0.632);
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    font-family: 'Pirata One';
    font-size: 3rem;
}

.jus{
    display: flex;
    justify-content: start;
}
.center{
    display: flex;
    justify-content: center;
}
.alicen{
    display: flex;
    align-items: center;
}
.col{
    flex-flow: column;
}
.gap{
    gap: 30px;
}
.cont{
    display: flex;
    justify-content: center;
    align-items: center;
}
.cont div{
    width: 100px;
    border: 2px solid green;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.items{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

.color{
    background-color: rgba(255, 255, 255, 0.625);
    border-radius: 20px;
    text-align: center;
}

.color *{
    padding-bottom: 20px;
}

#friends{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-flow: row;
    background-color: rgba(255, 255, 255, 0.363);
    border-radius: 20px;
    
}
.friend{
    width: 33.3333%;
}
#friends img{
    width: 200px;
}


body{
    height: 100vh;
}

.one{
    width: 100px;
}

.pieceCont{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.byeaj{
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width:1850px){
    #friends{
        flex-flow: column;
    }
    .friend{
        width: 60%;
    }
    html{
        font-size: 40%;
    }
    .biggest{
        
    }
}
@media (max-width: 1560px){

}

@media (max-width: 920px){
    html{
        font-size: 55%;
    }

}

@media (max-width: 670px){
    html{
        font-size: 50%;
    }
}

@media (max-width: 511px){
    html{
        font-size: 45%;
    }
}


@media (max-width: 460px){
    html{
        font-size: 40%;
    }
}