/* __________________________________________________-\ variables & container: ________________________________________________________________________________________________________________________ */

:root {
    /* Colours: */
    --primary-color: #7D8590;
    --secondary-color: #0D1117;
    /* Fonts: */
    --primary-non-serif-font: Helvetica;
    /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
    --primary-monospace-font: 'Courier New', Courier, monospace;
  }

html { 
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: var(--primary-color);
    font-family: var(--primary-non-serif-font);
    color: var(--secondary-color);
    transition: background-color 0.35s ease; /* JS effects */
}

.container {
    font-size: 3rem;
    margin: 0 auto;
    width: 100%;
}

main {
    padding: 1vh 2vw 0 2vw;
}

.text-accent-secondary {
    font-size: 2.5rem;
    font-family: var(--primary-monospace-font);
    font-style: italic;
    /* text-decoration: underline solid #0D1117 2px;
    text-underline-offset: 5px; */
}

.text-symbol {
    font-size: 2.25rem;
    margin: 0 7px 0 3px;
    font-style: normal;
    transition: color 0.35s ease, border-top-color 0.35s ease; /* JS effects */
    /* border: 0.5px solid var(--secondary-color);
    padding: 0 9px 0 9px; */
}

.text-accent-primary {
    font-size: 2.9rem;
    /* transition: color 1s ease; */ /* JS effects */
}

.button {
    padding: 3px 12px 1px 12px; 
    font-size: 2.5rem;
    text-decoration: none;
    color: var(--primary-color);
    background-color: var(--secondary-color);
    /* background-color: #052a1b;  */
    /* background-color: #093624; */
    /* background-color: #052a1b; */
    /* background-color: darkslategray; */
}

.branding {
    border-top: 1px solid var(--secondary-color);
    text-align: right;
    margin-top: 12px;
    padding: 12px 12px 0 0;
    transition: color 0.35s ease, border-top-color 0.35s ease; /* JS effects */
}

/* __________________________________________________-\ RESPONSIVE design: phone: ________________________________________________________________________________________________________________________ */

@media screen and (max-width: 576px) {
    main {
        padding: 3vh 2vw 0 2vw;
      }
    
    .branding {
        font-size: 2.5rem;
    }
}