*{
    box-sizing: border-box;
    margin:0;
}

html{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: wheat;
    font-size: 0.8rem;
}

body {
    display: grid;
    width: 100vw;
    height: 100vh;
    place-content: center;
    background: whitesmoke;
}

.container{
    display: grid;
    place-items: center;
}

.clockContainer{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100px;
    width: 100px;
    background: rgb(34, 30, 24);
    border-left: 5px solid orangered;
    border-right: 5px solid orangered;
    border-top: 5px solid wheat;
    border-bottom: 5px solid wheat;
    border-radius: 50%;
    place-content: center;
}

p{
    text-align: center;
    text-transform: uppercase;
}

.uppertext{
    margin-bottom: 30px;
    color: rgb(27, 27, 27);
}

.lowertext{
    margin-top: 30px;
    color: rgb(27, 27, 27);
}

.clockContainer::before{
    content:"";
    position: relative;
    top: 35px;
    left: -20%;
    width: 140%;
    height: 5px;
    z-index: -1;
    background: rgb(27, 27, 27);
    rotate:0;
    animation: tick 1s ease-in-out infinite;
}

.clockContainer::after{
    content:"";
    position: relative;
    top: -35px;
    left: -20%;
    width: 140%;
    height: 5px;
    z-index: -1;
    background: rgb(27, 27, 27);
    rotate:0;
    animation: tick 1s ease-in-out 0.1s infinite;
}

@keyframes tick{
    from{rotate: 0deg;}
    to{rotate: 180deg;}
}