body {
  background-color: #332F36;
  color: antiquewhite;
  font-family: Georgia;
}

P {
  color: antiquewhite;
  text-align: justify;
}

a {
  color: thistle;
  text-decoration: none;
}

a:visited {
  color: mediumorchid;
}

a:hover {
  color: mediumpurple;
}

H1 {
  color: HotPink;
  text-align: center;
}

H2 {
  color: HotPink;
}

H3 {
    color: MediumOrchid
}

li {
  text-align: left
}

.box-one {
    width: 75%;
    background-color:  #332F36;
    border: 2px dotted chartreuse;
    padding: 10px;
    margin: 20px;
    text-align: justify
}

button {
  background-color: antiquewhite;
  border: 2px dotted hotpink;
  color: sienna;
}

img {
  max-width: 25%;
  height: auto;
}


.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  background-color: #332F36;
  padding: 10px;
}

.container > div {
  background-color: #332F36;
  border: 2px dotted chartreuse;
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

.item1 /* header*/{
  grid-column: 1 / span 3;
}

.item2 /* sidebar */{
  grid-column:1/span 1;
  position: sticky;
    top: 0px;
}

.item3 /* main page. content */{
  grid-column:2/span 2;
}

.item4 /* footer*/{
  grid-column: 1 / span 3;
}


.w3-bar{
  text-align: center;
}