/* ------------------ GLOBAL VARIABLES ------------------ */
:root {
  /* ------------------LAYOUT------------------ */
  --base-padding: 20px;
  --base-margin: 10px;

  /* ------------------COLOURS------------------ */
  /* CaoimheJyoti Brand Colours */
  /* Highlights */
  --colour1: #01463c;
  --colour2: #af1b3f;
  --colour3: #ffcc7a;
  --colour4: #9baeb2;
  --colour5: #fffffc;
  /* Neutrals */
  --colour11: #06130f;
  --colour12: #4a5551;
  --colour13: #5c6763;
  --colour14: #95a09c;
  --colour15: #e7f4ee;
  /* inherited colours */
  --text: var(--colour15);

  /* alternate company colours */
  --she-codes-purple: #8246ae;
  --she-codes-orange: #f9a426;

  /* ------------------FONTS------------------ */
  --font-1: "Rock Salt", cursive;
  --font-2: "Josefin Sans", sans-serif;
  --font-3: "Playfair Display", serif;

  --h1: 5.441rem;
}
/* ------------------ END OF GLOBAL VARIABLES ------------------ */

/* ------------------Reset/base CSS code and style guide------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: inherit;
}
body {
  background-color: var(--colour1);
  color: var(--text);
  font-family: var(--font-2);
  font-size: 112.5%;
  font-weight: 400;
  line-height: 1.65;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  display: block;
}
input,
button,
textarea,
select {
  font: inherit;
}
h1 {
  color: var(--colour5);
  font-family: var(--font-2);
  font-size: 3.052rem;
}
h2 {
  font-family: var(--font-2);
  font-size: 2.441rem;
  text-align: center;
}
h3 {
  color: var(--color5);
  font-size: 1.953rem;
}
h4 {
  color: var(--color3);
  font-size: 1.563rem;
}
h5 {
  color: var(--color3);
  font-size: 1.25rem;
}
h6 {
  color: var(--color3);
  font-size: 0.8rem;
}
p {
  padding: 0.6rem 0;
}
.text_small {
  font-size: 0.512rem;
}
a {
  font-family: var(--font-3);
}
.constrained-container {
  padding: 1.6rem;
}
/* ------------------ end of resent/stye guide ------------------ */

/* ------------------ Button Styling ------------------ */
button,
.button {
  padding: 0.8rem;
  background-color: var(--colour3);
  color: var(--colour1);
  border: none;
  border-radius: 0.4rem;
  font-family: var(--font-2);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.button-danger {
  padding: 0.8rem;
  background-color: var(--colour2);
  color: var(--colour5);
  border: none;
  border-radius: 0.4rem;
  font-family: var(--font-2);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.button-success {
  margin-top: 0.6rem;
  padding: 0.8rem;
  background-color: var(--colour1);
  color: var(--colour5);
  border: none;
  border-radius: 0.4rem;
  font-family: var(--font-2);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.button-success:hover {
  border: var(--colour5) solid 0.2rem;
}
.button-download {
  padding: 0.8rem;
  background-color: var(--colour1);
  color: var(--colour5);
  border: none;
  border-radius: 0.4rem;
  font-family: var(--font-2);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.button-download:hover {
  background-color: var(--colour3);
  color: var(--colour1);
}
/* NOTE: look at sorting visited links */
/* .button-download:visited {
  background-color: var(--colour1);
  color: var(--colour3);
} */

.button-project {
  margin-top: 0.6rem;
  padding: 0.8rem;
  background-color: var(--colour3);
  color: var(--colour1);
  border: none;
  border-radius: 0.4rem;
  font-family: var(--font-2);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.button-project:hover {
  background-color: var(--colour1);
  color: var(--colour3);
}
.button-soon {
  margin-top: 0.6rem;
  padding: 0.8rem;
  background-color: var(--colour1);
  color: var(--colour5);
  border: none;
  border-radius: 0.4rem;
  font-family: var(--font-2);
  text-decoration: none;
  cursor: default;
}

/* ------------------ end of buttons ------------------ */

/* ------------------ Header ------------------ */
/* NOTE: look at fixing when scrolled but not at top... */
header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: var(--colour5);
}
header a {
  display: inline-block;
  color: var(--colour1);
  font-size: 1.6rem;
  text-decoration: none;
}
header a:hover,
header a:active,
header a:focus {
  color: var(--colour2);
  font-weight: bold;
  text-decoration: none;
}
#logo {
  margin: 0.6rem;
  height: 8vh;
  border-radius: 50%;
}
/* ---- toggle hamburger menu for nav on larger devices ---- */
.menu {
  display: none;
}
.checkbox {
  display: flex;
  align-items: center;
}
.openmenu {
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  cursor: pointer;
  /* -- hides checkbox -- */
  margin: 10px;
  opacity: 0;
}
/* -- opens menu -- */
.checkbox input[type="checkbox"]:checked ~ .menu {
  margin: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.hamburger-lines {
  margin: 0px;
  padding: 0;
  height: 26px;
  width: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
}
.line {
  height: 4px;
  width: 100%;
  display: block;
  background: var(--colour1);
  border-radius: 10px;
}
/* -- transform hamburger lines -- */
.line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}
.line2 {
  transition: transform 0.2s ease-in-out;
}
.line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}
/* -- change hamburger when checked -- */
.checkbox input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  background: var(--colour1);
  transform: rotate(45deg);
}
.checkbox input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  background: var(--colour1);
  transform: scaleY(0);
}
.checkbox input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  background: var(--colour1);
  transform: rotate(-45deg);
}
/* ------------------ END OF HEADER ------------------ */

/* ------------------ Main ------------------ */
/* ------------------ Hero ------------------ */
#landing-hero {
  margin: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: var(--colour1);
  text-align: center;
}
#landing-hero h1 {
  margin: 0.6em;
}
/* ------------------ end of hero ------------------ */

/* ------------------ About ------------------ */
.about {
  margin: 1.6rem;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--colour5);
  color: var(--colour1);
  border-radius: 0.4rem;
}
.about-text {
  padding: 1.6rem;
}
#about-headshot {
  margin: 1.6rem 0rem;
  border-radius: 50%;
}
#about h3 {
  margin-top: 1.6rem;
}
#about h4 {
  margin-bottom: 0.6rem;
}
.language {
  margin: 0.6rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.lng {
  margin: 0.6rem;
  padding: 0.6rem;
  width: 100px;
  background-color: var(--colour3);
  border-radius: 0.4rem;
}
summary {
  margin: 0.6rem 0 1.6rem 0;
}
details {
  display: contents;
}
.download {
  margin: 0.6rem 0;
}
/* ------------------ end of about ------------------ */

/* ------------------ Projects ------------------ */
.all-projects {
  background-color: var(--colour2);
}
.projects {
  padding: 1.6rem;
  background-color: var(--colour2);
}
.all-project-cards {
  width: 100%;
  margin-bottom: 0.6rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.project-card {
  margin: 1.6rem;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: var(--colour5);
  border-radius: 0.4rem;
}
.project-img {
  width: 250px;
}
/* ------------------ end of projects ------------------ */

/* ------------------ Contact ------------------ */
.contact {
  margin: 1.6rem;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  background-color: var(--colour3);
  color: var(--colour1);
  border-radius: 0.4rem;
}
form {
  padding: 0.6rem 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
input {
  margin-bottom: 0.6rem;
  color: var(--colour1);
}
input:focus {
  background-color: var(--colour4);
}
textarea {
  margin-bottom: 0.6rem;
  color: var(--colour1);
}
textarea:focus {
  background-color: var(--colour4);
}
.mandatory {
  color: var(--colour2);
}

/* ------------------ end of contact ------------------ */
/* ------------------ END OF MAIN ------------------ */

/* ------------------ Footer ------------------ */
footer {
  padding-left: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: var(--colour11);
  color: var(--colour15);
}
#footer-logo {
  height: 5vh;
  display: inline-block;
}
#footer_links {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
footer a {
  padding: 0.6rem;
  color: var(--colour15);
  font-family: var(--font-2);
  text-decoration: none;
}
footer a:hover {
  color: var(--colour3);
}
/* ------------------ End of footer ------------------ */

/* ------------------ PROJECT PAGES ------------------ */
.project-single {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* justify-content: center; */
  background-color: var(--colour2);
}
.project-single h1 {
  margin: 0.6rem 0;
  text-align: center;
  color: var(--colour5);
}
.project-single p {
  margin-bottom: 0.6rem;
}
.project-overview {
  margin: 1.6rem;
  padding: 0.6rem;
  background-color: var(--colour5);
  color: var(--colour1);
  border-radius: 0.4rem;
}
.project-extras {
  background-color: var(--colour1);
  color: var(--color5);
  text-align: center;
}
.project-extras h3 {
  margin: 0.6rem 0.6rem 0 0.6rem;
}
.project-lng {
  padding: 0.6rem;
  margin: 0.6rem;
  width: 100px;
  background-color: var(--colour5);
  border-radius: 0.4rem;
}
.project-languages {
  margin: 1.6rem;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  background-color: var(--colour5);
  color: var(--colour1);
  border-radius: 0.4rem;
}
.project-button-container {
  margin: 0.6rem 0;
  align-self: center;
}
/* ------------------ END OF PROJECT PAGES ------------------ */

/* ------------------ Media Queries ------------------ */
/* ------ query for hamburger menu in desktop ------ */
@media screen and (min-width: 830px) {
  .openmenu {
    display: none;
  }
  nav.menu {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  nav a {
    padding: var(--base-padding);
  }
  .hamburger-lines {
    display: none;
  }
}
/* ------ query for constrained-contianer in desktop ------ */
@media screen and (min-width: 900px) {
  .constrained-container {
    max-width: 870px;
    margin: 1rem auto;
  }
}
/* ------------------ END OF MEDIA QUERIES ------------------ */