/* https://github.com/nickarocho/play-among-the-stars */

.hall-of-fame-entry {

}

.star-container {
    margin: 0 auto;
    position: relative;
    width: 300px;
    height: 300px;
    transition: all .2s ease-in-out;
}

.outer-star {
    position: absolute;
    width: 90%;
    height: 90%;
    color: white;
    background-color: #a04e05;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.inner-star {
    position: absolute;
    flex-direction: column;
    width: 86%;
    height: 86%;
    color: white;
    background-color: #e8720a;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.tag {
    font-family: 'Abel', sans-serif;
    color: white;
    font-size: 16px;
    text-transform: uppercase;
    position: relative;
    top: 6px;
    z-index: 1;
    text-align: center;
}

.tag.smaller-1 {
    font-size: 12px;
}

.tag.smaller-2 {
    width: 160px;
    font-size: 8px;
}

/* Custom utility class */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.record-container {
    position: relative;
    top: 6px;
    z-index: 2;
    width: 60px;
    height: 60px;
}

.record-border {
    width: 100%;
    height: 100%;
    background-color: #9b8a6c;
    border: .2vw solid #ffffe3;
    box-sizing: border-box;
}

.record-vinyl {
    width: 90%;
    height: 90%;
    background-color: #ffffe3;
    background: linear-gradient(-90deg, #fdfdfd 0%, #e8e877 50%, #fdfdfd);
}

.record-center-border {
    width: 32%;
    height: 32%;
    background-color: #52502a;
}

.record-center {
    width: 90%;
    height: 90%;
    background-color: #52502a;
    border: 0.3vw solid #ffffe3;
    box-sizing: border-box;
}

.record-arm {
    width: 13px;
    height: 10px;
    background-color: #ffffe3;
    border-style: solid;
    border-color: #9b8a6c;
    border-width: 4px 0;
    border-radius: 0 60px 60px 0;
    z-index: 1000;
    transform-origin: 100%;
    transform: rotate(-125deg);
    position: relative;
    top: -24px;
    box-sizing: border-box;
    clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0 90%);
    -webkit-clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0 90%);
}

/* Custom utility class */
.circle {
    border-radius: 50%;
}

.hall-of-fame-entry .quote {
    border: 2px solid #a04e05;
    text-align: center;
    border-radius: 6px;
    padding: 6px;
    margin-top: -12px;
    background-color: #fff;
}

.pulse:hover{
    animation: pulse 1s infinite;
    animation-timing-function: linear;
}

@keyframes pulse {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(10deg);
        100% { transform: scale(1) rotate(0deg); }
    }
}