body {background-color: black;
  font-family: serif;
  text-align: left;
  color: #FF5252; 
  }

a {color: #AD250C}

hr {color: #FF3712; 
  border: 1px solid #FF3712; 
  }
  
p {font-size: 17px;}
  
.menu {background-color: black;
  text-align: left;
  font-size: 20px;
}

.body-section {
  background-image: url("images/bodysection.png");
  background-repeat: no-repeat;
  background-size:100% 100%;
  margin: 3px;
  padding-left: 70px;
  padding-right: 65px;
  padding-top: 8%;
  padding-bottom: 8%;
  width: 80%;
}

.body-section > p {
  font-size: 17px;
}

.half-screen {
  height: 500px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: "left right";
  padding: 5px;
  margin: 3px;
}

.half-screen > div.left {
  height: 100%;
  margin: 3px;
  background-image: url("images/halfscreen.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.left > div {
  height: 450px;
  margin:7%;
  padding: 3px;
  overflow-y: scroll;
  border-radius: 5px;
}

.half-screen > div.right {
  height:100%;
  margin:3px;
  overflow-y: scroll;
  background-image: url("images/halfscreen.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.right > div {
  height: 450px;
  margin:7%;
  padding: 3px;
  overflow-y: scroll;
  border-radius: 5px;
  }

.profile {
  display: grid;
  grid-template-columns: 55% 45%;
  grid-template-areas:
    "pictures text";
  margin:3px;
  border: 3px solid #3F3F3F;
  padding: 5px;
}

.profile > div.pictures {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas:
    "picture picture2"
    "picture3 picture4";
  padding:5px;
  margin: 3px;
  background-color: #121212;
}
  
.profile > div.text {
  padding: 5px;
  margin: 3px;
  background-color: #121212;
}