* {
  box-sizing: border-box;
}

html {
  display: flex;
  /* font-family: 'Anonymous Pro', monospace; garage gothic,  bodoni, brandon grotesque*/
  /* font-family: 'Courier New', Courier, monospace; */
  /* font-family: 'Brandon Grotesque'; */
  font-family: 'Anonymous Pro', monospace;
  font-size: 1.5vw;
  float: none;
}

body {
  margin: 0;
}

/*  */
/* HOME PAGE*/
/*  */

#homePage {
  height: 90vh;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e8c14a;
  background-size: cover;
  font-family: 'Montserrat, Calibri';
  /* font-family: 'Anonymous Pro', monospace; */
}

#homePage .title1 {
  font-size: 7vw;
  font-weight: 700;
}
#homePage .title2 {
  font-size: 7vw;
  font-weight: 700;
  margin-top: -1.5vw;
}
#homePage .title3 {
  font-size: 1.55vw;
  font-weight: 700;
  margin-top: 1.3vw;
}

#homePage .help {
  font-size: 2vw;
  transform: translate(-30%, -175%);
}

#homePage .ouch {
  font-size: 2vw;
  transform: translate(75%, 600%) rotate(90deg);
}

#homePage .thisStings {
  font-size: 2vw;
  transform: translate(-40%, 400%);
}

#homePage .honeyImHome {
  font-size: 2vw;
  transform: translate(150%, 250%);
  float: right;
}

/*  */
/* NAVBAR */
/*  */

.navbar {
  background: black;
  display: flex;
  font-size: 12vw;
  justify-content: space-evenly;
  z-index: 1;
  color: #e8c14a;
}

/*  */
/* ABOUT ME */
/* */

#aboutMe {
  color: white;
  height: 100vh;
  background-color: #c0a257;
}

#aboutMe .topAboutMeDiv {
  display: flex;
  height: 100vh;
}

#aboutMe .personalPicture {
  width: 100vh;
}
#aboutMe .personalPicture .aboutMePicture {
  height: 80%;
  width: auto;
  padding-top: 10vh;
  padding-left: 7vh;
}
#aboutMe .aboutMeBlurb {
  float: right;
  font-size: 3vh;
  padding-left: 10vh;
  padding-top: 6vh;
  padding-right: 15vh;
  color: black;
}

.aboutMeBlurb h1 span {
  background-color: black;
  color: #c0a257;
  padding-left: 0.1em;
  font-size: 8vh;
}

#aboutMe .MAliQuote {
  font-style: italic;
  font-weight: bold;
}

#aboutMe .aboutMeIconList {
  float: right;
  flex-direction: column;
  transform: translate(-45%, 20%);
}
#aboutMe .fa-github {
  color: rgb(22, 21, 21);
  padding: 0 10px;
  margin-bottom: 2vh;
}
#aboutMe .fa-linkedin {
  color: rgb(22, 21, 21);
  padding: 0 10px;
  margin-bottom: 2vh;
}
#aboutMe .fa-facebook {
  color: rgb(22, 21, 21);
  padding: 0 10px;
  margin-bottom: 2vh;
}
#aboutMe .fa-medium {
  color: rgb(22, 21, 21);
  padding: 0 10px;
  margin-bottom: 2vh;
}

/*  */
/* PROJECTS */
/*  */

#projects {
  height: auto;
  /* background-color: #722e15; */
  background-color: #e8c14a;
  padding: 0;
  margin: 0;
  width: 100%;
  position: relative;
}

.project-page {
  /* color: white; */

  /* height: auto; */
  /* width: 100vh; */
  /* height: 100vh; */
  /* position: relative; */
}

.project-Title {
  text-align: center;
  margin: 0;
  padding-top: 7vh;
  font-size: 8vh;
  padding-bottom: 3vh;
}

.project-Title span {
  color: #e8c14a;
  background-color: black;
  font-weight: normal;
}

.project-h2 {
  text-align: center;
}

.project-container {
  padding-bottom: 10vh;
}

.single-project {
  display: flex;
  justify-content: space-between;
  height: 40%;
}

.single-project .leftColumn {
  flex-direction: column;

  width: 35%;
  height: 50vh;
  border-width: 4px;
  border-style: solid;
  border-color: black;
  margin-right: 5%;
  margin-left: 10%;
  margin-top: 5vh;
}

.titleOfProject {
  font-size: 5vh;
  text-decoration: underline;
}
.single-project .leftColumn h2 {
  text-align: center;
}
.single-project .leftColumn span {
  background-color: #e8c14a;
}

.single-project .leftColumn p {
  background-color: #e8c14a;
}

.bodyofProject {
  text-align: center;
}

/* .bodyofProject p {
  text-align: center;
  vertical-align: middle;
} */

.projectDescripto {
  width: 85%;
  /* transform: translate(10%); */
  margin-left: 7.5%;
  margin-right: 7.5%;
  /* display:flex */
  /* flex-shrink: 2;*/
  font-size: 2.5vh;
}

.tech {
  font-size: 1.75vh;
  width: 50%;
  transform: translate(50%, 30%);
}

.single-project .rightColumn {
  float: right;
  width: 40%;
  height: 50vh;
  margin-top: 5vh;
  margin-right: 10%;
  border-width: 4px;
  border-style: solid;
  border-color: black;
  background-color: #e8c14a;
}
.single-project hr {
  color: black;
}
.single-project .rightColumn a {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}
.single-project .rightColumn img {
  width: 100%;
  height: 100%;
}

/*  */
/* BLOG */
/*  */

#blog {
  color: black;
  font-style: normal;
  /* background-color: #722e15; */
  background-color: #e8c14a;
  height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
}
.blog-Title {
  text-align: center;
  margin-top: 0;
  padding-top: 7vh;
}

.blog-Title span {
  color: #e8c14a;
  background-color: black;
  font-weight: normal;
  font-size: 7vh;
}

#blog .blogcontainer {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-evenly;
  flex: 0 1;
  flex-flow: row wrap;
  margin-top: 5em;
}

.blogcontainer .card-tiles {
  position: relative;
  overflow: hidden;
  height: 40vh;
  width: 30vw;
  border-radius: 0.15em;
  transition: 0.5s;
  margin: 1em;
  -webkit-text-fill-color: black;
}
.blogcontainer .card-tiles .img-box {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}

.blogcontainer .card-tiles:hover .img-box {
  opacity: 0.5;
}

.blogcontainer .card-tiles .img-box img {
  width: 100%;
}

.blogcontainer .card-tiles .content {
  position: absolute;
  width: 100%;
  height: 60%;
  text-align: center;
  bottom: -100%;
  padding-bottom: 5em;
  box-sizing: border-box;
  transition: 0.3s;
  background: linear-gradient(0deg, #4b4849, transparent);
}

.blogcontainer .card-tiles:hover .content {
  bottom: 0;
}

.blogcontainer .card-tiles .content h2 {
  margin: 0 0 10px;
  /* padding-bottom: 0.5em; */
  transform: translate(0%, -30%);
  font-size: 20px;
}

.blogcontainer .card-tiles .content span {
  font-size: 16px;
}

.blogcontainer .card-tiles .content p {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.fa-medium {
  color: white;
  padding-top: 0.25em;
}

/*  */
/* SKILLS */
/*  */

#skills {
  padding: 0;
  margin: 0;
  color: white;
  background-color: #c0a257;
  height: auto;
  width: 100%;
  /* position: relative; */
}

.skills {
  padding: 0;
  margin: 0;
  /* text-align: center; */
}
.skills h1 span {
  background-color: white;
  padding-left: 0.1em;
  font-size: 7vh;
}

svg {
  height: auto;
  width: 100%;
  /* background-color: blue; */
  /* transform: translate(15%); */
  padding-bottom: 5%;
  padding-top: 5%;
}

.these-skills {
  margin: 0;
  padding: 0;
  float: right;
  transform: translate(-150%, 105%);
}

.hover {
  transform: translate(67%, 280%);
  float: right;
}

.hover2 {
  transform: translate(153%, 800%);
  float: right;
  font-size: 2vh;
}

.link {
  fill: none;
  stroke: #555;
  stroke-opacity: 0.4;
  stroke-width: 4px;
}
text {
  fill: black;
  font-weight: bold;
  font-size: 0.9em;
}

.xAxis .tick text {
  fill: black;
  font-weight: lighter;
  font-size: 0.7em;
}
.grid .tick line {
  stroke: grey;
  stroke-dasharray: 5, 10;
  opacity: 0.7;
}
.grid path {
  stroke-width: 0;
}

.node circle {
  fill: #999;
}
.node--internal circle {
  fill: #555;
}
.node--internal text {
  /* font-family: 'Anonymous Pro', monospace; */
  font-weight: bold;
  font-size: 2vw;
  text-decoration: underline;
}

.tick {
  font-size: 1vw;
}
.node--leaf text {
  fill: #e8c14a;
  /* font-family: 'Anonymous Pro', monospace; */
  font-weight: bold;
}

.the-text {
  font-size: 1.3em;
}
.ballG text {
  fill: white;
}

.shadow {
  -webkit-filter: drop-shadow(-1.5px -1.5px 1.5px #000);
  filter: drop-shadow(-1.5px -1.5px 1.5px #000);
}

.link {
  fill: none;
  stroke: white;
  stroke-opacity: 0.7;
  stroke-width: 3px;
}

.skills {
  width: 100%;
  height: auto;
  color: black;
  padding: 0;
  margin: 0;
}

.skills h3 span {
  margin-left: 20%;
}
/* form */
/*  */
/* CONTACT ME */
/*  */

#contactMe {
  height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
  /* background-color: #c0a257; */
  background-color: #e8c14a;
}
.contactContainer {
  width: 60%;
  margin-left: 20%;
  padding-top: 4vh;
  justify-items: center;
  align-content: center;
}
.contactBlurb {
  transform: translate(23%);
}
.contactBlurb span {
  background-color: white;
  font-size: 8vh;
  padding-left: 0.1em;
}
form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 2;
  margin: 1em;
}

form input {
  padding: 0.3em;
  margin: 0.5em 0;
  font-size: 1.2em;
}
.form form button {
  color: white;
  background-color: #59a9e9;
}

form button:hover {
  background-color: #59a9c2;
}

form button:disabled {
  background-color: #ccc;
}