/* ---------- VARIABLES ---------- */
:root {
  /* Greens palette */
  --clr-green-dk-1: #05070D;
  --clr-green-dk-2: #041D21;
  --clr-green-dk-3: #062F30;
  --clr-green-lt-1: #0A4B4D;
  --clr-green-lt-2: #0C5959;
  --clr-green-lt-3: #107A72;
  --clr-green-lt-4: #1FAAA0;
  --clr-green-lt-5: #25c0b6;

  /* Transparent green */
  --clr-green-tsp-1: #047a7360;
  --clr-green-tsp-2: #1faaa160;

  /* White and black: both for fonts and backgrounds */
  --clr-white: white;
  --clr-black: black;


  /* Transitions time */
  --trans-tm-links: .3s ease all;
  --trans-tm-colors: .5s ease all;
  --trans-tm-boxes: .5s ease all;
  --trans-tm-flip-box: .8s;
}

/* ---------- GENERAL ---------- */

html {
  scroll-behavior: smooth;
}

body {
  padding: 0;
  margin: auto;
  font-family: 'Nunito', sans-serif;
  font-size: 1.2em;
  color: var(--clr-green-dk-1);
  transition: var(--trans-tm-colors);
}

body.dark {
  background-color: var(--clr-green-dk-3);
  color: var(--clr-green-lt-5);
}

#main-section {
  margin: auto;
  /* border: 1px solid black; */
}

@media (min-width: 65em) {
  #main-section {
    max-width: 75em;
  }
}

/* ---------- NAVIGATION ---------- */

#navigation {
  padding: 1.5em 2em;
  transition: var(--trans-tm-boxes);
}

#nav-title {
  font-family: 'Fuzzy Bubbles', cursive;
  padding-top: 1em;
}

#nav-title h1 {
  margin: 1rem .5rem .5rem;
}

#nav-title span {
  color: var(--clr-green-lt-2);
  transition: var(--trans-tm-colors);
}

body.dark #nav-title span {
  color: var(--clr-white);
}

@media (max-width: 28em) {
  #navigation {
    padding: 1.5em 1em;
  }
}

/* ---------- MENU ---------- */

#menu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  right: 0;
  top: 0;
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: var(--trans-tm-boxes);
}

#menu-content {
  height: 100%;
}

#menu-content #menu-links-top {
  padding-top: 3em;
}

#menu-content a {
  display: block;
  padding: 2rem 0 2rem 3rem;
  text-decoration: none;
  color: var(--clr-white);
  transition: var(--trans-tm-links);
}

#menu-content #menu-links-bottom {
  position: absolute;
  bottom: 2em;
  width: 100%;
}

#menu-content #menu-links-bottom a ion-icon {
  width: 2.3rem;
  height: 2.3rem;
  margin-left: 2.5rem;
}

#menu a:hover, #menu a:focus {
  color: var(--clr-green-lt-3);
}

#menu-btn {
  position: fixed;
  z-index: 1;
  right: 2em;
  top: 2em;
  padding: 1rem;
  background-color: var(--clr-green-lt-3);
  border-radius: 50px;
  cursor: pointer;
  transition: var(--trans-tm-boxes);
}

body.dark #menu-btn {
  background-color: var(--clr-white);
}

.menu-btn-bar1, .menu-btn-bar2, .menu-btn-bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: var(--trans-tm-boxes);
}

.change .menu-btn-bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .menu-btn-bar2 {
  opacity: 0;
}

.change .menu-btn-bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

@media (max-width: 26em) {
  #menu-btn {
    top: 6em;
  }
}


/* ---------- THEME TOGGLE - SWITCH ---------- */

#theme-toggle {
  margin-top: 5em;
  transition: var(--trans-tm-boxes);
}

#switch-btn {
  padding: 0;
  background-color: mediumslateblue;
  border-radius: 1000px;
  border: none;
  position: relative;
  cursor: pointer;
  display: flex;
  outline: none;
  transition: var(--trans-tm-colors);
}

#switch-btn span {
  width: 4em;
  height: 4em;
  display: block;
  background: none;
}

#switch-btn ion-icon {
  width: 4em;
  height: 2em;
  margin-top: .9em;
}

#switch-btn.active {
  background-color: orange;
}

#switch-toggle {
  display: block;
  width: 4em;
  height: 4em;
  position: absolute;
  background-color: var(--clr-white);
  top: 0;
  left: 0;
  right: unset;
  border-radius: 100px;
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,.2);
  z-index: 1;
  transition: var(--trans-tm-boxes);
}

@media (max-width: 28em) {
  #theme-toggle {
    margin-top: 2em;
  }
}



/* ---------- HERO ---------- */

#hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 3em 4em 8em;
  font-size: 1.3em;
  transition: var(--trans-tm-boxes);
}

#hero-intro a ion-icon {
  width: 2.3rem;
  height: 2.3rem;
  margin-left: 2.5rem;
}

#hero-intro a {
  color: var(--clr-black);
  transition: var(--trans-tm-links);
}

#hero-intro a:hover, #hero-intro a:focus {
  color: var(--clr-green-lt-2);
}

body.dark #hero-intro a:hover, body.dark #hero-intro a:focus {
  color: var(--clr-white);
}

/* #hero-intro {
  border: 1px solid black;
} */

.hero-intro {
  width: 23em;
  margin: auto;
  padding-top: 1em;
  /* border: 1px solid black; */
  transition: var(--trans-tm-boxes);
}

#hero-img {
  display: flex;
  /* border: 1px solid black; */
  transition: var(--trans-tm-boxes);
}

.hero-img {
  width: 15em;
  margin: auto;
  /* border: 1px solid black; */
}

.hero-img img {
  width: 15em;
  height: 15em;
}

#hero-intro span, #hero-intro p {
  color: var(--clr-green-lt-2);
  transition: var(--trans-tm-colors);
}

body.dark #hero-intro span, body.dark #hero-intro p {
  color: var(--clr-white);
}

@media (max-width: 68em) {
  #hero {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 2em 2em;
  }

  .hero-intro {
    width: 24em;
    padding-left: 2em;
  }

  #hero-img {
    margin-top: 2em;
  }
}

@media (max-width: 45em) {
  #hero {
    margin: 0 2em 2em;
  }

  .hero-intro {
    width: 15em;
    padding-left: 0;
  }
}

@media (max-width: 28em) {
  #hero {
    margin: 0 1em 1em;
  }
}


/* ---------- ABOUT ---------- */

#about {
  margin: 8em;
  transition: var(--trans-tm-boxes);
}

#about-desc h3, #about-skills h3 {
  color: var(--clr-green-lt-2);
  padding: 2.5rem 0 0 1rem;
  transition: var(--trans-tm-colors);
}

body.dark #about-desc h3, body.dark #about-skills h3 {
  color: var(--clr-white);
}

#about-desc p {
  padding-left: 12rem;
  transition: var(--trans-tm-boxes);
}

#about-location {
  color: var(--clr-green-lt-1);
  font-style: italic;
  transition: var(--trans-tm-colors);
}

body.dark #about-location {
  color: var(--clr-white);
}

#skills-cnt img, #skills-cnt ion-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-left: 2.5rem;
  transition: var(--trans-tm-boxes);
}

body.dark #skills-cnt ion-icon {
  color: var(--clr-black);
}

#skills-cnt ion-icon:hover {
  color: var(--clr-green-lt-2);
}

body.dark #skills-cnt ion-icon:hover {
  color: var(--clr-white);
}

#skills-cnt img:hover {
  background-color: var(--clr-green-lt-3);
}

body.dark #skills-cnt img:hover {
  background-color: var(--clr-white);
}

@media (max-width: 45em) {
  #about {
    margin: 8em 4em;
  }
  
  #about-desc p {
    padding-left: 9rem;
  }
}

@media (max-width: 28em) {
  #about {
    margin: 6em 1em;
  }

  #about-desc p {
    padding-left: 6rem;
  }
}


/* ---------- RESUME ---------- */

#resume {
  margin: 15em 8em;
  transition: var(--trans-tm-boxes);
}

#resume h2 {
  color: var(--clr-green-lt-2);
  padding: 2.5rem 0 0 1rem;
  transition: var(--trans-tm-colors);
}

body.dark #resume h2 {
  color: var(--clr-white);
}

#resume-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 3em 0;
  /* border: 1px solid black; */
  transition: var(--trans-tm-boxes);
}

#resume-box {
  width: 11.8em;
  height: 5em;
  margin: auto;
  /* border: 1px solid black; */
  transition: var(--trans-tm-boxes);
}

.resume-btn {
	display: inline-block;
  position: relative;
	cursor: pointer;
	border: 1px solid var(--clr-green-lt-2);
  border-radius:18px;
	font-family:Arial;
	font-size:1.2em;
	padding:1em 2em;
	text-decoration:none;
	color: var(--clr-green-dk-3);
	background-color: var(--clr-green-lt-4);
	text-shadow: 1px 1px 1px var(--clr-green-lt-2);
  box-shadow: 4px 4px 0px 0px var(--clr-green-lt-2);
  transition: var(--trans-tm-boxes);
}

body.dark .resume-btn {
  border: 1px solid var(--clr-green-lt-2);
  color: var(--clr-green-dk-1);
  background-color: var(--clr-green-lt-3);
  text-shadow: 1px 1px 1px var(--clr-green-lt-2);
  box-shadow: 4px 4px 0px 0px var(--clr-green-lt-2);
}

.resume-btn:hover, .resume-btn:focus {
  bottom: 2px;
	color: var(--clr-green-dk-2);
  border: 1px solid var(--clr-green-lt-2);
  text-shadow: 1px 1px 1px var(--clr-green-lt-2);
  box-shadow: 5px 5px 0px 0px var(--clr-green-lt-2);
}

body.dark .resume-btn:hover, body.dark .resume-btn:focus {
  bottom: 2px;
	color: var(--clr-black);
  border: 1px solid var(--clr-green-lt-1);
  text-shadow: 1px 1px 1px var(--clr-green-lt-1);
  box-shadow: 5px 5px 0px 0px var(--clr-green-lt-1);
}

.resume-btn:active {
	top: 4px;
  box-shadow: 2px 2px 0px 0px var(--clr-green-lt-2);
}

body.dark .resume-btn:active {
  top: 4px;
  box-shadow: 2px 2px 0px 0px var(--clr-green-lt-1);
}

@media (max-width: 55em) {
  #resume {
    margin: 12em 8em;
  }

  #resume-grid {
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  #resume-box {
    margin-top: 2.5em;
  }

  #resume h2 {
    text-align: center;
    padding-left: 0;
  }
}

@media (max-width: 35em) {
  #resume {
    margin: 12em 4em;
  }

  #resume-box {
    width: 9.5em;
    height: 3.5em;
  }

  .resume-btn {
    padding: .5em 1em;
  }
}



/* ---------- PORTFOLIO ---------- */

#portfolio {
  margin: 16em 2em 8em;
  text-align: center;
}

#portfolio > h2 {
  color: var(--clr-green-lt-2);
  transition: var(--trans-tm-colors);
}

body.dark #portfolio > h2 {
  color: var(--clr-white);
}

#portfolio-grid {
  margin-top: 4em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  transition: var(--trans-tm-boxes);
}

/* .portfolio-grid-elem {
  border: 1px solid black;
} */

.portfolio-grid-box {
  /* border: 1px solid black; */
  width: 20em;
  height: 15em;
  margin: auto;
  transition: var(--trans-tm-boxes);
}

 /* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
 .flip-box {
  background-color: transparent;
  width: 100%;
  height: 100%;
  /* border: 1px solid #f1f1f1; */
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform var(--trans-tm-flip-box);
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side */
.flip-box-front {
  background-color: var(--clr-green-lt-4);
  color: var(--clr-green-dk-1);
  transition: var(--trans-tm-colors);
}

body.dark .flip-box-front {
  background-color: var(--clr-green-lt-3);
  color: var(--clr-black);
}

/* Style the back side */
.flip-box-back {
  background-color: var(--clr-green-lt-3);
  color: var(--clr-white);
  transform: rotateX(180deg);
}

body.dark .flip-box-back {
  background-color: var(--clr-green-lt-4);
}

.flip-box-front h2, .flip-box-back h2 {
  padding: 1.3em .4em .8em;
  transition: var(--trans-tm-boxes);
}

.flip-box-front p, .flip-box-back p {
  padding: .2em .4em;
  transition: var(--trans-tm-boxes);
}

.flip-box-back a {
  color: var(--clr-white);
}

@media (max-width: 65em) {
  #portfolio-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .portfolio-grid-box {
    width: 30em;
  }
}

@media (max-width: 40em) {
  .portfolio-grid-box {
    width: 20em;
  }
}

@media (max-width: 27.5em) {
  .portfolio-grid-box {
    width: 15em;
  }

  .flip-box-front h2, .flip-box-back h2 {
    padding: .4em .2em .4em;
  }

  .flip-box-front p, .flip-box-back p {
    padding: 0;
  }
}

@media (max-width: 24em) {
  .portfolio-grid-box {
    width: 10em;
  }

  .flip-box-front h2, .flip-box-back h2 {
    padding: 0;
    margin: 0;
  }
}


/* ---------- FOOTER ---------- */

#footer {
  background-color: var(--clr-green-lt-3);
  padding: .4em 2em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  transition: var(--trans-tm-colors);
}

body.dark #footer {
  background-color: var(--clr-green-dk-2);
  color: var(--clr-white);
}

#footer-links {
  padding: .7em 0;
}

#footer-links a {
  color: var(--clr-black);
  transition: var(--trans-tm-links);
}

#footer-links a:hover, #footer-links a:focus {
  color: var(--clr-white);
}

body.dark #footer-links a:hover, body.dark #footer-links a:focus {
  color: var(--clr-white);
}

#footer-links a ion-icon {
  width: 2.3rem;
  height: 2.3rem;
  margin-left: 2.5rem;
}