article[class="settings"] { margin: 100px auto; width: 100%; max-width: 900px; transition: all 0.8s linear; } article[class="settings"] h1 { color: var(--white); } article[class="settings"] label { color: var(--primary); margin-bottom: 10px; display: inline-block; font-weight: bold; } article.settings div.tab-toolbar button { width: 180px; height: 40px; color: var(--secondary); } article.settings section.settings-tabs section.section-tab { width: 100%; min-height: 400px; background: var(--secondary); color: var(--secondary); } .show { display: block; visibility: visible; } .hide { /* REFACTOR: i know, i know, it's just a placeholder*/ display: none !important; visibility: hidden; } section#member-profile { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: auto; gap: 15px; width: 100%; max-width: 900px; margin: 0 auto; border-radius: 3px; } section#member-profile > div:nth-child(1) { grid-column: 1/2; grid-row: 1/2; height: 250px; } section#member-profile > div:nth-child(2) { grid-column: 2/4; grid-row: 1/2; } section#member-profile > div:nth-child(3) { grid-column: 1/2; grid-row: 2/3; padding-left: 10px; } section#member-profile > div:nth-child(4) { grid-column: 2/3; grid-row: 2/3; } section#member-profile > div:nth-child(4) a { font-weight: bold; text-decoration: underline; color: var(--primary-highlight); } section#member-profile > div:nth-child(5) { grid-column: 3/4; grid-row: 2/3; padding-right: 10px; } section#member-profile > div:nth-child(6) { grid-column: 1/4; grid-row: 3/4; padding: 0 10px; } section#member-profile > div:nth-child(6) div { display: inline-block; color: var(--secondary); word-wrap: break-word; vertical-align: top; width: 49.6%; } section#member-profile > div:nth-child(6) div > span { display: block; background: var(--primary); color: var(--secondary); border-radius: 3px; padding: 3px; margin-bottom: 10px; } section#member-profile > div textarea { width: 98.4%; height: 85%; } section#member-profile > div[class="member-avatar"] div, section#member-profile > div[class="site-background"] div { height: 100%; border-radius: 3px; } section#member-profile div input[type="file"] { display: none; visibility: hidden; } section#member-profile div input[type="text"] { width: 98.4%; height: 40px; margin-bottom: 10px; } article[class="settings"] button { width: 100%; text-align: left; height: 50px; margin-bottom: 5px; } article[class="settings"] button > span { font-size: 0.8em; display: inline; top: -10px; position: relative; } section[class="member-settings"] > div[class="features"] button[data-enabled="true"] { color: var(--white); } section[class="member-settings"] > div[class="features"] button[data-enabled="false"] { color: var(--primary); background: var(--secondary); } section[class="member-settings"] > div[class="theme"] button[data-enabled="true"] { color: var(--white); background: var(--secondary-highlight); display: inline-block; border-radius: 3px; padding: 3px; width: 83%; margin-right: 5px; } section[class="member-settings"] > div[class="theme"] a { background: var(--secondary-highlight); display: inline-block; width: 15%; border-radius: 3px; text-align: center; vertical-align: top; top: 13px; position: relative; } section[class="member-settings"] > div[class="theme"] button[data-enabled="false"] { color: var(--primary); background: var(--secondary); display: block; border-radius: 3px; padding: 3px; } section[class="member-settings"] > div[class="mail"] a { margin-right: 3px; color: var(--secondary); display: inline-block; height: 40px; padding: 15px 0 0; border-top: var(--primary) 1px solid; } section[class="member-settings"] > div[class="mail"] a[data-enabled="true"] { color: var(--primary-highlight); font-weight: bold; border-top: var(--secondary-highlight) 1px solid; } section[class="member-settings"] > div[class="mail"] div[data-enabled="false"] { visibility: hidden; display: none; } section[class="member-settings"] > div[class="mail"] input { width: 98.4%; height: 40px; padding-left: 5px; margin-bottom: 10px; } section[class="data-settings"] { color: var(--white); } @media only screen and (max-width: 900px) { main > article[class="settings"] { width: 97%; } } @media only screen and (max-width: 650px) { section[class="member-settings"] div input[type="text"] { width: 99.3%; height: 40px; margin-bottom: 10px; } section[class="member-settings"] { grid-template-columns: 1fr 1fr; } section[class="member-settings"] > div[class="mail"] input { width: 97.7%; height: 40px; padding-left: 5px; margin-bottom: 10px; } section[class="member-settings"] div textarea { height: 80px; width: 99.3%; } section[class="member-settings"] > div:nth-child(1) { grid-column: 1/2; grid-row: 1/3; height: 200px; } section[class="member-settings"] > div:nth-child(2) { grid-column: 2/3; grid-row: 1/3; } section[class="member-settings"] > div:nth-child(3) { grid-column: 1/3; grid-row: 3/5; } section[class="member-settings"] > div:nth-child(4) { grid-column: 1/2; } section[class="member-settings"] > div:nth-child(5) { grid-column: 2/3; } section[class="member-settings"] > div:nth-child(6) { grid-column: 1/2; } section[class="member-settings"] > div:nth-child(7) { grid-column: 2/3; min-height: 325px; } section[class="member-settings"] > div:nth-child(8) { grid-column: 1/3; } } @media only screen and (max-width: 530px) { section[class="member-settings"] > div[class="mail"] input { width: 98.5%; } section[class="member-settings"] { grid-template-columns: 100%; } section[class="member-settings"] div textarea { height: 80px; } section[class="member-settings"] > div:nth-child(1) { grid-row: 1/3; height: 200px; } section[class="member-settings"] > div:nth-child(2) { grid-row: 3/5; grid-column: 1; height: 200px; } section[class="member-settings"] > div:nth-child(3) { grid-column: 1; grid-row: 5/7; } section[class="member-settings"] > div:nth-child(4), section[class="member-settings"] > div:nth-child(5), section[class="member-settings"] > div:nth-child(6), section[class="member-settings"] > div:nth-child(7), section[class="member-settings"] > div:nth-child(8) { grid-column: 1; } }