body {
 margin: 0;
 padding: 0;
 background-color: grey;
 font-family: Arial, Helvetica, sans-serif;
 color: var(--font-color);
 display: block;
}

html {
 margin: 0;
 padding: 0;
}

/* default theme */
:root {
 --theme-black: black;
 --font-color: white;
 --theme-color: rgb(144, 0, 201);
}

:root:has(#green:checked) {
 --theme-color: rgba(0, 128, 0, 0.747);
}

:root:has(#purple:checked) {
 --theme-color: rgb(144, 0, 201);
}

:root:has(#pink:checked) {
 --theme-color: rgba(245, 1, 212, 0.699);
}

:root:has(#blue:checked) {
 --theme-color: rgba(0, 0, 201, 0.753);
}

.light {
 --theme-black: rgba(248, 248, 248, 0.637);
 --font-color: black;
}

.main_body {
 display: block;
 margin: 0;
 padding: 0;
 width: 100%;
 overflow: hidden;
 text-align: center;
 height: calc(100vh - 100px);
}

.main_body img {
 display: block;
 width: 200px;
 margin: 20px auto;
 background-color: rgb(139, 182, 247);
 border-radius: 50%;
 outline: 2px solid rgb(139, 182, 247);
 box-shadow: 5px 5px 5px 0 var(--theme-black);
 position: relative;
 image-rendering: pixelated;
 transform: rotate3d(0, 0, 1, 45deg);
}

header {
 display: block;
 margin: 0;
 padding: 0;
}

.topbot {
 margin: -20px 0;
 padding: 0;
 display: block;
 text-align: center;
 color: whitesmoke;
 width: 100%;
}

.main_body button {
 font-size: 20px;
 padding: 10px;
 margin: 10px;
 background-color: var(--theme-color);
 border-radius: 20px;
 color: white;
}

.main_body button:hover {
 background: linear-gradient(to right, var(--theme-black), var(--theme-color));
}

.themePicker {
 display: block;
 width: fit-content;
 margin-left: 0px;
 padding: 4px;
 border-radius: 0 0 1rem 0;
 background-color: transparent;
 box-shadow: 1px 0px 3px var(--theme-color);
}

.themePicker fieldset {
 display: flex;
 margin: auto;
 flex-direction: row;
 gap: 10px;
 border: 0;
 width: fit-content;
}

.themePicker button {
 appearance: none;
 background-color: transparent;
 width: fit-content;
 border: 0;
 border-radius: 50%;
 padding: 0;
 margin: 0;
 cursor: pointer;
}

.themePicker input[type='radio'] {
 appearance: none;
 width: 15px;
 height: 15px;
 outline: 2px solid var(--radio-border-color);
 background-color: aliceblue;
 outline-offset: 2px;
 border-radius: 50%;
}

/*style each radio input*/
.themePicker input[type='radio']#purple {
 --radio-border-color: #2e029d;
}

.themePicker input[type='radio']#green {
 --radio-border-color: rgba(0, 128, 0, 0.747);
}

.themePicker input[type='radio']#pink {
 --radio-border-color: rgba(245, 1, 212, 0.699);
}

.themePicker input[type='radio']#blue {
 --radio-border-color: rgba(0, 0, 255, 0.753);
}

.themePicker input[type='radio']:checked {
 background-color: var(--theme-color);
}

.themePicker i {
 font-size: 20px;
 color: var(--theme-color);
 padding: 0;
 margin: 0;
}

/* hide theme labels from user, but visible to bots */
.hidden {
 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 height: 1px;
 overflow: hidden;
 position: absolute;
 white-space: nowrap;
 width: 1px;
}

#main-body-img{
    animation: rotateImage 5s infinite linear;
}

@keyframes rotateImage {
    0% {
        transform: rotate3d(0, 0, 1, 45deg);
    }
    100% {
        transform: rotate3d(0, 0, 1, 405deg);
    }
}

@keyframes backgroundBlend {
    0% {
        background-color: grey;
    }

    25% {
        background-color: var(--theme-black);
    }
    50% {
        background-color: var(--theme-color);
    }

    75% {
        background-color: var(--theme-black);
    }

    100% {
        background-color: grey;
    }
}