/*
    Assignment 1 Css – Custom Overrides
    Programmer: Gabriel Hylton
    Explanation:
    The provided stylesheet uses CSS variables for its color system.
    I have redefined the variables at the :root level here overrides the theme everywhere they are referenced.(Scrimba),no class or ID selectors used.
*/

:root{
    --dark:#1b2f33;
    --med:#2f6f73;
    --light: #f6f3ef;
    --accent-dark: #7a1f1f;
    --accent-light: #f1e3e8;
    --shadow: #b5a45a;
}

input[type="email"],
input[type="number"]{
  background-color: var(--accent-light);
  border: none;
  border-bottom: 0.35rem solid var(--med);
  padding: 0.4rem 0.6rem;
}

input:invalid{
  border-bottom-color: var(--accent-dark);
}
input:valid{
  border-bottom-color: var(--med);
}
input:focus,
button:focus{
  outline: 0.25rem solid var(--med);
  outline-offset: 0.15rem;
}

button{
  border: none;
  border-radius: 0.35rem;
  padding: 0.6rem 1rem;
}


/* /* Responsive tablel:The browser can only add a horizontal scrollbar when the table is wider than the available viewport because it is encased 
  in a container with overflow-x: auto and role="region." Configuring Max-width: 100% guarantees that the container never goes beyond the width of the screen.
  In order to maintain readability and enable horizontal scrolling when needed, the table itself is assigned a minimum width to prevent its columns from collapsing or compressing.(“W3Schools.com”) */


div[role="region"]{
  overflow-x: auto;
  max-width: 100%;
}

table{
  min-width: 42rem;
  border-collapse: collapse;
}