/* Mianwei Wang Portfolio - Shared Styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Typography */
    --font-size: 16px;
    --font-family: 'Helvetica Neue';
    --font-weight: bold;
    --letter-spacing: 0.01em;
    --line-height: 1.15;
    
    /* Colors */
    --dynamic-color: rgb(110, 127, 127);
    --background-color: rgb(255, 255, 255);
    
    /* Spacing */
    --padding-base: 20px;
    --margin-small: .5em;
    --margin-base: 1em;
    --margin-large: 2em;
    
    /* Mobile adjustments */
    --mobile-font-size: 14px;
    --mobile-letter-spacing: .03em;
    --mobile-line-height: 1.15;
}

::selection {
    background: var(--dynamic-color);
}

body {
    padding: var(--padding-base);
    min-height: 100dvh;
    min-height: calc(var(--vh, 1vh) * 100);
    background-color: var(--background-color);
    color: var(--dynamic-color);
    font-size: var(--font-size);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
}

/* Typography */
h1, h2, h3, h4, h6 {
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    width: fit-content;
}

h1, h2, h3 {
    margin-bottom: var(--margin-small);
}

h4 {
    margin-bottom: var(--margin-small);
}

small {
    display: block;
    margin: var(--margin-small) 0;
    font-size: .7rem;
    letter-spacing: .04em;
}

/* Links */
a {
    text-decoration: underline;
    color: inherit;
}

a:hover {
    text-decoration: none;
}

/* Forms */
.form-group {
    margin-bottom: var(--margin-base);
}

label {
    display: block;
    margin-bottom: .2em;
    font-size: .85rem;
}

input, textarea {
    width: 100%;
    padding: var(--margin-small);
    border: 1px solid var(--dynamic-color);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: .85rem;
    letter-spacing: inherit;
}

input:focus, textarea:focus {
    outline: none;
    border-width: 2px;
}

/* Buttons */
button {
    background: transparent;
    color: var(--dynamic-color);
    padding: var(--margin-small) var(--margin-base);
    border: 1px solid var(--dynamic-color);
    cursor: pointer;
    margin-right: var(--margin-small);
    margin-bottom: var(--margin-small);
    font-family: inherit;
    font-size: .85rem;
    letter-spacing: inherit;
}

button:hover {
    background: var(--dynamic-color);
    color: var(--background-color);
}

/* Mobile responsive */
@media screen and (max-width: 800px) {
    :root {
        --letter-spacing: var(--mobile-letter-spacing);
        --line-height: var(--mobile-line-height);
        --font-size: var(--mobile-font-size);
    }
}