@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');

* {
  /* outline: 1px solid red; */
}

/*! VARIABLES */

:root {
  /** FONT SIZES */
  --F-XXS: 0.25rem;
  --F-XS: 0.5rem;
  --F-SM: 0.75rem;
  --F-NORMAL: 1rem;
  --F-M: 1.25rem;
  --F-L: 1.5rem;
  --F-XL: 1.75rem;
  --F-XXL: 2rem;

  /** COLORS */
  --WHITE: #f5f5f5;
  --BLUE: #118ab2;
  --RED: #df2935;
  --YELLOW: #ff9f1c;
  --BLACK: #333;
}

/*! GENERAL  */

::selection {
  background-color: var(--YELLOW);
  color: var(--BLACK);
}

#work,
#info,
#contact {
  scroll-margin-top: 6rem;
}

body {
  background-color: var(--BLACK);
}

body,
.nav-item a,
.card {
  color: var(--WHITE)
}

.navbar,
footer {
  background-color: var(--BLUE);
}

#hero,
#work,
#info,
#contact {
  margin-bottom: 6rem;
}

#info .section-division {
  margin-bottom: 4rem;
}

.section-division {
  margin-bottom: 6rem;
  padding-bottom: 2rem;
}

.info__divider {
  width: 35%;
  border-top-width: 4px;
  margin: 4rem 0;
}

.hero-title__divider,
.tech-stack__divider {
  color: rgb(80, 80, 80);
  opacity: 1;
}

/*! BORDERS */

.border-bottom,
.border-top {
  border-color: rgba(255, 255, 255, 1);
}

/*! NAV  */

#nav {
  margin-bottom: 3.5rem;
}


#nav #logo__nav {
  margin-left: 2rem;
  font-family: 'Fira Code', monospace;
	font-weight: 500;
	font-size: var(--F-XL);
}

#nav a {
  margin-left: 2rem;
}

#nav {
  box-shadow: 0px 2px 20px 1px rgb(0, 0, 0, 0.5);
}

.fa-arrow-turn-up {
  font-size: 3.5rem;
  position: fixed;
  top: 55%;
  right: 5%;
  z-index: 100;
  /* color: var(--YELLOW); */
  color: var(--YELLOW);
  text-shadow: 0px 0px 3px black;
}

/*! HERO */

#hero img {
  /* outline: 3px solid black; */
  box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

#hero .card {
  padding: 1rem 1rem 0 1rem;
}

.css-portfolio {
	color: var(--YELLOW);
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

.css-portfolio:hover {
	color: var(--BLUE);
}

/*! TECH STACK */

.tech-stack i {
  transition: all 0.2s ease-in-out;
  font-size: 3.5rem;
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}

.tech-stack i:hover {
  transform: scale(1.1);
}

.tech-stack {
  margin-top: 1rem;
  margin-bottom: 5rem;
}

.tech-stack .fa-brands {
  margin-top: 1.5rem;
}

.fa-html5 {
  color: var(--RED);
}

.fa-css3-alt {
  color: yellowgreen;
}

.fa-js {
  color: var(--YELLOW);
}

.fa-react {
  color: dodgerblue;
}

.fa-bootstrap {
  color: blueviolet;
}

/*! CARDS GENERAL  */

#work .card-footer {
  border-top: 0;
  background-color: var(--BLUE);
  margin-bottom: 1rem;
}

/*! CARD BACKGROUNDS */

/* #hero .card,
#info .card, */
#work .card {
  background-color: rgba(17, 138, 178, 1);
}

#hero .card,
#info .card {
  background-color: var(--BLACK);
}

/*! CARD BORDERS */

#hero .card,
#info .card,
#contact .card {
  border: 1px solid rgb(80, 80, 80);
  /* border: 0; */
  --bs-card-border-radius: 1rem;
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.5);
}

#work .card {
  /* border: 1px solid black; */
  border: 0;
  --bs-card-border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
}

/*! CARD BUTTONS  */


.btn {
  background-color: var(--YELLOW);
  /* border: 1px solid rgba(0, 0, 0, 1); */
  border: 0;
  border-radius: 0.4rem;
  color: var(--BLACK);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease-in-out;
  width: 40%;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}

.btn:hover {
  background-color: #f89100;
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.5);

}

.btn-off {
  background-color: rgba(128, 128, 128, 1);
  color: var(--BLACK);
  cursor: no-drop;
  transition: all 0.25s ease-in-out;
}

.btn-off:hover {
  background-color: rgb(121, 121, 121)
}

/*! WORK CARDS */

#skills .card,
#about .card {
  padding: 0.5rem 1.5rem 1rem 1.5rem;
}


/*! WORK IMAGES */

.project__1 {
  background-image:
    /* linear-gradient(to bottom,
      rgba(0, 0, 0, 0.1) 10%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 1)), */
    url("../images/films-4-search.png");
}

.project__2 {
  background-image:
    /* linear-gradient(to bottom,
      rgba(0, 0, 0, 0.1) 10%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 1)), */
    url("../images/Weather-Dashboard-desktop.png");
}

.project__3 {
  background-image:
    /* linear-gradient(to bottom,
      rgba(0, 0, 0, 0.1) 10%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 1)), */
    url("../images/work-day-scheduler-desktoop.png");
}

.project__4 {
  background-image:
    /* linear-gradient(to bottom,
      rgba(0, 0, 0, 0.1) 10%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 1)), */
    url("../images/Coding-Quiz-quiz.png");
}

.project__5 {
  background-image:
    /* linear-gradient(to bottom,
      rgba(0, 0, 0, 0.1) 10%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 1)), */
    url("../images/Password-Generator-Desktop.png");
}

.project__6 {
  background-image:
    /* linear-gradient(to bottom,
      rgba(0, 0, 0, 0.1) 10%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 1)), */
    url("../images/CSS-Cheatsheet-demo.png");
}

.project {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*! CONTACT */

#contact a {
  text-decoration: none;
}

#contact i {
  font-size: 3.5rem;
  scale: 1;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

#contact i:hover {
  transform: scale(1.1);
}

.fa-envelope {
  color: var(--RED);
}

.fa-github {
  color: var(--WHITE);
}

.fa-linkedin {
  color: dodgerblue;
}

/*! FOOTER */

#logo__footer {
	font-family: 'Fira Code', monospace;
	font-weight: 500;
	font-size: var(--F-XL);
}

/*! MEDIA QUERY */

@media only screen and (min-width: 0px) and (max-width: 576px) {
  .tech-stack i {
    font-size: 3rem;
    margin: 0 .5rem;
  }

  #contact i {
    font-size: 2.75rem;
  }
}

@media only screen and (min-width: 576px) and (max-width: 768px) {
  .tech-stack i {
    font-size: 3.25rem;
    margin: 0 1rem;
  }

  #contact i {
    font-size: 3rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  .tech-stack i {
    font-size: 3.25rem;
    margin: 0 1rem;
  }

  #contact i {
    font-size: 3.25rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  #contact i {
    font-size: 3.5rem;
  }
}