/*
Theme Name: Adam
Theme URI: https://adamvalerio.com
Text Domain: Adam Valerio
Version: 1.0
Description: Adams portfolio website May 2024
Tags: UX researcher
Author: Amy Yuki Vickers
Author URI: https://amyyuki.com
*/

*{
    margin: 0px;
    padding: 0px;
 }

@font-face {
  font-family: Roboto;
  src: url(fonts/roboto/roboto/Roboto-Medium.ttf);
}

@font-face {
  font-family: Roboto;
  src: url(fonts/roboto/roboto/Roboto-Bold.ttf);
  font-weight: bold;
}

@font-face {
  font-family: librefranklin;
  src: url(fonts/librefranklin/librefranklin/static/LibreFranklin-Medium.ttf);
}

@font-face {
  font-family: librefranklin;
  src: url(fonts/librefranklin/librefranklin/static/LibreFranklin-Bold.ttf);
  font-weight: bold;
}

html, body{
  font-family: librefranklin, Franklin Gothic Medium, Arial;
  color: #000000;
}

.hamburger-menu, .sidebar {
  display: none;
}

h1 {
  color:rgb(0, 0, 0);
  font-size:2.5rem;
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  margin-top:0px;
  text-align:left;
}

h2 {
  color:rgb(116, 116, 116);
  font-size:1.25rem;
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  margin-top:10px;
  text-align:left;
}

#page-container {
  position: relative;
  min-height: 100vh;
  margin-top: 0px;
  z-index: 1;
  /* border:#e415b4 solid 1px; */
}

#content-container {
  padding-top: 50px;
  margin-right: 10%;
  margin-left: 10%;
  /* border:#20ff2b solid 2px; */
}


/* Testimonials Page */


#text_container {
  margin-top: 100px;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
  /* border:#20ff2b solid 2px; */
}

.quote {
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  font-size: 1.25rem;
  text-indent: -.49rem;
}

.name {
  margin-top: 20px;
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  font-size: 1rem;
}

.title {
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  font-size: 1rem;
  color: #777777;
}

.space {
  margin-top: 75px;
  margin-bottom: 75px;
}

/* End Testimonials Page */

#header_area {
  display: grid;
  grid-template-columns: auto 1fr;
  /* border:#000000 solid 1px; */
}

#house {
  justify-self: start; /* house icon */
}

#linkedin {
  padding: 20px;
}


#menu {
  justify-self: end;
}

  .header_text { 
  color:rgb(0, 0, 0);
  font-size:2rem;
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  margin-top:50px;
  text-align:center;
}

/* ABOUT PAGE START */

#about_container {
  margin-top: 10%;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  /* border:#20ff2b solid 2px; */
}

.intro_text_alignment_about {
  position: relative;
  padding: 0;
  left: 20%;
  top: 30%;
  transform: translate(0, -30%);
}

h1.about_header {
  text-align: left;
}

h2.about_header {
  color: #494949;
  font-size:2rem;
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  margin-top: 0px;
  margin-bottom: 20px;
  text-align:left;
  font-weight: bold;
}

.about_second_header_text {
  color:rgb(0, 151, 189);
  font-size:2rem;
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  text-align:center;
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 50px;
  /* border:#fc0ad4 solid 1px; */
}

p.about_text {
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  color: #494949;
  line-height: 1.5;
  padding-bottom: 0px;
}

figcaption {
  padding-top: 6%;
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  color: #494949;
  text-align: center;
}

.slide_text_alignment {
  position: relative;
  padding: 0;
  margin: 0;
  top: 50%;
  transform: translate(0, -50%);
  /* border:#00d9ff solid 1px; */
}

img.about_img {
  border-radius: 20% 1%;
  width: 100%;
}

.top_image_container {
  position: relative;
  text-align: right;
  color: white;
}

.top_image_container img {
  width: 60%;
  /* border: rgb(222, 40, 40) solid 1px; */
}

.top_image_container_text {
  position: absolute;
  top: 25%;
  left: 0px;
  transform: translate(0, -25%);
}


/* Case Study Stuff Start */

.case_study_button {
  background-image: linear-gradient(to bottom right, rgb(15, 0, 177), rgb(205, 0, 185));
  border: none;
  color: white;
  border-radius: 4px;
  padding: .3em .7em;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5em;
  cursor:pointer;
  font-family:librefranklin, Franklin Gothic Medium, Arial;
}

.case_study_button:hover {
  background-image: linear-gradient(to bottom right, rgb(0, 162, 255), rgb(255, 116, 241));
}

#case_study_container {
  text-align: center;
  margin-top: 10%;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  /* border:#3441ff solid 2px; */
}

.case_study_single_column {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-bottom: 10%;
  /* border:#20ff2b solid 2px; */
}

.case_study_single_column_video {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  padding-bottom: 10%;
  /* border:#20ff2b solid 2px; */
}


.case_study_slide_area_text_first {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  margin: 0;
  gap: 10%;
  padding-bottom: 10%;
  position: relative; /* To position the pseudo-element */
  /* border:#00ff26 solid 2px; */
}

.case_study_text_area_text_first {
  text-align: left;
  margin-top: 0px;
  /* border:#0f007e solid 2px; */
}

.case_study_photo_area_text_first {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* border:#f100d5 solid 1px; */
}

.case_study_photo_area_text_first img {
  width: 100%;
}

.case_study_slide_area_photo_first {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  margin: 0;
  gap: 10%;
  padding-bottom: 10%;
  position: relative; /* To position the pseudo-element */
  /* border:#00ff26 solid 2px; */
}

.case_study_photo_area_photo_first {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* border:#39f74f solid 1px; */
}

.case_study_photo_area_photo_first img {
  width: 100%;
}

.case_study_text_area_photo_first {
  text-align: left;
  margin-top: 0px;
  /* border:#0f007e solid 2px; */
}


.second_header_text {
  color:rgb(0, 151, 189);
  font-size:2rem;
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  margin-top: 0px;
  margin-bottom: 20px;
  text-align:center;
  font-weight: bold;
  /* border:#fc0ad4 solid 1px; */
}

p.case_study_text {
  font-family: librefranklin, Franklin Gothic Medium, Arial;
  color: #494949;
  padding-bottom: 20px;
  text-align: left;
}

.emphasis {
  font-family: librefranklin, Franklin Gothic Medium, Arial;
  color: #000000;
  font-size: 1.1em;
  font-weight: bold;
}

.third_header_text {
  text-align: center;
  color:rgb(0, 0, 0);
  font-size:1.5rem;
  font-weight: bold;
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  line-height: 1.5;

  /* border:#fc0ad4 solid 1px; */
}

p.aha_text {
  text-align: center;
  color:rgb(0, 0, 0);
  font-size:2rem;
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  line-height: 1.5;

  /* border:#fc0ad4 solid 1px; */
}

ol.bullets {
  margin-left: 12%;
  text-align: left;
  padding-bottom: 20px;
  color: #494949;
}

li.bullets {
  font-family:librefranklin, Franklin Gothic Medium, Arial;
  color: #494949;
}

/* Case Study Stuff ENDS */

a:link {
  color: rgb(0, 162, 199);
  transition: color 0.3s;
  text-decoration:none;
}

a:visited {
  color: rgb(0, 162, 199);
  text-decoration:none;
}

a:hover {
  color: rgb(2, 81, 133);
  text-decoration:none;
}

a:active {
  color: rgb(2, 81, 133);
  text-decoration:none;
}

.menu_text_link:link {
  color:rgb(62, 62, 62);
  transition: color 0.3s;
  text-decoration:none;
  font-family: Roboto;
  font-size:1rem;
  margin: 15px;
}

.menu_text_link:hover {
  text-decoration:none;
  color: rgb(255, 41, 155) !important;
}

.menu_text_link:visited {
  color:rgb(62, 62, 62);
  text-decoration:none;
}

.menu_text_link:active {
  text-decoration:none;
  color: rgb(0, 162, 199);
}

#splash_area {
  display: grid;
  margin-top: 125px;
  grid-template-columns: 1fr 1fr;
  /* border:#ff00ea solid 2px; */
}

#intro_text_area, #photo_area {
  width: 100%;
  /* border:#ff00ea solid 2px; */
}

#intro_text_area {
  justify-self: start;
  margin-right: auto;
  text-align: left;
  /* border:#00ff26 solid 2px; */
}

.intro_text_alignment {
  position: relative;
  padding: 0;
  margin: 0;
  top: 30%;
  transform: translate(0, -30%);
}

#photo_area {
  justify-self: end;
  margin-left: auto;
  text-align: center;
  /* border:#000000 solid 1px; */
}

.adamphoto {
  max-width: 60%;
}

#boxes_area {
  justify-items: center;
  align-items: center;
  margin-top: 125px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  box-sizing: border-box;
  row-gap: 100px;
  column-gap: 50px;
}

.box_container {
  max-width: 75%;
  position: relative;
  width: 100%;
  border-radius: 10px;
  background-color: rgba(117, 117, 117, 0.663);
  /* background-image: linear-gradient(#002d46, #094f7436); */
  }

.box_img {
  position: relative;
  height: auto; /* Maintain aspect ratio */
  display: block; /* Ensure the image behaves as a block element */
  margin: 0; /* Reset margin */
  width: 100%; /* Make images fill their grid cells */
  border-radius: 10px;
  opacity: 1;
  backface-visibility: hidden;
  transition: .5s ease;
}

.middle {
  height: 100%;
  width: 100%;
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  text-align: left;
  top: 0; /* Initial position off-screen */
  left: 0;
}

.box_container:hover .box_img {
  opacity: 0.4;
}

.box_container:hover .middle {
  opacity: 1;
}

.desc {
  position: absolute;
  /* border-radius: 10px; */
  top: 65%; /* Position the text 10 pixels from the top */
  left: 0; /* Position the text 10 pixels from the left */
  color: white;
  font-family: Roboto;
  text-align: center;
  font-size: 2.25rem;
  white-space: normal;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  /* padding: 5px; */
  background-color: rgba(117, 117, 117, 0.663)
}

#footer_area {
  margin-top: 5%;
  text-align: center;
  margin-bottom: 5%;
}


@media (max-width: 700px) {

  /* add hamburger menu */

*,
::after,
::before {
  box-sizing: border-box;
}

:root {
  --bar-width: 45px;
  --bar-height: 5px;
  --hamburger-gap: 6px;
  --foreground: rgb(122, 122, 122);
  --background: white;
  --hamburger-margin: 20px;
  --animation-timing: 200ms ease-in-out;
  --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
  content: "";
  width: var(--bar-width);
  height: var(--bar-height);
  background-color: var(--foreground);
  border-radius: 10px;
  transform-origin: left center;
  transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing), background-color var(--animation-timing);
}

.hamburger-menu {
  --x-width: calc(var(--hamburger-height) * 1.41421356237);
  display: flex;
  flex-direction: column;
  gap: var(--hamburger-gap);
  width: max-content;
  position: absolute;
  top: var(--hamburger-margin);
  right: var(--hamburger-margin);
  z-index: 1500;
  cursor: pointer;
}

.hamburger-menu:has(input:checked) {
  --foreground: white;
  --background: #333;
}

.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible {
  border: 1px solid var(--background);
  box-shadow: 0 0 0 1px var(--foreground);
}

.hamburger-menu input {
  appearance: none;
  padding: 0;
  margin: 0;
  outline: none;
  pointer-events: none;
}

.hamburger-menu input:checked {
  opacity: 0;
  width: 0;
}

.hamburger-menu:has(input:checked)::before {
  rotate: 45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after {
  rotate: -45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / 2);
}

.sidebar {
  transition: translate var(--animation-timing);
  translate: 100%;
  position: fixed;
  top: 0;
  right: 0;
  padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
  background-image: linear-gradient(rgb(4, 101, 146), rgb(0, 187, 143));
  color: #FFFFFF;
  width: 100%;
  min-height: 100vh;
  z-index: 999;
  text-align: center;
  display: block;
}

.sidebar_text_selected {
  font-family: Roboto;
  font-size: 2rem;
  color: #a7a7a7;
  transition: color 0.3s;
  text-decoration:none;
  padding: 10px;
}

.sidebar_text:link {
  font-family: Roboto;
  font-size: 2rem;
  color: #FFFFFF;
  transition: color 0.3s;
  text-decoration:none;
}

.sidebar_text:hover {
  text-decoration:none;
  color: rgb(248, 255, 124) !important;
}

.sidebar_text:visited {
  color:#FFFFFF;
  text-decoration:none;
}

.hamburger-menu:has(input:checked) + .sidebar {
  translate: 0;
}

  /* Switch to a Single Column Layout */


#header_area {
  display: none; /* hide the header */
}

#splash_area {
  display: grid;
  margin-top: 10px;
  grid-template-columns: 1fr;
  gap: 0;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  /* border:#ff00ea solid 2px; */
}

  /* Make the photo area appear above the text area */
  #photo_area {
    justify-self: auto;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    order: 1;
  }

  #intro_text_area {
    margin-top: 0px;
    margin-bottom: 5px;
    padding: 5%;
    justify-self: auto;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    order: 2;
    /* border:#ff00ea solid 2px; */
  }

  .intro_text_alignment {
    top: 0%;
    transform: translate(0, -0%);
    margin: 0;
    /* border:#22cc33 solid 2px; */
  }

#boxes_area {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 30px; /* Gap between grid items */
}

#text_container {
  margin-top: 100px;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  /* border:#20ff2b solid 2px; */
}

/* CASE STUDY MOBILE STUFF STARTS */


.case_study_slide_area_text_first {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  gap: 0;
  /* border:#00ff26 solid 2px; */
}

.case_study_text_area_text_first {
  text-align: left;
  margin-top: 0px;
  margin-bottom: 10%;
  order: 1;
  /* border:#0f007e solid 2px; */
}

.case_study_photo_area_text_first {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  order: 2;
  /* border:#f100d5 solid 1px; */
}

.case_study_slide_area_photo_first {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  gap: 0;
  /* border:#00ff26 solid 2px; */
}

.case_study_photo_area_photo_first {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  order: 2;
  /* border:#39f74f solid 1px; */
}

.case_study_text_area_photo_first {
  text-align: left;
  margin-top: 0px;
  margin-bottom: 10%;
  order: 1;
  /* border:#0f007e solid 2px; */
}

/* CASE STUDY MOBILE STUFF ENDS */

/* ABOUT SECTION MOBILE START */

h1.about_header {
  text-align: center;
}

.intro_text_alignment_about {
  position: relative;
  text-align: center;
  padding: 0;
  left: 0%;
  top: 0%;
  transform: translate(0, -0%);
}

/* ABOUT SECTION MOBILE END */


}