.wrapper { max-width: 70rem; margin: 2rem auto; padding: 0 1rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2rem; } @media (max-width: 768px) { html { font-size: 87.5%; } .wrapper { grid-template-columns: 1fr; } } .header { padding: 1rem; display: flex; align-items: center; } .header img { height: 2rem; margin-right: 1rem; } .header p { margin-right: 1rem; font-weight: bold; } .homeButton { background: transparent; border: 0; color: var(--gray-400); cursor: pointer; line-height: 0; border-radius: 8px; transition: color 0.1s; } .homeButton:hover { color: var(--ice-cold); } .optionInfo { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; } .form { display: flex; align-items: center; justify-content: center; flex-direction: row; } .form button + button { margin-left: 1rem; } .form button { padding: 0.65rem; border-radius: 8px; width: 3rem; height: 3rem; border: solid 1px; background-color: var(--gray-600); color: var(--white); margin-left: 1rem; transition: color 0.1s; transition: background-color 0.1s; } .form button:disabled { background-color: var(--gray-400); color: var(--black); border: none; border-color: --var(--gray-400); } .form button:enabled:hover { background: var(--green-300); color: var(--white); cursor: pointer; } .form input { font-size: 1.5rem; width: 24vw; padding: 0.75rem; border-radius: 8px; border: none; } .result { flex-direction: row; } .result p { display: inline; font-size: 2rem; } .result .highlight { color: var(--green-300); text-decoration: underline; font-weight: bold; } .foundWordsList { display: flex; flex-direction: column; /* justify-content: center; */ /* text-align: center; */ } .foundWordsList h2 { text-align: center; margin-bottom: 1rem; } .row { display: flex; align-items: center; justify-content: space-between; width: 24vw; border: solid 1px; padding: 0.5rem; } .row span { font-size: 1.25rem; } .row span + span { /* margin-top: 0.5rem; */ }