body { text-align: center; font-family: Verdana; font-size: 0.75rem; background-color: #ffcd65; } section { width: 60%; margin: 0.5rem auto 0; border: 1.5px solid black; border-radius: 5px; padding: 0.5rem 0 0; background-color: white; } footer { border-radius: 5px; border: 1.5px solid black; width: 60%; margin: 0.5rem auto 0; padding: 0.5rem 0; background-color: rgba(235,235,235,0.9); } #calculation-display { border-radius: 5px; border: 1.5px solid black; width: 55%; margin: 0rem auto 1rem; padding: 0.5rem 1rem; background-color: rgba(235,235,235,0.9); display: none; } form { width: 60%; margin: auto; } fieldset { text-align: left; padding: 1.5rem; border: 1.5px solid black; border-radius: 5px; display: grid; grid-template-columns: 1fr 5fr; grid-gap: 20px; margin: 1rem auto 1rem; } fieldset input, select { width: 80%; } label { text-align: right; } .activity { grid-template-columns: 1fr 9fr; padding: 1.5rem; } .activity legend { font-size: 0.85rem; } .activity label { text-align: left; } .activity input { text-align: right; padding: 0; } .dimension-button { font-weight: bold; background-color: rgba(128,128,128, 0.2); padding: 0.5rem 1rem; margin: 0 0.25rem; font-size: 1rem; border-radius: 5px; border: 1.5px solid black; } .dimension-button:hover { background-color: rgba(224,224,224,0.2); } .button { font-weight: bold; border: 1.5px solid black; border-radius: 5px; background-color: rgba(128,128,128, 0.2); padding: 0.5rem 1rem; margin: 0.5rem 0.5rem 1rem; } .button:hover { background-color: rgba(224,224,224,0.2); } h1 { letter-spacing: 5px; font-size: 2rem; margin: 1rem 0 0; } p { margin: 0.4rem 0 0; font-size: 0.9rem; }