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

:root {
    --primary: #4f43ae;
    --primary-mid: #8177CA;
    --primary-light: #b5b6e4;
    --light: #D9D9D9;
    --mid: #908a99;
    --dark: #211a21;
    --accent: #004800;
}

.orbitron-font {
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
  }

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

body {
    font-family:Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: var(--primary-light);
    color: var(--dark);
    font-size: small;
    font-weight: 500;
}

.time-num {
    color: var(--accent);
}

header {
    padding: 1rem 2rem;
}

fieldset {
    border-color: var(--primary-mid);
    padding: 1rem 0.5rem;
}

#time-calculator, #time-converter {
    margin: 0 1rem;
    padding: 1rem;
    align-self: center;
    width: 90vw;
    max-width: 600px;
    border-color: var(--primary);
}

legend {
    text-align: left;
    font-size: medium;
}

span {
    font-size: larger;
}

input {
    width: 4rem;
    font-size: larger;
    border: none;
    background-color: var(--light);
    color: var(--dark);
}

select, button {
    padding: 0.25rem;
}

#hours-decimal {
    width: 6rem;
}

#page-container {
    position: relative;
    min-height: 100vh;
}
  
#content-container {
    padding-bottom: 2.5rem;    /* Footer height */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.med-size {
    font-size: medium;
}

#more-info, #show-more-info, #close-more-info {
    width: 90vw;
    max-width: 600px;
    margin: 0 auto;
    border: groove 2px var(--primary);
    padding: 1rem;
}

#show-more-info, #close-more-info {
    cursor: pointer;
}

#more-info p {
    text-indent: 2rem;
    padding: 0.25rem 0;
}

h2 {
    font-size: medium;
    text-align: left;
    color: var(--dark);
    border-bottom: solid var(--primary-mid);
}

h3 {
    font-size: 1.5rem;
    margin: 0.5rem 0 0;
}

h4 {
    font-size: 1.1rem;
    margin: 0.5rem 0 0;
}
  
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem;            /* Footer height */
    padding-top: 1rem;
}