/*
COLOR PALETTE
https://coolors.co/01161e-fffffc-beb7a4-ff7f11-34623f
#01161E - Rich Black FOGRA 29
#FFFFFC - Baby Powder
#BEB7A4 - Khaki Web
#0058C0 - Sapphire
#FF7F11 - Amber SAE ECE
#34623F - Hunter Green
*/

/*
COLOR PALETTE ALT
https://coolors.co/01161e-fffffc-beb7a4-ff7f11-34623f
#30343F - Gunmetal
#4A4D57 - Dark Liver
#C8C9CF - Silver Sand
#FAFAFF - Ghost White
#E4D9FF - Lavender Blue
#FB3640 - Red Salsa
#E56399 - China Pink
*/

/*
BU COLOR PALETTE
https://teamcolorcodes.com/boston-university-terriers-colors/
#CC0000 - RED
#A3011B - DARK RED
#231F20 - DARK GREY
#929497 - GREY
#E6E6E7 - LIGHT GREY
#FFFFFF - WHITE
*/

/*
CLU COLOR PALETTE
https://color.adobe.com/Cal-Lutheran-Colors-color-theme-6524619/
#3B2360 - Purple
#6A4C92 - Plum
#FFC222 - Gold
#FFD589 - Light Yellow
#7C7B7C - Light Grey
*/

/* Global Styles
---------------------------------------*/
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  color: #01161e;
  background-color: #30343f;
  margin: 0;
  padding: 0;
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  line-height: 1.5;
}
img {
  width: 300px;
}
a {
  color: #01161e;
}
a:hover {
  text-decoration: none;
}
h1 {
  font-size: 90px;
}
h2 {
  font-size: 50px;
}
h1,
h2 {
  font-family: "Staatliches", cursive;
  font-weight: 500;
  margin: 0;
}
.content-wrap {
  max-width: 800px;
  width: 85%;
  margin: 0 auto;
  padding: 60px 0;
}
h3 {
  margin-bottom: 0;
}
.item-details h3 + p {
  font-style: italic;
}
.item-details h3 ~ p {
  margin: 0;
}
.divider > section {
  border-bottom: 1px dashed #4a4d57;
  padding: 25px 0;
}
.divider > section:last-of-type {
  border-bottom: none;
}

/* Profile
---------------------------------------*/
header {
  background-image: url(./images/fernando-hernandez-JdoofvUDUwc-unsplash.jpeg);
  background-size: cover;
  background-position: center;
  padding: 10px;
  margin: 0;
}
.head-text {
  color: #fffffc;
  display: block;
  text-decoration: wavy;
  text-shadow: 0 0 25px #080808, 0 0 25px #080808;
}
.menu {
  display: flex;
  justify-content: center;
  color: #fffffc;
  text-decoration: wavy;
  text-shadow: 0 0 25px #080808, 0 0 25px #080808;
}
li,
ul {
  list-style: none;
}
#mainMenu li {
  color: #fffffc;
  display: inline-block;
  width: 125px;
  height: 18px;
  float: none;
  margin-left: 0;
  border: 5px transparent #4a4d57;
}
#mainMenu a {
  color: #fffffc;
}

/* Projects
---------------------------------------*/
.projects {
  color: #080808;
  background-image: url(./images/hans-eiskonen-wn57cSQ7VzI-unsplash.jpeg);
  background-size: cover;
  background-position: 70% 75%;
  background-color: #c8c9cf;
  padding: 10px;
  margin: 0;
}
.btn-git {
  color: #fffffc;
  background: #fb3640;
  text-decoration: none;
  padding: 8px;
  border-radius: 4px;
  display: inline-block;
}
.projects .btn {
  color: #fffffc;
  background: #fb3640;
  text-decoration: none;
  padding: 8px;
  border-radius: 4px;
  display: inline-block;
  float: left;
}
.projects .btn:hover {
  background: rgb(251, 54, 64, 80%);
}
.project-item {
  height: 400px;
  color: #080808;
  overflow: scroll;
  margin: 50px;
  padding: 25px;
}
.project-item h3 p {
  float: right;
  width: 50%;
}
.project-item h3 {
  margin-top: 0;
  font-weight: bold;
}
.project-item p {
  height: 75%;
  text-overflow: ellipsis;
}
img {
  border: 2.5px solid rgb(8,8,8,0.25);
  border-radius: 5px;
}

/* Work Experience
---------------------------------------*/
.work-experience {
  color: #fffffc;
  background-image: url(./images/zane-lee-LvVw6wRmGAM-unsplash.jpeg);
  background-size: cover;
  background-position: top left;
  text-decoration: wavy;
  text-shadow: 0 0 25px #080808, 0 0 25px #080808;
  padding: 10px;
  margin: 0;
}
.work-experience h3 {
  text-shadow: 0 0 25px #080808, 0 0 25px #080808;
}
.job-item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 20px;
  background-image: url(./images/kelly-sikkema-crKv6Ic3Mh0-unsplash.jpeg);
  background-size: 100%;
  background-position: top left;
  color: #fffffc;
  background-color: #e6e6e7;
  border-radius: 20px;
  padding: 10px;
  text-shadow: none;
}
.job-details {
  padding-left: 25px;
  padding-bottom: 35px;
}
.job-summary {
  display: block;
  margin: 10px;
  text-shadow: 0 0 3px #080808, 0 0 5px #080808;
}
.work-list {
  list-style-type: circle;
}
.resume {
  display: flex;
  justify-content: center;
}
/* Education & Certifications
---------------------------------------*/
.education {
  color: #fffffc;
  text-shadow: 0 0 25px #080808, 0 0 25px #080808;
  background-image: url(./images/anjana-menon-v3UZKbMaTGk-unsplash.jpeg);
  background-size: cover;
  background-position: top right;
  padding-bottom: 100px;
}
.education p {
  width: 80%;
}
.odin {
  color: #fafaff;
  background-color: #01161E;
  border-style: double;
  border-width: 10px;
  border-radius: 4px;
  border-color: ##34623F;
  padding: 10px;
  margin: 10px;
}
.bu {
  color: #080808;
  background-color: #e6e6e7;
  border-style: double;
  border-width: 10px;
  border-radius: 4px;
  border-color: #a3011b;
  padding: 10px;
  margin: 10px;
}
.clu {
  color: #fafaff;
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
  background-color: #3b2360;
  border-style: double;
  border-width: 10px;
  border-radius: 4px;
  border-color: #ffc222;
  padding: 10px;
  margin: 10px;
}

/* Contact Info
---------------------------------------*/
footer {
  color: #fffffc;
  text-shadow: 0 0 25px #080808, 0 0 25px #080808;
  background-image: url(./images/fernando-hernandez-JdoofvUDUwc-unsplash.jpeg);
  background-size: cover;
  background-position: center;
  border-radius: 0;
  padding: 10px;
  margin: 0;
}
.contact-list {
  list-style-type: none;
  padding: 0;
}
.contact-list a {
  color: #fffffc;
  padding: 15px;
  display: inline-block;
}

/* Responsive
---------------------------------------*/
@media screen and (min-width: 750px) {
  header,
  footer {
    text-align: center;
  }
  .project-item img {
    float: left;
    margin-right: 20px;
  }
  .job-item {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 20px;
  }
  .contact-list {
    display: flex;
    justify-content: center;
  }
}

@media screen and (max-width: 749px) {
  h1 {
    font-size: 75px;
    line-height: 0.9;
    margin-bottom: 20px;
  }
  h2 {
    line-height: 1;
  }
  .contact-list a {
    padding: 5px;
  }
}