/* Hey there! You found the stylesheet. 
See if you can recognize what's happening here. */
* {
  box-sizing: border-box;
}
body {
background-image: url('images/bluegingham.png');
  background-color: #defaf3;
  font-family: monospace;
  color: #28342c;
  font-size: 0.9rem;
  line-height: 150%;
  margin: 0;
  overflow-x: hidden;
  min-height: 56rem;
}
h1, h2, h3 {
  line-height: 110%;
  font-family: "Happy Monkey", system-ui;
}
h2, h3 {
  color: #94a5ea;
}
a {
  text-decoration: underline dotted;
  color: #28342c;
  text-underline-offset: 5px;
}
a:hover {
  text-decoration: none;
  color: #28342c;
}
/* Header */
header {
  padding: 40px;
  text-align: center;
  background: #28342c;
  color:rgb(165, 202, 235);
  height: 200px;
}
/* Top navigation */
.navbar ul {
  list-style-type: none;
  justify-content: center;
  margin: 0;
  padding: 0;
  display: flex;
    background-color: #3c4f40;
    }
.navbar ul li a {
  display: block;
  color:rgb(165, 202, 235);
  padding: 14px 16px;
  text-decoration: none;

}
.navbar ul li a:hover {
  background-color: cornflowerblue;
}

/* Column container */
.container {  
  width: 800px;
  margin:auto;
}

/* Sidebar/left column */
.side {
  flex: 40%;
  background-color: cornflowerblue;
  padding: 40px;
  color:white;
}

/* Main column */
.main {
  flex: 60%;
  background-color: #fff;
  padding: 40px;
}

.profile img{
  width: 100%;
  padding: 10px;
}
/* Footer */
footer {
  color:#ffc5b7;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #28342c;
  padding: 8px;
  text-align: center;
  z-index: 1000;
}
footer a {
  text-decoration: underline dotted;
  text-underline-offset: 5px;
  color:#ffc5b7;
}
footer a:hover {
  text-decoration: none;
  color:#ffc5b7;
}
table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid white;
  padding: 8px;
}
tr:hover {background-color: #94a5ea;}
th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: white;
  color: cornflowerblue;
}
.important {
  background-color: rgb(242, 255, 178);
  padding: 10px 20px;
  margin-bottom: 20px;
}
.profile {
 background-color: rgb(173, 194, 234);
 padding: 20px;
        }
.profile img {
  float: right;
  width: 200px;
}