:root {
    --dark: #333;
    --light: #eee;
    --grey: #888;
    --yellow: #fae420;
    --blue: #0f4372;
    /*From free.wxl.app input*/
    --color-light: #f4f3eff0;
    --color-dark: #212121;
    --color-signal: #0f4372;
    --color-background: #fae420;
    --color-text: var(--color-dark);
    --color-accent: var(--color-signal);
    --size-bezel: .5rem;
    --size-radius: 12px;
    --color-shadow: #313133;

}
.myh2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Verdana, sans-serif;
    font-size: xx-large;
    font-size: xx-large;
    color: var(--yellow);
    text-shadow: -1px -1px #fa1, 2px 3px var(--dark), -2px -1px var(--light);
}
.myh2 > a{
    color: var(--yellow);

}
/*.myh2 > a:hover{*/
/*       transform: translateX(2px);*/
/*}*/
.mybtn {
    font-family: Verdana, sans-serif;
    font-size: x-large;
    background: var(--yellow);
    color: var(--dark);
    border: outset 5px var(--yellow);
    width: 100%;
    padding: 3em;
}

.mybtn:hover {
    border: inset 5px var(--yellow);
    color: var(--light);
    background: var(--dark);
}

body {

    background: var(--yellow);
}

footer {
    text-align: center;     /* Centers text within each flex item */
    /*justify-content: center; !* Centers horizontally *!*/
    /*align-items: center;*/
    /*align-content: center;*/
}

.nyan-text-dark {
    background: linear-gradient(270deg, #6a0dad, #dc143c, #ff4500, #ffa500, #ff69b4, #008080, #0000ff, #4b0082);
    background-size: 400% 400%;
    color: #fff; /* Set text color to white for contrast */
    display: inline-block; /* Allows the gradient to be applied to text */
    font-size: 2rem; /* Adjust font size as needed */
    font-weight: bold;
    -webkit-background-clip: text; /* Clips the background to the text */
    -webkit-text-fill-color: transparent; /* Makes the text fill transparent */
    animation: gradientAnimation 8s ease infinite; /* Animates the gradient */
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Container for Basic Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*body {*/
/*    font-family: Arial, sans-serif;*/
/*    background-color: var(--background-color);*/
/*    color: var(--text-color);*/
/*    line-height: 1.6;*/
/*    padding: 20px;*/
/*    max-width: 950px;*/
/*    margin: 0 auto;*/
/*}*/


/* Simple Utility Classes */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}




.input {
    position: relative;
    display: block;
    margin-top: 12px;
}

.input__label {
    position: absolute;
    left: 0;
    top: 0;
    padding: calc(var(--size-bezel) * 0.75) calc(var(--size-bezel) * .5);
    margin: calc(var(--size-bezel) * 0.75 + 3px) calc(var(--size-bezel) * .5);
    font-family: 'Comic Sans MS', sans-serif; /* Comic Sans font */

    background: pink;
    white-space: nowrap;
    transform: translate(3px, 0);
    transform-origin: 0 0;
    background: var(--color-background);
    transition: transform 120ms ease-in;
    font-weight: bold;
    line-height: 1.2;
    -moz-transform: translate(3px, 0);
    border-radius: calc(2 * var(--size-radius));
}

.input__field {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: 3px solid currentColor;
    padding: calc(var(--size-bezel) * 1.5) var(--size-bezel);
    color: currentColor;
    background: transparent;
    border-radius: var(--size-radius);
}

.input__field:not(:-moz-placeholder-shown) + .input__label {
    transform: translate(0.25rem, -65%) scale(0.8);
    -moz-transform: translate(0.25rem, -65%) scale(0.8);
    color: var(--color-accent);
}

.input__field:not(:-ms-input-placeholder) + .input__label {
    transform: translate(0.25rem, -65%) scale(0.8);
    color: var(--color-accent);
}

.input__field:focus + .input__label,
.input__field:not(:placeholder-shown) + .input__label
    /*.input__field:valid + .input__label*/
{
    transform: translate(0.25rem, -65%) scale(0.8);
    /*-moz-transform: translate(0.25rem, -35%) scale(0.8);*/
    color: var(--color-accent);
}

.input__select_label_fix {
    transform: translate(3px, 0) !important;
    /*transform-origin: 0 0;*/
    /*background: purple;*/

    color: var(--color-text) !important;
}

/*

<label class="input" title="This is the hms/dms j2000 ra/dec from stellarium.">
    <input name="dist" id="dist" class="input__field" type="number" placeholder=" " required>
    <span class="input__label">Distance (Light years)</span>
</label>

*/