/* CSS Document */
/*

Colors:

#5BAFFF - TutorTail Blue
#FFDE59 - TutorTail Tips Yellow
#333333 - Text
#F5F7FA - Background
#4A90E2 - Med. Blue
#002B70 - Dark Blue

Font: Poppins

*/
.source-code-pro-<uniquifier > {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}
.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}
.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}
.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}
.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}
.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}
.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}
.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}
.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}
.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}
.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}
.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}
.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}
html {
  background-color: #F5F7FA;
  font-family: "Poppins", sans-serif;
  color: #333333;
}
#logo img {
  height: 100px;
  object-fit: contain;
}
.nav-links {
  display: flex;
  align-items: flex-end;
}
/* Navbar container */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* <-- stick items to bottom */
  background-color: #F5F7FA;
  font-family: "Poppins", sans-serif;
  padding: 10px 20px;
  position: relative;
}
/* Navbar links */
.navbar a {
  font-size: 16px;
  color: #333333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Dropdown container */
.dropdown {
  position: relative; /* anchor point for dropdown content */
}
/* Dropdown button */
.dropbtn {
  font-size: 16px;
  color: #333333;
  padding: 14px 16px;
  background: inherit;
  border: none;
  cursor: pointer;
  font-family: inherit;
  outline: none;
}
/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%; /* position dropdown directly below button */
  right: 0;
  background-color: #4A90E2;
  width: 175px;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 999; /* sit above everything */
}
/* Links inside dropdown */
.dropdown-content a {
  color: #333333;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: right;
}
/* Hover effects */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: transparent;
  transition: .2s;
  transform: scale(1.08);
  cursor: pointer;
}
.dropdown-content a:hover {
  background-color: #5BAFFF;
  cursor: pointer;
}
/* Show the dropdown when hovering */
.dropdown:hover .dropdown-content {
  display: block;
  cursor: pointer;
}
#navHR {
  border: medium solid #002B70;
  width: 100%;
}
/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/tech-pic-1-2.png");
  /* Set a specific height */
  height: 600px;
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  width: 700px;
}
.hero-image-lessons {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/lessons-hero.png");
  /* Set a specific height */
  height: 600px;
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/* Place text in the middle of the image */
.hero-text-lessons {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  width: 700px;
}
.hero-image-python {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/tech-pic-3.png");
  /* Set a specific height */
  height: 600px;
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/* Place text in the middle of the image */
.hero-text-python {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  width: 700px;
}
.hero-image-it {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/tech-pic-2.png");
  /* Set a specific height */
  height: 600px;
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/* Place text in the middle of the image */
.hero-text-it {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  width: 700px;
}
.hero-image-security {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/tech-pic-4.png");
  /* Set a specific height */
  height: 600px;
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/* Place text in the middle of the image */
.hero-text-security {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  width: 700px;
}
.startLearningBtn {
  color: #000000;
  background-color: #5BAFFF;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 20px;
  border: solid medium #002B70;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.startLearningBtn:hover {
  font-weight: 700;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
  transition: .5s;
  transform: scale(1.2);
  cursor: pointer;
}
.tutortailIntro {
  display: flex;
  width: 600px;
  margin: auto;
  align-items: center;
  color: #333333;
}
#howItWorks {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
}
.flip-box {
  background-color: transparent;
  width: 400px;
  height: 400px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 20px;
}
.flip-box-front {
  background-color: #bbb;
  color: #F5F7FA;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-shadow: 1px 1px 2px #000;
}
.flip-box-back {
  background-color: transparent;
  color: #333333;
  transform: rotateY(180deg);
}
ul {
  list-style-position: inside;
  padding-left: 0;
  margin-left: 2px;
  text-align: left;
}
#flip1 {
  background-image: url("images/topic.png");
}
#flip1back {
  background-image: url("images/topic-back.png");
}
#flip2 {
  background-image: url("images/lessons.png");
}
#flip2back {
  background-image: url("images/lessons-back.png");
}
#flip3 {
  background-image: url("images/test.png");
}
#flip3back {
  background-image: url("images/test-back.png");
}
hr {
  width: 85%;
  border: #333333 solid thin;
}
#homeStart {
  width: 600px;
  margin: auto;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  padding-bottom: 30px;
}
.homeStartGifs {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
}
.homeStartGifs img {
  width: 300px;
  height: auto;
}
#kim-intro {
  height: 400px;
  width: 600px;
}
#lessons {
  padding: 15px;
  width: 900px;
  margin: 30px auto;
  border: thick solid #002B70;
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: row;
  gap: 20px;
}
#comingSoon {
  padding: 15px;
  width: 700px;
  margin: 30px auto;
  border: thick solid #FFDE59;
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.2s;
  width: 40%;
}
.card:hover {
  box-shadow: 0 12px 25px 0 rgba(0, 0, 0, 0.2);
}
.container {
  padding: 2px 16px;
}
.lessons {
  text-decoration: none;
  color: #333333;
}
.lessons:hover {
  color: #4A90E2;
}
.lesson-content, .about-content {
  width: 850px;
  margin: auto;
}
#kim-about {
  display: flex;
  gap: 15px;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 5px;
  font-size: 16px;
}
th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}
th {
  background-color: #f8f8f8;
  font-weight: 800;
  color: #002B70;
  letter-spacing: 3px;
}
tr:hover {
  background-color: #f1f1f1;
}
td:first-child {
  color: #002B70;
}
/* found a tutorial for this*/
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.tooltiptext {
  visibility: hidden;
  width: 160px;
  background-color: #002B70;
  color: #fff;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
a {
  text-decoration: none;
  color: #002B70;
}
a:hover {
  color: #333333;
  transition: .2s;
  transform: scale(1.08);
  cursor: pointer;
}
.quiz-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 20px;
  background: #F5F7FA;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.quiz-container h2 {
  text-align: center;
  margin-bottom: 20px;
}
.quiz-question {
  margin-bottom: 20px;
}
.quiz-question p {
  font-weight: bold;
}
.quiz-option {
  display: block;
  margin: 5px 0;
}
.quiz-submit {
  color: #000000;
  background-color: #5BAFFF;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 16px;
  border: solid medium #002B70;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.quiz-submit:hover {
  color: #000000;
  background-color: #5BAFFF;
  border: solid medium #002B70;
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.3);
  transition: .5s;
  transform: scale(1.1);
  cursor: pointer;
}
#quiz-result {
  margin-top: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
.quiz-reset {
  display: block;
  margin: 10px auto 0;
  padding: 8px 16px;
  background-color: #E5E7EB;
  color: #333333;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.quiz-reset:hover {
  background-color: #A3A3A3;
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.3);
}
#contact-me {
  max-width: 600px;
  margin: 2rem auto;
  padding: 20px;
  background: #F5F7FA;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
#kimTT img {
	border: solid thick rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
footer {
  font-size: 12px;
  background-color: #5BAFFF;
  color: #333333;
}
.kimTT {}