/* Apply a flex container to the to center its children */ body { display: flex; justify-content: center; align-items: center; min-height: 100vh; /* Ensure the container takes at least the full viewport height */ margin: 0; font-family: 'Germania One', cursive, Arial, sans-serif; background-color: rgb(12, 60, 12); } .title { font-size: 3em; color: #78e979; text-align: center; } .subtitle { font-size: 2em; color: rgb(92, 188, 100); text-align: center; } h1, h2 { color: #78e979; font-family: 'Germania One', cursive, Arial, sans-serif; text-align: center; } /* Create a two-column layout using flex */ .container { display: flex; align-items: center; max-width: 800px; width: 100%; padding: 20px; box-sizing: border-box; } /* Style the left column for the logo */ .logo { flex: 1; padding: 20px; text-align: center; } /* Center the form in the right column */ .form-container { flex: 2; padding: 20px; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); background-color: rgb(92, 188, 100); font-family: 'Germania One', cursive, Arial, sans-serif; font-size: 1.2em; } /* Add some spacing between form elements */ .form-container > * { margin-bottom: 10px; } label { color: rgb(12, 60, 12); } /* Style form elements */ input, textarea, select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: 'Germania One', cursive, Arial, sans-serif; } input[type="color"] { box-sizing : border-box; vertical-align : top; border : #ccc 1px solid; font-size : 12px; height : 50px; background : #0000; } textarea { resize: vertical; } input[type="submit"] { background-color: rgb(12, 60, 12); color: rgb(255, 222, 89); cursor: pointer; transition: background-color 0.3s ease; } input[type="submit"]:hover { background-color:rgb(92, 188, 100); } a { color:rgb(255, 222, 89); } .list-row { display: none; justify-content: center; align-items: flex-start; padding: 20px; } .list { max-width: 800px; width: 100%; padding: 20px; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); background-color: rgb(143, 20, 31) } .list-item { margin: 5px 0; color: rgb(239, 143, 151); } footer { clear: both; text-align: center; }