@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100;300;400&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'M PLUS 1 Code', sans-serif;
    box-sizing: border-box;
    font-weight: 350;
    position: relative;
}

body {
    height: 100vh;
    background: url("./image/bg.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.container {
    /* border: 3px solid black; */
    height: 300px;
    width: 300px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position:relative;
    transform: scale(1);
}

.container.grow {
    animation: grow 3s linear forwards;
}

.container.shrinl {
    animation: shrinl 3s linear forwards;
}

h1 {
    transform: translateY(150px);
}

#text {
    font-size: 1.3rem;
}

.circle {
    height: 100%;
    width: 100%;
    background-color: #010f1c;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index:-1;
}

.outer-circle {
    height: 320px;
    width: 320px;
    background: conic-gradient(
        #c2d0fd 0%,
        #7b8fff 40%,
        green 40%,
        green 60%,
        #ffc6be 60%,
        #ff8484 100%
      );
    position: absolute;
    top:-10px;
    left:-10px;
    border-radius: 50%;
    z-index:-2;
}

.pointer-container {
    width: 20px;
    height: 190px;
    /* border-radius: 50%; */
    /* background-color: brown; */
    position: absolute;
    top: -40px;
    left:140px;
    transform-origin: bottom center;
    animation: rotate 7500ms linear forwards infinite;
}

.pointer {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
}

.musicBox {
    margin-bottom: 50px;
}

.footer {
    width: 100%;
    height: 20px;
    position: absolute;
    left: 0px;
    bottom:20px;
    z-index: -1;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes grow {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}

@keyframes shrinl {
    0% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}