:root {
  --body-max-width: 800px;
  --background-color: #E2E3E2;

  --font-family: "Microsoft Sans Serif", Geneva, Tahoma, sans-serif;
  --font-size: .8em;

  --box-background-color: #F8F8F8;
  --box-border-color: gray;

  --box-title-background-color: linear-gradient(#7791A2, #5F7F9C);
  --box-title-border: 2px solid rgb(75, 75, 75);
  --box-title-font-family: "Microsoft Sans Serif", Geneva, Tahoma, sans-serif;
  --box-title-font-size: 1em;
  --box-title-font-color: white;

  --h1-font-family: "Microsoft Sans Serif", Geneva, Tahoma, sans-serif;
  --h1-font-size: 1.2em;

  --button-font-family: "DotGothic16", sans-serif;
  --button-font-size: 1em;
  --button-font-weight: normal;
}

* {
  box-sizing: border-box;
}


.border {
  border: 1px solid;
}

.box {
  background-color: var(--box-background-color);
  border: 2px solid var(--box-border-color);
}

.box-title {
  background-image: var(--box-title-background-color);
  font-family: var(--box-title-font-family);
  font-size: var(--box-title-font-size);
  color: var(--box-title-font-color);
  border-bottom: var(--box-title-border);
  padding-left: 4px;
}

.box-container {
  display: grid;
  padding: 8px;
  gap: 8px;
}

h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  font-weight: normal;
  font-style: normal;
  border-bottom: 1px dashed gray;
  padding: 2px;
  margin: 8px 0;
}

.breadcrumb {
  padding-bottom: 4px;
  border-bottom: 1px dashed gray;
}

.container-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.container-rows {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 8px;
}

.flx-shrink {
  flex: 0 1 auto;
}

.flx-expand {
  flex: 1 1 0;
}

button {
  background-image: linear-gradient(to bottom, white, lightgray);
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  border: 1px solid white;
  outline: 2px solid gray;
  outline-offset: 1px;
}

button:hover {
  outline: 3px solid teal;
  cursor: pointer;
}

p {
  margin: 0;
}

a:hover {
  background-color: gray;
  color: white;
}

img {
  width: 100%;
}

body {
  background-color: var(--background-color);
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-style: normal;;
  max-width: var(--body-max-width);
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: 
    "header   header"
    "aside    main"
    "nav      main"
    "footer   footer";
  gap: 8px;

  /* background-color: #F8F8F8;
  background-image: 
    repeating-linear-gradient(0deg, #c0c0c0 0, #c0c0c0 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(0deg, #ebebeb 0, #ebebeb 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, #c0c0c0 0, #c0c0c0 1px, transparent 1px, transparent 24px); 
  background-size: 24px 24px;  */
}

header {
  grid-area: header;
  height: 200px;
  margin-top: 8px;
}

header > img {
  height: 100%;
}

nav {
  grid-area: nav;
}

nav ul {
  display: flex;
  flex-direction: column;
  padding: 0 8px;
  margin: 0 14px;
  gap: 4px;
}


aside {
  grid-area: aside;
  height: 300px;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
  border-top: 2px dashed gray;
}

/* /Home Styles */
.welcome-box p {
  text-align: justify;
}

/* /about Style  */

.about-box {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 8px;
  margin: 0 auto;
}

.about-box .avatar {
  display: grid;
  gap: 8px;
}

.about-box .avatar > img {
  width: 100%;
  height: 260px;
  margin-bottom: 2px;
}