:root {
  --colorPrimary:   #333;
  --colorSecondary: #888;
  --colorAccent:    #36e;
  --backPrimary:    #fff;
  --backAccent:     #36e;
  --linkBase:       #00f;
  --linkHover:      #fff;
  --linkBackHover:  #36e;
  --borderPrimary:  #ccc;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; max-width: 1200px; width: 100%; margin: 0 auto; font: normal 1rem sans-serif; color: var(--colorPrimary); background-color: var(--backPrimary); }
hbox, .hbox { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
vbox, .vbox { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
a { text-decoration: none; color: var(--colorPrimary); }
a:visited { color: var(--colorPrimary); }
a.link { color: var(--linkBase); border-bottom: 1px dashed #00f; }
a.button { min-width: 150px; margin: 0; padding: 8px 20px; text-align: center; border: none; border-radius: 8px; background-color: var(--backAccent); color: white; cursor: pointer; }
li { list-style: none; }
h1, h2, h3, h4, h5 { font-weight: normal; }
.center { text-align: center; }
hr.spacer { margin: 20px 0; border: none; }

table { width: 100%; }
table thead th { padding: 10px; text-align: left; border-bottom: 2px solid #333; }
table tbody td { padding: 10px; text-align: left; border-bottom: 1px solid #ccc; }
table tfoot th { padding: 10px; text-align: left; }
table tfoot td { padding: 10px; text-align: left; }

header { width: 100%; margin-bottom: 40px; text-align: center; }
footer { margin: 80px 0 20px; text-align: center; }
footer bot { display: block; margin-top: 20px; }
nav { display: flex; justify-content: center; align-items: center; padding: 0; border-top: 1px solid var(--borderPrimary); border-bottom: 1px solid var(--borderPrimary); }
nav a { display: flex; justify-content: center; align-items: center; height: 32px; margin: 10px; padding: 4px 20px; border-radius: 40px; }
nav a:hover { color: var(--linkHover); background-color: var(--linkBackHover); }
nav a img { margin-right: 6px; }
nav a svg { margin-right: 6px; }
nav a:hover svg { fill: #fff; }

user { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; width: 100%; margin-top: 10px; }
region { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 40px; }
region h1 { margin: 0; font-weight: normal; font-size: 3rem; }
region h2 { margin: 5px 0; font-weight: normal; }
region h3 { margin: 5px 0; font-weight: normal; }
avatar { width: 48px; height: 48px; margin-right: 10px; border: none; border-radius: 48px; }
avatar img { width: 48px; height: 48px; }
.logo { margin-bottom: 12px; }

main { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1; width: 100%; margin: 0; }

/*
form { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 80%; padding: 20px; border: 1px solid var(--borderPrimary); border-radius: 12px; }
form li { margin: 20px 0; }
form li label { display: block; }
form li fieldset label { display: inline; }
form li fieldset { border: 1px solid var(--borderPrimary); border-radius: 4px; }
form li input { width: 100%; padding: 6px; font-size: 1.2em; border: 1px solid var(--borderPrimary); border-radius: 4px; }
form li input[type="radio"] { width: auto; padding: 6px; }
form button[type="submit"] { padding: 8px 20px; border: none; border-radius: 8px; background-color: var(--backAccent); color: white; cursor: pointer; }
*/
  form { width: 768px; margin: 40px auto; padding: 2rem; background-color: #fff; box-shadow: 0 4px 6px -1px #00000022, 0 2px 4px -2px #00000022; border-radius: 8px; border: 1px solid #eee; }
  form h2 { margin-bottom: .25rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
  form p { font-size: .875rem; line-height: 1.25rem; color: #6b7280; }
  form label { display: block; margin-top: 1.25rem; margin-bottom: .25rem; font-weight: 500; font-size: .875rem; line-height: 1.25rem; color: #6b7280; }
  form label.accent { color: #2563eb; }
  form input { flex: 1 1 0%; width: 100%; padding: .5rem; font-size: 0.9rem; line-height: 1.25rem; border: 1px solid #d1d5db; border-radius: 6px; }
  form input.hidden { display: none; }
  form input::placeholder, textarea::placeholder { color: #ababc0; }
  form select   { width: 100%; margin: 0; padding: .5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; }
  form textarea { width: 100%; margin: 0; padding: .5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; }
  button { margin: 0.5rem 0; padding: 0.25rem 0.75rem; font-size: .875rem; line-height: 1.25rem; color: #1d4ed8; background-color: #f3f4f6; border: none; border-radius: 4px; cursor: pointer; }
  button:hover { background-color: #dbeafe; }
  button.action { margin: 0; padding: 0.25rem 1rem; font-size: .875rem; line-height: 1.25rem; color: #fff; background-color: #2563eb; border: none; border-radius: 4px; }
  button[type="submit"] { margin: 1rem 0; padding: 0.5rem 1.5rem; }
  div.flexrow { display: flex; gap: 0.5rem; }
  div.dashed  { padding: 1rem; text-align: center; border: 1px dashed #d1d5db; border-radius: 6px; }
  span.underline { border-bottom-width: 1px; border-bottom-style: dashed; }

gallery { width: 100%; }
gallery h1 { font-weight: normal; }

cards { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; width: 100%; height: 250px; }
card  { height: 250px; margin: 0; /*border: 1px solid var(--borderPrimary);*/ }
card h1 { max-width: 200px; height: 3rem; margin: 0; padding: 10px; font-size: 0.8rem; background-color: #335; color: #fff; border-radius: 4px 4px 0 0; }
card img { width: 200px; height: 150px; object-fit: cover; border-radius: 0 0 4px 4px; }

budget { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
panel  { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 40%; padding: 20px; border: none; border-radius: 8px; /*background-color: #33c; color: white;*/ }
/*panel  { background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%); }*/
/*panel  { background: linear-gradient(90deg, #3F2B96 0%, #3F2B96 40%, #88a0ee 100%); }*/
panel h3 { color: var(--colorAccent); }
panel li { width: 100%; padding: 20px; }
panel li:first-child { border-bottom: 1px solid #A8C0FF; }
panel h1, panel h3 { margin: 0; }




/* RESPONSIVE */

@media screen and (max-width: 480px) {
  region img.logo { width: 120px; }
  avatar { width: 32px; height: 32px; }
  avatar img { width: 32px; height: 32px; }
  user name { display: none; }
  footer top img { width: 240px; height: 40px; }
  region h1 { font-size: 1.8rem; }
  region h2 { font-size: 1.2rem; }
  .title { font-size: 1.5rem; }
  nav { justify-content: flex-start; overflow-x: scroll; }
  budget { flex-direction: column; }
  panel  { width: 100%; }
  panel h3 { font-size: 1rem; }
  panel li { text-align: center; }
}