/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #D1C2A6;
  font-family: Georgia, monospace;
  text-align:center;
}

/* Headers */

.header-homepage {
  border: 5px solid black;
  text-align: center;
  margin: -5px auto;
  font-size: 25px;
  color: #E4D9AB;
  background-color: #957138;
  border-color: #7B552D;
  height: 200px;
  width: 750px;
  border-radius: 30px;
}

.header-directory {
  border: 5px solid black;
  text-align: center;
  margin: 20px 22%;
  font-size: 25px;
  color: #E4D9AB;
  height: 100px;
  border-radius: 30px;
  width: 1050px;
}

.header-about-me {
  background-color: #77442C;
  border-color: #5B3522;
}

.about-me-navigator {
  border: 5px solid black;
  text-align: center;
  margin: 30px 15px 0px 250px;
  font-size: 25px;
  color: #E4D9AB;
  float: left;
  width: 200px;
  border-radius: 30px;
  background-color: #77442C;
  border-color: #5B3522;
  height: 475px;
  padding: 225px 0px 0px 0px;
}

.about-me-content {
  border: 5px solid black;
  text-align: center;
  margin: 30px 20px;
  font-size: 25px;
  color: #E4D9AB;
  float: left;
  width: 1100px;
  border-radius: 30px;
  background-color: #77442C;
  border-color: #5B3522;
  height: 700px;
}

.header-my-portfolio {
  background-color: #43533E;
  border-color: #31422B;
}

.header-contacts {
  background-color: #735380;
  border-color: #4D3E53;
}

.header-credits {
  background-color: #546CA0;
  border-color: #30446F;
}

.body-my-portfolio {
  border: 5px solid black;
  text-align: center;
  margin: 30px auto;
  font-size: 25px;
  color: #E4D9AB;
  width: 1450px;
  border-radius: 30px;
  background-color: #43533E;
  border-color: #31422B;
}

.button-my-portfolio-projects {
  background-color: transparent;
  border-radius: 30px;
  border: 0px;
  font-family: monaco, monospace;
  font-size: 23px;
  cursor: pointer;
  margin: 20px 20px;
  color: #E4D9AB;
  transition: 0.3s;
}

.button-my-portfolio-projects:hover {
  background-color: #31422B;
}

.body-contacts {
  border: 5px solid black;
  margin: 30px auto;
  font-size: 25px;
  color: #E4D9AB;
  width: 1250px;
  border-radius: 30px;
  background-color: #735380;
  border-color: #4D3E53;
  text-align: left;
  padding: 0px 50px;
}

.body-credits {
  border: 5px solid black;
  margin: 30px auto;
  font-size: 25px;
  color: #E4D9AB;
  width: 1250px;
  border-radius: 30px;
  background-color: #546CA0;
  border-color: #30446F;
  text-align: left;
  padding: 0px 50px;
}

.link-contacts {
  color: #E4D9AB;
}

/* Project Entries */

.game-title {
  border: 5px solid black;
  text-align: center;
  margin: 20px auto;
  padding: 0px 20px;
  font-size: 30px;
  color: #c6b772;
  width: 1100px;
  height: 100px;
  border-radius: 30px;
  background-color: #43533E;
  border-color: #31422B;
}

.game-left-column {
  float: left;
  width: 45%;
}

.game-right-column {
  float: left;
  width: 55%;
}

.game-left-column-box {
  border: 5px solid black;
  text-align: center;
  padding: 10px 20px;
  margin: 20px 250px;
  font-size: 20px;
  color: #c6b772;
  width: 500px;
  border-radius: 30px;
  background-color: #43533E;
  border-color: #31422B;
}

.game-right-column-box {
  border: 5px solid black;
  text-align: center;
  padding: 10px 20px;
  margin: 20px 0px;
  font-size: 20px;
  color: #c6b772;
  width: 750px;
  border-radius: 30px;
  background-color: #43533E;
  border-color: #31422B;
}

.left-align {
 text-align:left;
 color:#f1e8c0;
}

.left-align2 {
 margin: 50px;
 text-align:left;
 color:#f1e8c0;
}

.center {
 text-align:center; 
}

.bold-color {
  color: #c6b772;
}

.game-link-button-left {
  border: 5px solid black;
  text-align: center;
  padding: 10px 20px;
  margin: 20px 350px;
  font-size: 20px;
  color: #c6b772;
  width: 350px;
  border-radius: 30px;
  background-color: #735380;
  border-color: #4D3E53;
  cursor: pointer;
}

.game-link-button-right {
  border: 5px solid black;
  text-align: center;
  padding: 10px 20px;
  margin: -450px 250px;
  font-size: 20px;
  color: #c6b772;
  width: 350px;
  border-radius: 30px;
  background-color: #735380;
  border-color: #4D3E53;
  cursor: pointer;
}


.game-link-button:hover {
  color: #f1e8c0;
}

/* Back Button*/

.back-button {
  border: 3px solid black;
  width:70px;
  height:70px;
  border-radius: 30px;
  float: right;
  margin: -90px 105%;
}

.back-button-about-me {
  background-color: #895A44;
  border-color: #311F15;
}

.back-button-portfolio {
  background-color: #586D51;
  border-color: #31422B;
}

.back-button-contacts {
  background-color: #805B8E;
  border-color: #302734;
}

.back-button-credits {
 background-color: #8BA1D1;
 border-color: #303A50;
}


/* Buttons */

.directory-button {
  border: 5px solid black;
  color: white;
  padding: 5px 5px;
  border-radius: 30px;
  height: 100px;
  width: 250px;
  text-align: center;
  text-decoration: none;
  font-size: 23px;
  margin: 15px 15px;
  cursor: pointer;
  font-family: Georgia, monospace;
  transition: 0.3s;
}

.directory-button:hover {
  height: 125px;
  width: 300px;
  font-size: 25px;
  color: #E4D9AB;
}

.about-me-button {
  background-color: #77442C;
  border-color: #5B3522;
}

.about-me-button:hover {
  height: 125px;
  width: 300px;
  font-size: 25px;
}

.my-portfolio-button {
  background-color: #43533E;
  border-color: #31422B;
}

.my-portfolio-button:hover {
  height: 125px;
  width: 300px;
  font-size: 25px;
}

.contacts-button {
  background-color: #735380;
  border-color: #4D3E53;
}

.contacts-button:hover {
  height: 125px;
  width: 300px;
  font-size: 25px;
}

.credits-button {
  background-color: #546CA0;
  border-color: #30446F;
}

.credits-button:hover {
  height: 220px;
  width: 220px;
  font-size: 25px;
}

/* Main Page */

.main-page-left-column {
  float: left;
  width: 45%;
  margin: 250px 0px 0px 0px;
}

.main-page-right-column {
  float: left;
  width: 55%;
}

.back-font {
  color: #D1C2A6;
  margin: -15px;
  font-size:30px;
}


/* Misc */

experiences-headline {
  font-family: Georgia;
}

experiences-date {
  font-family: Georgia;
}