#outputs {
    display: flex;
    width: 100%;
    align-items: center;
}

#results {
    flex: 3; /* Larger flex value means more space allocated */
    width: 15rem;
}

#eggspace {
    flex: 1; /* Smaller flex value relative to the table */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    max-width: 20%; /* Restrict the maximum width to make the egg image smaller */
    margin-left: auto;
}

#egg_image {
    width: 100%;
    margin: 1px;
    padding-bottom: 140%;
    position: relative;
    overflow: hidden; /* Ensures nothing spills outside the egg shape */
}

#eggwords{
    flex: 1; /* Smaller flex value relative to the table */
    margin-left: auto;
}

#egginesswords_m {
    text-align: center; /* Centers the text within the span */
    padding: 10px; /* Optional, for some spacing inside the text span */
}

#eggwhite {
    margin: auto;
    position: absolute;
    width: 96%;
    height: 96%;
    background: radial-gradient(#ffffff, #e2e2e2);
    border-radius: 50%;
    border: 1px #fce21e solid;
    box-shadow: 0.2px 0.2px 3px rgba(0,0,0,0.1);
    margin-top: 1%;
}

#eggyolk{
    margin-top: 40%;
    margin-left: 20%;
    position: absolute;
    width: 60%;
    height: 50%;
    border-radius: 50%;
    background-color: radial-gradient(#ffa41c, #fff316);
}


@media (max-width: 800px) {
    #results, #eggspace {
        width: 100%; /* Adjust for smaller screens */
    }
}

.eggholder {
    font-family: Arial;
    overflow: hidden;
    font-size: 0.8em;
    margin: 0 auto;
    padding: 0px 0px 0px 0px;
    width: 100%;
    background: white;
}

.page-content { /*modify jekyll style */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.panel{
    border: none;
    padding: 0px;
    margin: 0px;
}

.timer_row{
    display: flex;
    align-items: center;
}

#clockbody {
    background: black;
}

.clock {
    color: #17D4FE;
    font-size: 30px;
    padding-left: 0.9em;
    padding-right: 0.6em;
    font-family: Orbitron;
    background-color: black;
    border-radius: 5%;
    letter-spacing: 3px;
}

.timerbuttons{
    top: 50%;
    margin: 0px 5px 0px 5px;
}

.timerholder{
}

.results{
    font-size: 1.1em;
    padding-bottom: 1px;
}

.results.table tr td{
    margin: auto;
    line-height: 1em;
}

.extra {
    font-size: smaller;
    color: grey;
}

.resultslabelcol{
    width: 10em;
}

/* override some bootstrap settings */
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 4px;
    line-height: 2.1em;
    vertical-align: top;
    border: none;
}

#input_table_m {
    float: left;
    padding: 0px 0px 0px 0px;
    table-layout: fixed;
    white-space: nowrap;
    border-spacing:0 0em;
    }

.buttons {
    padding-top: 1px;
    float: left;
    margin-bottom: 1px;
}

#additional_info{
    width: 100%;
    padding-top: 1em;
    float: left;
}

.timelabel{
    text-align: right;
}

.timetext{
    text-align: left;
    font-style: italic;
}

.inputrow {
    font-size: 0.8em;
    vertical-align: bottom;
}

.labelcol{
    width: 5em;
}
.inputcol{
    width: 2.4em;
}
.unitscol{
    width: 1.4em;
}
.slidercol{
    width: 100%;
}
.sparecol{
    width: 6em;
}

.numericalinput{
    text-align: right;
    margin-bottom: -0.2em;
}

.inputlabel {
    cursor:pointer;
    color: blue;
    text-align: right;
    padding-top: 1.2em;
}

.inputlabel:hover{
    color: purple;
}

a {
    cursor:pointer;
}

.units{
    text-align: left;
}

input[type="text"] {
    padding: 0px;
    font-size: 0.8em;
    min-width: 3.4em;
     width: 100%;
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
     overflow: hidden;
    transition: background-color 3s ease;
    background: white;
}

.dohighlight {
    animation: highlight 1s; /* other keywords like "infinite alternate" can be useful here */
}

@keyframes highlight {
  /* You could think of as "step 1" */
  0% {
    background: red;
  }
  /* You could think of as "step 2" */
  100% {
    background: white;
  }
}

input[type='range'] {
    height:10px;
    width: 100%;
    display: block;
    -webkit-appearance: none;
    -webkit-border-radius: 5px;
    background-image: -webkit-linear-gradient(top, #000000, #333333, #000000);
}

input[type='range'].inactive {
    background-image: -webkit-linear-gradient(top, #e6e9ed, #9aa8ba, #e6e9ed);
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background-image: -webkit-radial-gradient(lightgrey, grey);
    height:20px;
    width:20px;
    -webkit-border-radius: 20px;
}

#log{
    width: 100%;
    background: lightgray;
    float: left;
}

/* pure buttons */

.pure-button {
    display: inline-block;
    font-family: inherit;
    font-size: 100%;
    padding: 1px 9px 1px 9px;
    margin: 1px 0px 1px 0px;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 5px;
}

.pure-button-hover,
.pure-button:hover,
.pure-button:focus {
    /* csslint ignore:start */
    filter: alpha(opacity=90);
    /* csslint ignore:end */
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.pure-button:focus {
    outline: 0;
}
.pure-button-active,
.pure-button:active {
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
    border-color: #000\9;
}

.pure-button[disabled],
.pure-button-disabled,
.pure-button-disabled:hover,
.pure-button-disabled:focus,
.pure-button-disabled:active {
    border: none;
    background-image: none;
    /* csslint ignore:start */
    filter: alpha(opacity=40);
    /* csslint ignore:end */
    opacity: 0.40;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

.pure-button-hidden {
    display: none;
}