@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter&family=Titillium+Web&display=swap");

body {
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-padding, 100px);
}

/* NAVBAR STYLES */

.navbar-toggler {
  background-color: white !important;
}
.navbar {
  background-color: black !important;
}

.navbar-nav {
  margin-left: auto;
}

.navbar-brand {
  color: white !important;
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  font-weight: bolder;
  font-size: 1.5rem !important;
}

.nav-item {
  margin-left: 8px;
}

.nav-link {
  color: white !important;
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  font-size: 1.1rem !important;
  position: relative;
}

/* Add an underline that's initially hidden */
.nav-link::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: white;
  transform: scaleX(
    0
  ); /* Initially, set the scale to 0 to hide the underline */
  transform-origin: bottom right;
  transition: transform 0.3s ease; /* Add a smooth transition effect */
}

/* When the nav link is hovered, scale the underline to show it */
.nav-link:hover::after {
  transform: scaleX(1); /* Scale to 1 to show the underline */
  transform-origin: bottom left;
}

/* LANDING PAGE  */

#landingpage {
  height: 100vh;
  width: 100%;
  /* background-color: black; */
  background-position: 50% 20%;
  background-size: 120%;
  background-image: url("./media/toskyline.jpg ");
}

.landingrow {
  padding-top: 9%;
}

.landingpiccont {
}

.landingpagepicture {
  width: 50%;
  border-radius: 100%;
  margin-right: 20%;
}

.landingpagetextcont {
  text-align: left;
}

.landingpagetext1 {
  margin-left: 20%;
  color: white !important;
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  font-weight: bolder;
  font-size: 4rem !important;
}

.landingpagetext2 {
  margin-left: 20%;
  color: white !important;
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  font-weight: bolder;
  font-size: 4rem !important;
}

.linkcontainer {
  margin-left: 20%;
  width: 50%;
}

.fa-github {
  color: white;
  font-size: 3rem;
  margin-right: 2.3rem;
  padding-bottom: 5px;
  position: relative;
}

.fa-github::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: white;
  transform: scaleX(
    0
  ); /* Initially, set the scale to 0 to hide the underline */
  transform-origin: bottom right;
  transition: transform 0.3s ease; /* Add a smooth transition effect */
}

/* When the nav link is hovered, scale the underline to show it */
.fa-github:hover::after {
  transform: scaleX(1); /* Scale to 1 to show the underline */
  transform-origin: bottom left;
}

.fa-linkedin {
  color: white;
  font-size: 3rem;
  position: relative;
}

.fa-linkedin::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: white;
  transform: scaleX(
    0
  ); /* Initially, set the scale to 0 to hide the underline */
  transform-origin: bottom right;
  transition: transform 0.3s ease; /* Add a smooth transition effect */
}

/* When the nav link is hovered, scale the underline to show it */
.fa-linkedin:hover::after {
  transform: scaleX(1); /* Scale to 1 to show the underline */
  transform-origin: bottom left;
}

@media (max-width: 1000px) {
  #landingpage {
    height: auto;
    background-position: center top;
    background-size: cover;
    padding-bottom: 3rem;
  }

  .landingrow {
    flex-direction: column;
    text-align: center;
    padding-top: 15%;
  }

  .landingpagepicture {
    width: 60% !important;
    max-width: 350px;
    margin: 0 auto 1rem auto;
    display: block;
  }

  .landingpagetextcont {
    margin-top: 1rem;
    padding: 0 1.5rem;
    text-align: center;
  }

  .landingpagetext1,
  .landingpagetext2 {
    font-size: 2.5rem !important;
    margin-left: 0;
  }

  .linkcontainer {
    margin: 1.5rem auto 0 auto;
    display: flex;
    justify-content: center;
    gap: 2rem;
    width: auto;
  }

  .fa-github,
  .fa-linkedin {
    font-size: 2.5rem;
    margin-right: 0;
  }
}

/* ABOUT ME */

#aboutme {
  /* height: 100vh; */
  width: 100%;
  background-color: white;
  /*  */
  /* background-image: url("./media/ojopresent.png");
  background-position: 45% 72%;
  background-size: cover;
   */
}

.abtmecont {
  background-color: white;
  /* height: 100vh; */
}

.abtmecont2 {
  background-color: white;
  width: 60%;
  margin-top: 10%;
  margin-bottom: 8%;
}

.abtmepiccont {
  background-image: url("./media/ojopresent.png");
  background-position: 75% 75%;
  background-size: 160%;
}

.highlighted {
  background-color: rgb(217, 222, 241);
  border-radius: 3px;
}

.emphasis {
  font-weight: 600; /* bold */
}

.emphasis-highlighted {
  font-weight: 600; /* bold */
  color: rgb(98, 105, 130);
  background-color: rgb(217, 222, 241);
  border-radius: 3px;
  padding: 1px 0px;
}

.abtmeheading {
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  font-weight: bold;
}

.abtmetext {
  font-family: "Titillium Web", "Inter", sans-serif;
  font-size: 1rem;
}

.abtmeproexptitle {
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  text-decoration: underline;
  font-size: 1.5rem;
}

.abtmehobbiestitle {
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  text-decoration: underline;
  font-size: 1.5rem;
}

.abtmelowertexts {
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
}

/* EXPERIENCE */
#exp {
  height: 100%;
  width: 100%;
  background-color: white;
}
.exptitlecont {
  text-align: center;
  padding: 2%;
  background-color: #232326;
  background-attachment: fixed;
  background-image: url("https://media.blogto.com/articles/20210913-torontoofficebuildings2.jpg?w=2048&cmd=resize_then_crop&height=1365&quality=70");
}
.exptitle {
  text-align: center;
  color: white;
  font-family: "Titillium Web", "Inter", sans-serif;
}

.explogo {
  height: 3rem;
}

.company {
  height: 20%;
}

.expcompany {
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  font-weight: bold;
  font-size: 2.3rem;
  color: black;
}

.column1 {
  width: 3% !important;
}

.exprow {
  padding-bottom: 2%;
}

.expcont {
  padding-top: 3%;
  padding-bottom: 5%;
}

.expdesc {
  margin-left: 1%;
  width: 100%;
  height: max-content;
  border-left: 2px solid black;
  color: black;
}

.expdesctitledate {
  padding-left: 2%;
  color: black;
}

.expjobtitle {
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  font-size: 1.6rem;
  color: black;
}

.expdate {
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  font-size: 0.8rem;
  color: black;
}

/* EDUCATION */

#education {
  height: 100%;
  width: 100%;

  text-align: center;
  justify-content: center;
  background-color: white;
}

.edutitle {
  color: white;
  font-family: "Titillium Web", "Inter", sans-serif;
}

.edutitlediv {
  width: 100%;
  padding: 2%;
  background-attachment: fixed;
  background-size: cover;
  background-image: url("https://www.communications.uwo.ca/img/img-zoom-background/UC_03.png");
  background-color: #232326;
}

.educationentry {
  text-align: left;
  width: 75%;

  margin: auto;
  margin-top: 4%;
  border-radius: 6px;
}

.edudiv {
  border-bottom: solid 3px black;
}

.educationentry h3 {
  color: black;
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  font-size: 1.2rem;
}

.educationentry h1 {
  color: black;
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  font-size: 2rem;
}

.educationentry p {
  color: black;
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
}

.educont {
  padding-bottom: 5%;
}

/* SKILLS */

#skills {
  width: 100%;

  background-color: white;
  text-align: center;
}

.skillstitlediv {
  width: 100%;
  background-color: #232326;
  padding: 3%;
}

.skillstitle {
  color: white;
}

.skillsrow {
  border-bottom: black 2px solid;
  padding-top: 5%;
  padding-bottom: 3%;
}

.skillshead {
  font-size: 2.5rem;
  color: black;
  margin-top: auto;
  margin-bottom: auto;
}

.skillshdiv {
  display: flex;
  justify-content: center;
  align-items: center;
}

.skillstextdiv p {
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  font-size: 1.5rem;
  color: black;
}

.languagediv {
  float: right;
}

/* RESEARCH */

#research {
  /* height: 50vh; */
  width: 100%;

  background-color: white;
  /* text-align: center;
  justify-content: center; */
}

.resdiv {
  width: 100%;
  background-size: cover;
  /* background-attachment: fixed;
  background-image: url("https://c4.wallpaperflare.com/wallpaper/767/594/322/books-library-bokeh-depth-of-field-wallpaper-preview.jpg"); */
  padding: 3%;
  background-color: #232326;
}

.restitle {
  color: white;
  text-align: center;
}

/* LEADERSHIP */

#leadership {
  height: 100%;
  width: 100vw;

  background-color: white;
  /* background: linear-gradient(45deg, #000 25%, transparent 25%) 0 0/20px 20px,
    linear-gradient(45deg, transparent 75%, #000 75%) 0 0/20px 20px, #fff; Adjust the color and size of the squares as needed */
}

.leadershiptitlecontainer {
  /* background-image: url(./media/ojoleader.jpeg);
  background-size: cover;
  background-position: 50% 17%; */
  /* backdrop-filter: blur(20px); Adjust the blur value as needed */
  width: 100%;
  padding: 3%;
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: #232326;
}
.leadershipTitle {
  color: white;
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  font-size: 3rem;
}
.leadcontainer {
  /* margin-top: 1%; */
  /* padding-bottom: 2%; */
}

.leadershipentry {
  /* background-color: rgb(229, 241, 255); */
  padding: 5%;
  border: 5px solid rgb(217, 222, 241);;
}

.leadershipdate {
  /* color: white; */
  font-size: 1.2rem;
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
}

.leadershiprole {
  /* color: white; */
  font-size: 1.4rem;
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
}

.leadershipdesc {
  /* color: white; */
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
}

.leadershippic {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: aliceblue;
  padding: 0px !important;
  border: 5px solid rgb(98, 105, 130);;
}

.leadership-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* PROJECTS */

#projects {
  height: 100%;
  width: 100vw;

  background-color: white;
}

.projecttitle {
  color: white;
  padding: 3%;
}

.projecttitlediv {
  width: 100%;
  background-color: #232326;
}

.pcont {
  margin-top: 6%;
  /* background-color: rgba(235, 239, 243, 1); */
  margin-bottom: 10%;
}

.prow {
  padding: 1%;
}

.projectcont {
  padding: 15px;
}

.projectcontinner {
  padding: 3%;
  background-color: rgba(185, 223, 255, 0.139);
  border-radius: 5px;
  border: black 2px solid;
}

.projectcontinner h2 {
  padding-top: 6%;
}

.projectcont img {
  width: 100%;
}

.projectgithub {
  color: black;
  margin: 0;
  padding-top: 2%;
}

.projectgithub::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: black;
  transform: scaleX(
    0
  ); /* Initially, set the scale to 0 to hide the underline */
  transform-origin: bottom right;
  transition: transform 0.3s ease; /* Add a smooth transition effect */
}

/* When the nav link is hovered, scale the underline to show it */
.projectgithub:hover::after {
  transform: scaleX(1); /* Scale to 1 to show the underline */
  transform-origin: bottom left;
}

.linkrow {
  background-color: #f4f4f4;
  width: 90%;
  margin: auto !important;
}

.projectlinkscont {
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

.projectlinkscontdemo {
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
  border-right: grey 2px solid;
}

.projectlinksa {
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
}

.projectcontinner {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.projectcontinner:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.project-tag {
  background: #f1f1f1;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  margin-right: 5px;
  display: inline-block;
}
.featured-project {
  background: #fdfdfd;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  align-items: center;
}
.featured-img {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
}
.featured-text {
  flex-grow: 1;
}
.featured-title {
  font-weight: 600;
  margin-top: 12px;
}
@media (max-width: 768px) {
  .featured-project {
    flex-direction: column;
    text-align: center;
  }
  .featured-text {
    margin-top: 1rem;
  }
}

/* Contact Footer*/

#footer {
  width: 100%;
  height: max-content;
  background-color: black;
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
}

.contactgithub {
  font-size: 4rem;
  color: white;
  margin-left: 2%;
  transition: none;
}

.contactlinkedin {
  color: white;
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
}

.linkcontainer {
  padding: 12px 0 12px 0;
}

.contactemail {
  color: white;
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
  font-family: "Inter", sans-serif;
  font-family: "Titillium Web", sans-serif;
}