*, 
*::before,
*::after {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
  }

:root {
    /*Base Website Colors*/
    --base-color: #fde0f9;
    --base-cool: #ebe8ff;
    --base-border: #070799;

    --gradient: linear-gradient( #bbb0f5, #f3baeb);
    background: var(--base-color);

}
 /*Darkmode Varient*/
.darkmode {
    --base-color: var(--gradient);
    --base-cool: #0c0811;
    --base-border: #dbd8f1f3;

    /*Gradient*/
    --gradient: linear-gradient( #110c29c2, #6627cc5b);
}

/*B O X*/

.cardbox {
    position: absolute;
}

.cardbg {
    border: 2px solid var(--base-border);
    border-radius: 5px;
    background: var(--base-cool);
    color: var(--base-border);
    
    padding-top: 10px;

    display: flex;
}

header {
    width: 4rem;
    background: transparent;
    padding-left: 1rem;
    font-weight: bolder;

}

/*Spinny Flowers*/

.floflare {
    width: 2rem;
    right: 1rem;
    bottom: 25.3rem;
    background: transparent;

    font-size: 40px;
    color: var(--base-border);
    animation: rotate-ccw infinite 17s;

}

        @keyframes rotate-ccw {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(-360deg);
        }
    }

        .rotate-ccw {
            animation: rotate-ccw infinite linear 17s;
        }

    #reverse {
        animation: rotate-cw infinite 17s;
    }

        @keyframes rotate-cw {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(360deg);
        }
    }

            .rotate-cw {
            animation: rotate-cw infinite linear 17s;
        }


/*Main Page Style*/
.mainstyle {
    padding: 1rem 1rem 1rem 1rem;

    background: var(--gradient);

    border: 5px double var(--base-border);
    border-radius: 5px;

    text-align: center;

}


a {
    background: var(--base-cool);
    border: .1px solid;
    padding: .6em;
    border-radius: 1rem;
    gap: 10%;


}

        a:link, a:visited {
        text-decoration: none;
        color: var(--base-border);
    }

        a:hover, 
        :focus {
        color: red;
        text-decoration: underline;
    }

footer {
    text-align: center;
    font-size: smaller;
    color: var(--base-border);
}

.flotoggle {
    font-size: 70px;
    color: var(--base-border);
    background: none;

    border: none;
    border-radius: 100%;

    position: absolute;
    left: 10rem;
/*
    cursor: pointer; */
}