*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

h1{
    background-color: black;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}

h3{
    background-color: black;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    margin-bottom: 30px;
}


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

.card1 {
    width: 230px;
    height: 120px;
    display: flex;
    flex-direction: column;
    background-color: #1abc9c;
    transition: 0.3s;
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card1:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
   
}

.card2 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #3498db;
    
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card2:hover {
border-radius: 5px;
transform: scale(1.01);
transition: 0.3s;
border: 1px solid;
padding: 10px;

}


.card3 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #9b59b6;
   
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card3:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
    
}


.card4 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #34495e;
    
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card4:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
    
}


.card5 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #16a085;
    
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card5:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
    
}

.card6 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #27ae60;
   
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card6:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
   
}


.card7 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #2980b9;
    
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card7:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
   
}


.card8 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #8e44ad;
   
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card8:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
   
}



.card9 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #2c3e50;
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card9:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
    
}

.card10 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #f1c40f;
   
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card10:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
   
}


.card11 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #e67e22;
   
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card11:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
    
}

.card12 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #e74c3c;
    
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card12:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
    
}

.card13 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #ecf0f1;
    
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card13:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
   
}

.card14 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #95a5a6;
   
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card14:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
   
}

.card15 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #f39c12;
    
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card15:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
   
}

.card16 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #d35400;
   
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card16:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
    
}

.card17 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #c0392b;
    
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card17:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
    
}

.card18 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #bdc3c7;
  
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card18:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
   
}

.card19 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #7f8c8d;
  
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card19:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
    
}


.card20 {
    width: 230px;
    height: 120px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background-color: #00b894;
    
}

.hexcode {
    margin-top: auto;
    margin-left: auto;
}

.card20:hover {
    border-radius: 5px;
    transform: scale(1.01);
    transition: 0.3s;
    border: 1px solid;
    padding: 10px;
   
}


@media screen  and (max-width:1024px){
    .wrapper{
        width: 70%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin-left: 170px;
    }
}