body {
  background: #f8f8ff;
  overflow-x: hidden;
}

/** ------------------------ORDER/HIERARCHY -------------------------------------------*/

.image-card-text {
  font-family: alice;
  font-size: 20px;
  color: #595452;
}

/* about, skills, contact */
#navbar {
  /* border: solid; */
  display: flex;
  right: 10px;
  flex-direction: row;
  margin-left: auto;
  justify-content: flex-end;
  /* margin-top: 20px; */
  padding-bottom: 10px;
  margin-top: 20px;
  margin-right: 50px;
}

#skillsection {
  margin-top: 250px;
  /* border: solid; */
}

/* about, skills, contact each has border */
.navbar-item,
.skill-item {
  font-family: Karla;
  line-height: 20px;
  color: #2c2148;
  padding-top: 8px;
  font-size: 20px;
  margin-right: 20px;
}

.navbar-item {
  margin-left: 10px;
}


.navbar-item a,
.skill-item a {
  text-decoration: none;
  color: black;
}

#lightbulb {
  position: fixed;
  top: 20px !important;
  right: 20px !important;
  font-size: 30px;
  visibility: visible;
  filter: grayscale(0%);
}

/* each large section like skills, edu, etc  */

#expsection {
  border-top: 1px solid #56555b;
  margin-bottom: 90px;
  margin-top: 90px;
}
#edusection {
  border-top: 1px solid #56555b;
  margin-bottom: 90px;
  margin-top: 90px;
}

#projsection {
  border-top: 1px solid #56555b;
  margin-bottom: 90px;
  margin-top: 90px;
}

.title-contact {
  margin-top: 30px;
}

#contactsection {
  margin-top: 90px;
  border-top: 1px solid #56555b;
  margin-bottom: -10px;
}


/** ------------------------COLOR, FONT, STYLISH STYLING (lol) -------------------------------------------*/

.dark-mode {
  background: #292a32;
}

.dark-mode #lightbulb {
  filter: grayscale(100%);
}

.dark-mode .navbar-item,
.dark-mode .skill-item,
.dark-mode .skill-type,
.dark-mode .company,
.dark-mode footer,
.dark-mode .minitext,
.dark-mode .minitext-proj,
.dark-mode .minitext-contact,
.dark-mode .descrip,
.dark-mode .lang,
.dark-mode .git,
.dark-mode .navbar-item a,
.dark-mode .skill-item a,
.dark-mode .aboutMeText,
.dark-mode .aboutMeText a,
.dark-mode .seriously,
.dark-mode .courses-orgs,
.dark-mode .contact-text a,
.dark-mode .contact-text,
.dark-mode .aboutTitle,
.dark-mode .title-skill,
.dark-mode .title-exp,
.dark-mode .title-edu,
.dark-mode .title-proj,
.dark-mode .title-contact,
.dark-mode .skill-name,
.dark-mode .caption,
.dark-mode .hiremeButton a,
.dark-mode .duration {
  color: #e0e7ec;
}


.tech-row1,
.classes,
.courses-orgs,
.contact-text,
.lang,
.git,
.descrip {
  font-family: Karla;
  font-size: 16px;
  /* line-height: 20px; */
  color: #292625;
}

.lang,
.git {
  padding-bottom: 10px;
}

.skill-type {
  padding-top: 10px;
  padding-bottom: 10px;
}

.bigflex-cal {
  margin-left: 470px;
}

.contact-flex {
  font-family: Karla;
  font-size: 18px;
  line-height: 30px;
  color: #2c2148;
  display: flex;
  flex-direction: column;
}

.contact-text {
  font-family: Karla;
  font-size: 14px;
  text-align: center;
  color: #2c2148;
}

#homepage {
  margin-bottom: 40px;
}

#name {
  /* border: solid; */
  font-family: Alice;
  font-size: 275px;
  letter-spacing: -0.1em;
  line-height: 176px;
  color: #85BFCC;
  margin-left: 120px;
  margin-top: 150px;
  z-index: 15;
  position: relative;
}

.title-skill,
.title-exp,
.title-edu,
.title-proj,
.title-contact {
  padding-top: 20px;
  font-family: Alice;
  font-size: 60px;
  color: #595452;
}

.title-skill {
  border-top: 1px solid #56555b;
  text-align: center;
  padding-top: 60px;
}

.title-skill,
.title-exp {
  margin-top: 80px;
  margin-bottom: 10px;
}

.aboutme {
  margin-top: -260px;
  padding-left: 160px;
  margin-bottom: 100px;
  /* border: solid; */

}

.aboutMeText {
  width: 500px;
  margin-bottom: 40px;
}

.aboutMeText,
.aboutMeText a {
  font-size: 15px;
  font-family: Karla;
  color: #292625;
}

.aboutMeText a {
  text-decoration: underline;
}

.aboutMeText:hover a {
  color: #c9c1eb;
}

.profile img {
  width: 100%;
}

.profile {
  /* border: solid; */

  margin-left: auto;
  margin-right: 120px;
  margin-top: -110px;
  z-index: 1;
  position: relative;
  width: 400px;
}

/*--------------------------SKILLS-----------------------------------------------------------------------------------*/

.skill-logo img {
  margin-top: 20px;
  margin-left: 10px;
  width: 100%;
  border-radius: 5%;
  width: 64px;
  height: 64px;
  float: left;
}

.skill-logo {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 300px;
  height: 102px;
  border-radius: 20px;
  border: 1px solid #56555b;
  margin: 10px;
}

.row-skill-flex {
  display: block;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  width: 70%;
  justify-content: space-between;
  /* adjustme where the desription text goes to new line */
}

/* div.skill-logo {
  vertical-align: top;
  display: inline-block;
  text-align: center;
  width: 120px;
} */

.caption {
  /* display: block; */
  padding-top: 15px;
  font-family: Karla;
  font-size: 18px;
  line-height: 70px;
  vertical-align: center;
  /* border: solid; */
}



/*If you're this deep in my code, hire me or refer me. <3*/


.internshipbanner {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* border: 1px solid black; */
  margin-bottom: 20px;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
  width: 38.5em;
  /* the width is for centering the banner */
}

.dark-mode .hiremeButton {
  border: 1px solid white;
  background:rgb(56, 55, 55);
  border-radius: 20px;
}

.dark-mode .hiremeButton a {
  text-decoration: none;
}

.hiremeButton a {
  text-decoration: none;
  color: #000000;
  
}

.dark-mode .hiremeButton:hover {
  background:rgb(77, 69, 69);
  border-radius: 20px;
}

.hiremeButton:hover {
  background:rgb(205, 198, 198);
}

.hiremeButton {
  background:rgb(230, 227, 227);
  width: 120px;
  height: 35px;
  padding-top: 8px;
  border-radius: 20px;
  border: 1px solid #56555b;

  font-family: Karla;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.1em;
  color: #000000;
}

.seriously {
  font-family: alice;
  font-size: 20px;
  line-height: 25px;
  padding-right: 10px;
  color: #000000;
}

/* -----------------------------experience--------------------------------------------------------------------- */
.title-exp,
.bigflex,
.descrip {
  margin-left: 270px;
} /* this margin shifts entire section */

.title-exp {
  margin-bottom: 10px;
}

.logo img {
  width: 100%;
  border-radius: 5%;
}

.nwlogo img {
  width: 64px;
  height: 64px;
  width: 98%;
}

.logo {
  width: 64px;
  height: 64px;
  padding-bottom: 5px;
}

.company {
  font-family: Alice;
  font-size: 25px;
}

.minitext,
.minitext-proj {
  font-family: Alice;
  font-size: 15px;
}

.descrip {
  display: flex;
  flex-direction: row;
  width: 900px;
  /* adjustme where the desription text goes to new line */
  font-family: Karla;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 50px;
}

#expsection {
  margin-bottom: 60px;
}

.bigflex {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  border-bottom: 1px solid #56555b;
  width: 60%;
  /* adjustme where the desription text goes to new line */
}

.miniflex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}

/* -----------------------------education--------------------------------------------------------------------- */

.bigflex-cal {
  /*😎*/
  display: flex;
  flex-direction: row;
  margin-bottom: 40px;
}

.miniflex-cal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}

.title-edu {
  margin-top: 70px;
  text-align: center;
}

.courses-orgs {
  margin-left: 500px;
  line-height: 20px;
}

ul {
  margin: 5px;
}

#edusection {
  margin-bottom: 90px;
}

/* -----------------------------projects--------------------------------------------------------------------- */

.title-proj,
.minitext-proj {
  text-align: right;
  margin-right: 250px;
}

.title-proj {
  padding-top: 30px;
}

.minitext-proj {
  padding-top: 5px;
}

.project-flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 30px;
  border-top: 1px solid #56555b;
  width: 70%;
  margin-left: 200px;
  border-bottom: 1px solid #56555b;
}

.byow,
.pacman,
.numc {
  display: inline-block;
  overflow: hidden;
  margin-right: 40px;
  position: relative;
}

.vid {
  width: 200px;
  overflow: hidden;
  display: block;
  height: 360px;
}

.byow video {
  /* left: 20%; */

  height: auto;
  width: 300%;
  position: absolute;
  /* top: 30%; */
  transform: translate(-20%, -13%);
}

.pacman video {
  height: auto;
  width: 800%;
  position: absolute;
  /* top: 30%; */
  transform: translate(-17%, -16%);
}

.numc,
.pacman,
.byow,
.image-overlay {
  width: 289px;
  height: 384px;
  border-radius: 5px;
}

.numc img {
  width: 100%;
}

.border {
  margin-right: 30px;
  border-left: 1px solid #56555b;
}

.image-overlay {
  position: absolute;
  /* PROBLEM 4: Move the color overlay to cover the image properly */
  top: 0px;
  left: 0px;
  /* PROBLEM 5: What should the opacity be when there is no hover? */
  opacity: 0.5;
  background-color: black;
}

.image-card-text {
  /* PROBLEM 6: Similar to .image-card-cover-overlay, position the card text */
  position: absolute;
  top: 15%;
  left: 10%;

  color: #fbfaff;
}
.image-card-text a {
  text-decoration: none;
  color: #fbfaff;
}

.image-card-text:hover a {
  text-decoration: underline;
  color: #fbfaff;
}

.image-card-description {
  /* PROBLEM 6: Similar to .image-card-cover-overlay, position the card text */
  position: absolute;
  width: 200px;
  top: 25%;
  left: 10%;
  font-family: Karla;
  font-size: 16px;
  line-height: 20px;
  color: #fbfaff;
}

.proj-lang {
  /* PROBLEM 6: Similar to .image-card-cover-overlay, position the card text */
  position: absolute;
  bottom: 2%;
  left: 5%;
  font-family: Karla;
  font-size: 16px;
  line-height: 20px;
  color: #fbfaff;
  border-radius: 14px;
  border: 1px solid white;
  height: 25px;
  padding-top: 4px;
  padding-left: 7px;
  padding-right: 7px;
}

.numc-c,
.numc-python {
  font-family: Karla;
  font-size: 16px;
  line-height: 20px;
  color: #fbfaff;
  border-radius: 14px;
  border: 1px solid white;
  height: 25px;
  padding-top: 4px;
  padding-left: 7px;
  padding-right: 7px;
}

.numc-python {
  position: absolute;
  bottom: 2%;
  left: 15%;
}

.numc-c {
  position: absolute;
  bottom: 2%;
  left: 5%;
}

/* -----------------------------contact--------------------------------------------------------------------- */

.title-contact,
.minitext-contact {
  margin-left: 180px;
}

.minitext-contact {
  font-family: Alice;
  font-size: 30px;
  line-height: 34px;
  letter-spacing: 0.1em;
  color: #595452;
  opacity: 0.45;
  width: 100%;
  margin-bottom: -30px;
}

.icon {
  font-size: 50px;
}

.icon a {
  text-decoration: none;
}

.icon-rowflex {
  display: flex;
  margin-top: 80px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-right: 200px;
}

.contact-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-left: 40px;
}

.contact-item:hover {
  opacity: 0.65;
}

.navbar-item:hover a,
#lightbulb:hover a,
.icon:hover,
.hireButton:hover {
  cursor: pointer;
  color: #5377ee;
}

span:hover {
  cursor: pointer;
}

.contact-text a {
  text-decoration: none;
  color: black;
}

.contact-text:hover a {
  text-decoration: none;
}

footer {
  margin-left: 180px;
}