:root {
    --mauve: rgb(115, 5, 255);
    --yellow: rgb(255, 214, 0);
    --purple: rgb(126, 62, 189);
    --light-purple: rgb(164, 126, 244);
    --light-yellow: rgb(255, 233, 87);
    --pale-yellow: rgb(255, 247, 143);
    --dark-purple: rgb(94, 53, 177)
}


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--mauve);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.container {
    padding: 100px;
}

main {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 15px solid var(--yellow);
    position: relative;
    overflow: hidden;
    transition: transform 3.75s ease-out;
}

main div {
    height: 50%;
    width: 160px;
    position: absolute;
    clip-path: polygon(100% 0, 50% 100%, 0 0);
    transform: translateX(-50%);
    transform-origin: bottom;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    font-family: sans-serif;
    color: white;
    left: 155px;
}

#red {
    background-color: red;
    background-image: url("assets/color/red.png");
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: 65%;
    transform: rotate(0deg);
}


#orange {
    background-color: orange;
    background-image: url("assets/color/orange.png");
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: 65%;
    transform: rotate(36deg);
}


#yellow {
    background-color: yellow;
    background-image: url("assets/color/yellow.png");
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: 65%;
    transform: rotate(72deg);
}

#green {
    background-color: lime;
    background-image: url("assets/color/green.png");
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: 65%;
    transform: rotate(108deg);
}

#blue {
    background-color: blue;
    background-image: url("assets/color/blue.png");
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: 65%;
    transform: rotate(144deg);
}

#mauve {
    background-color: blueviolet;
    background-image: url("assets/color/mauve.png");
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: 65%;
    transform: rotate(180deg);
}

#brown {
    background-color: saddlebrown;
    background-image: url("assets/color/brown.png");
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: 65%;
    transform: rotate(216deg);
}

#white {
    background-color: white;
    background-image: url("assets/color/white.png");
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: 65%;
    transform: rotate(252deg);
}

#black {
    background-color: black;
    background-image: url("assets/color/black.png");
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: 65%;
    transform: rotate(288deg);
}

#gray {
    background-color: gray;
    background-image: url("assets/color/gray.png");
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: 65%;
    transform: rotate(324deg);
}


img {
    position: absolute;
    top: calc(50vh - 250px);
    height: 60px;
    width: 60px;
    margin-top: 0;
    z-index: 20;
}


#spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background-color: var(--light-purple);
    text-transform: uppercase;
    border: 8px solid var(--purple);
    font-weight: bold;
    font-size: 20px;
    color: white;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    letter-spacing: 1px;
}

#spin:hover {
    color: var(--purple);
}