body { --color-text: whitesmoke; --color-backround: rgb(28, 31, 34); --color-card: #2a2e32; --color-primary: rgb(43, 187, 144); background-color: var(--color-backround); color: var(--color-text); font-size: 1rem; } a { color: var(--color-primary); } h1, h2, h3, h4, h5, h6 { margin: 0 0 10px; } .container { display: block; text-align: center; margin: auto; width: 50%; margin-bottom: 15px; border: 3px; padding: 10px; } .YTtoLBRY { display: flex; justify-content: space-around; flex-direction: row; } .Conversion { margin: 1rem; width: 45em; } .ConversionHelp { display: flex; flex-direction: column; align-items: center; } .ConversionCard { box-shadow: 0 0 0 1px rgba(16,22,26,.1), 0 1px 1px rgba(16,22,26,.2), 0 2px 6px rgba(16,22,26,.2); border-radius: 5px; background-color: var(--color-card); padding: 20px; } .btn { color: var(--color-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 5px 10px; border-radius: 3px; font-size: 14px; min-width: 30px; min-height: 30px; } .btn.btn-primary { background-color: var(--color-primary); } .btn:disabled { background-color: rgba(200, 200, 200, .5); color: rgba(90, 90, 90, .6); cursor: not-allowed; } @media (max-width: 1400px) { .YTtoLBRY { flex-direction: column; } .Conversion { width: auto; } }