@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap%27");

body {
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Hide scrollbar */
}

p {
    display: flex;

    margin: 0;
}

input[type=radio] {
    display: none;
}

main {
    display: block;
    /* Remove flex properties */
    /* justify-content: center;
    align-items: center; */
    /* Remove height: 100vh; */
}

/* panel */
#panel {
    background-color: rgba(255, 255, 255, 1);

    padding: 30px;
    border-radius: 7px;

    display: none;

	text-align: center;
    font-family: "Lato", sans-serif;
}

#title {
    color: white;

    margin: 0;
}

#watermark {
    color: gray;
}

#buttons {
    display: flex;
    justify-content: space-between;

    margin: 15px 0 10px 0;
}

.color-button {
    display: flex;

    padding: 10px;

    cursor: pointer;

    transition: background-color .35s;

    border-radius: 100%;
}

input[type=radio]:checked + .color-button {
    background-color: #2da029;
}

/* status */
#status {
    display: grid;
    grid-row-gap: 0.3em;
    position: absolute;
    /* bottom: 17px;
    left: 304px; */
    min-width: 340px;
    transition: justify-content 1s;
    margin-left: 5px; /* Add a small left margin for spacing */
}

.status-svg {
    width: 40px;
    height: 40px;

    margin-right: 2px;
}

.status-circle1 {
    stroke: #4EE1C8;
    stroke-width: 3;

    transform: rotate(-90deg);
  	transform-origin: 50% 50%;

    transition: stroke-dashoffset .35s;
}

.status-circle2 {
    stroke: #FDED5E;
    stroke-width: 3;

    transform: rotate(-90deg);
  	transform-origin: 50% 50%;

    transition: stroke-dashoffset .35s;
}