body {
    background-color: #2f2f2f;
    margin: 0;
    padding: 0;
}

.equipment-card-container {
    position: relative;
    left: -172px;
    top: -96px;
    width: 800px;
    height: 160px;
    display: flex;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
}

.equipment-card-container::before, .equipment-card-container::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: #2f2f2f93;
}

.equipment-card-container::before {
    top: -10px;
    left: -10px;
    border-top-left-radius: 20px;
}

.equipment-card-container::after {
    top: -10px;
    right: -10px;
    border-top-right-radius: 20px;
}

.equipment-card-corner::before, .equipment-card-corner::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: #2f2f2f93;
}

.equipment-card-corner::before {
    bottom: -10px;
    left: -10px;
    border-bottom-left-radius: 20px;
}

.equipment-card-corner::after {
    bottom: -10px;
    right: -10px;
    border-bottom-right-radius: 20px;
}

.equipment-card-text-area {
    width: 162px;
    padding: 10px;
    background-color: #4b59749f;
}

.equipment-card-text-header {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.equipment-card-animate-right {
    width: 18px;
    height: 18px;
    padding-top: 5px;
    padding-right: 6px;
}

.equipment-card-animate-left {
    width: 18px;
    height: 18px;
    padding-left: 6px;
    padding-top: 5px;
}

.equipment-card-title {
    font-size: 20px;
    color: #808895;
}

.equipment-card-content {
    text-align: left;
    padding-top: 20px;
    color: #ffffff;
}

.equipment-card-footer {
    display: flex;
    justify-content: right;
    padding-top: 20px;
    color: #340a0f;
}

.equipment-card-squares {
    background-color: #6c6e7aa2;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 42px;
}

.equipment-card-square {
    position: relative;
    width: 67px;
    height: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    border: 3px solid #979a9b;
    outline: 1px solid #000;
}

.equipment-card-animate-right {
    animation: equipment-card-move-right 1s infinite alternate;
}

.equipment-card-animate-left {
    animation: equipment-card-move-left 1s infinite alternate;
}

@keyframes equipment-card-move-right {
    from { transform: translateX(0); }
    to { transform: translateX(6px); }
}

@keyframes equipment-card-move-left {
    from { transform: translateX(0); }
    to { transform: translateX(-6px); }
}
.equipment-card-square .shine {
    position: absolute;
    background-image: url(../images/icon_shine.png);
    background-repeat: no-repeat;
    top: 0px;
    left: 0px;
    width: 48px;
    height: 48px;
    background-position: -99px 0;
    -webkit-animation: shine 3s infinite;
    animation: shine 3s infinite;
    z-index:1;
}