h1{box-shadow: 0 0 30px 0 rgba(3, 209, 245, 0.97);
    width: 100%;
    height: 40px;
    background: linear-gradient(#2e99ae, #7bc1fe, #2e99ae);
    text-align: center;}
.yellow {box-shadow: 0 0 10px 0 rgba(238, 255, 5, 0.982);
    height: 70px;
    width: 1500px;
    background-color: rgb(238, 255, 0);}
    .joy{
        font-weight: 1000;
        font-family: sans-serif;}
.blue {box-shadow: 0 0 10px 0 rgba(7, 38, 241, 0.982);
    height: 70px;
    width: 1500px;
    background-color: rgb(13, 0, 255);}
            .calm{
        font-weight: 1000;
        font-family: sans-serif;}
.red {box-shadow: 0 0 10px 0 rgba(242, 0, 0, 0.982);
    height: 70px;
    width: 1500px;
    background-color: rgb(255, 2, 2);}            
        .passion{
        font-weight: 1000;
        font-family: sans-serif;}
 .green{box-shadow: 0 0 10px 0 rgba(40, 242, 0, 0.982);
    height: 70px;
    width: 1500px;
    background-color: rgb(0, 255, 38);}       
        .growth{
        font-weight: 1000;
        font-family: sans-serif;}
 .purple {box-shadow: 0 0 10px 0 rgba(242, 0, 165, 0.982);
    height: 70px;
    width: 1500px;
    background-color: rgb(255, 0, 238);}       
        .creativity{
        font-weight: 1000;
        font-family: sans-serif;}
 .orange {box-shadow: 0 0 10px 0 rgba(250, 77, 3, 0.982);
    height: 70px;
    width: 1500px;
    background-color: rgb(255, 94, 0);}         
        .excitement{
        font-weight: 1000;
        font-family: sans-serif;}
 .gray {box-shadow: 0 0 10px 0 rgba(100, 99, 99, 0.982);
    height: 70px;
    width: 1500px;
    background-color: rgb(105, 108, 108);}         
        .neutrality{
        font-weight: 1000;
        font-family: sans-serif;}
        .body{
            background-color: #070501;}
        .yellow:hover,
.blue:hover,
.red:hover,
.green:hover,
.purple:hover,
.orange:hover,
.gray:hover { background-color: #ffffff;
            color: #000000;
            transition: 0.5s;
           
        }