style.css

/* FONT IMPORT - GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,700;1,200;1,300;1,600&display=swap');

/* RULES FOR FONTS */
/* font-family: 'Poiret One', cursive;
font-family: 'Poppins', sans-serif; */

/* VARIABLES */
:root {
  --clr-drk-gray: #31393cff;
  --clr-med-blue: rgb(20, 32, 141);
  --clr-lit-white: #f7fff7ff;
  --clr-accent: #ca9ce1ff;
  --clr-lit-blue: #49b6ffff;
}

/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

body {
  font-family: 'Poppins', sans-serif;
  color: var(--clr-lit-white);
}

a {
  text-decoration: none;
  color: var(--clr-lit-blue);
  font-family: 'Poppins', sans-serif;
}

.fab,
.far,
.fas {
  font-weight: 600;
}

/* UTILITY CLASSES */

.wrapper {
  max-width: 80%;
  margin: auto;
}

/* BORDERS FOR LAYOUT CONSTRUCTION */
.border1 {
  border: 1px solid red;
}
.border2 {
  border: 1px solid blue;
}
.border3 {
  border: 1px solid green;
}

/* HEADER */
header {
  display: flex;
  justify-content: space-between;

  align-items: flex-start;
  background-color: var(--clr-med-blue);
  color: var(--clr-lit-white);
  border-bottom: 1px solid var(--clr-accent);
  border-radius: 0 0 2px 2px;
}

.header__logo {
  font-family: 'Poiret One', sans-serif;
  padding: 0.6em;
  font-size: 1.1rem;
  align-self: center;
}

.header__links {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-end;
  padding: 0.7em;
}

/* MAIN */

main {
  background-color: var(--clr-drk-gray);
}

/* HERO */

.hero {
  padding-top: 1.7em;
  padding-bottom: 1em;
}

.hero h1 {
  font-family: 'Poppins', sans-serif;
  color: var(--clr-accent);
  font-weight: 500;
  font-size: 2rem;
  text-transform: uppercase;
}

.hero img {
  border-radius: 13px;
}

.hero__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  position: relative;
}

.hero__title h1 {
  position: absolute;
  top: 8%;
  right: 10%;
  text-align: right;
  color: var(--clr-accent);
}

.hero__title span {
  font-weight: 700;
}

.hero__desc {
  left: 5%;
  bottom: -105%;
  color: var(--clr-accent);
  text-transform: uppercase;
  font-weight: bold;
}

/* ABOUT SECTION */
.about__span {
  font-weight: 400;
  text-decoration: underline;
  text-transform: uppercase;
  color: var(--clr-lit-blue);
  font-size: 1.2rem;
}

.about p {
  margin-top: 0.3em;
  line-height: 1.3;
}

.about li {
  list-style-type: none;
  line-height: 1.3;
}

.about h2 {
  color: var(--clr-lit-blue);
  font-weight: 300;
}

#serious__span {
  font-weight: 600;
  color: var(--clr-lit-blue);
}

/* PROJECTS */

.projects h2 {
  font-size: 2rem;
  text-align: center;
  text-transform: uppercase;
  padding: 0.3em 0 0.6em 0;
  color: var(--clr-accent);
}

.projects h3 {
  text-transform: uppercase;
  color: var(--clr-lit-white);
}

.projects h4 {
  text-transform: uppercase;
}

.projects a {
  text-decoration: underline;
  color: var(--clr-drk-gray);
}

.project__box {
  display: flex;
  flex-direction: column;
}

.project__card {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  box-shadow: 1px 1px 5px 0px var(--clr-accent);
  margin-bottom: 1rem;
  background-color: var(--clr-lit-blue);
  color: var(--clr-drk-gray);
}

.project__card__text {
  line-height: 1.2;
  padding: 1rem;
}

.project__card__tech {
  margin-left: 1em;
}

.project__card__tech li {
  list-style-type: none;
  font-weight: 500;
}

.project__card img {
  border-radius: 2rem;
  padding: 1em 0.5em 0.5em 0.5em;
}

.project__card__text i {
  padding: 0 0.3em 0.4em 0;
}

/* CONTACT */

.contact {
  padding: 1em 0 1.5em 0;
  color: var(--clr-drk-gray);
  border-radius: 3px 3px 0 0;
}

.contact h2 {
  text-align: center;
  padding-bottom: 0.3em;
  font-size: 2rem;
  color: var(--clr-accent);
  text-shadow: 1px 1px 2px black;
}

.contact a {
  margin-left: 1rem;
  color: var(--clr-lit-blue);
  display: inline;
}

.contact__links {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: justify;
  text-transform: uppercase;
  font-size: 1.2rem;
  max-width: 80%;
  margin: auto;
}

.contact__links i,
.contact__links a {
  font-weight: 500;
  color: var(--clr-lit-blue);
}

/* FOOTER */
footer {
  background-color: var(--clr-med-blue);
  padding: 1em 0;
  text-align: center;
  font-size: 0.7rem;
}

/* MEDIA QUERIES */
@media (min-width: 768px) {
  header {
    align-items: center;
  }

  .header__logo {
    font-size: 2em;
  }

  .header__links {
    flex-direction: row;
    justify-content: space-between;
    font-size: 1.5rem;
  }

  .header__links a {
    margin-right: 0.5em;
    color: var(--clr-lit-white);
  }

  .hero h1 {
    font-weight: 500;
    font-size: 2rem;
  }
  .hero p {
    font-size: 2rem;
    text-align: right;
  }

  .hero__title h1 {
    position: initial;
    font-size: 3rem;
    text-align: right;
    margin: 0.7em 0;
  }

  .hero__info,
  .hero__desc,
  .hero__title {
    position: initial;

    flex-direction: row;
  }

  .hero__img {
    width: 40%;
  }

  .hero__title {
    display: flex;
    flex-direction: column;
    width: 60%;
  }

  .about h2 {
    font-weight: 500;
    font-size: 2.6rem;
  }

  .about p,
  .about li {
    line-height: 1.5;
    font-size: 1.6rem;
  }

  .about__span {
    font-weight: 500;
    font-size: 1.85rem;
  }

  .projects h2 {
    font-size: 4rem;
    padding: 0.3em 0 0.4em 0;
  }

  .projects h3 {
    font-size: 1.5em;
  }

  .project__card__text {
    display: flex;
    padding: 1.5em;
  }

  .card__main__text {
    max-width: 50%;
  }

  .card__details {
    max-width: 50%;
    display: inline-flex;
    align-content: center;
    flex-direction: column;
    margin-left: 2em;
  }

  .card__links {
    display: inline-flex;
    font-size: 1.1rem;
    margin-bottom: 1em;
    width: 100%;
  }
  .card__links > div {
    padding-right: 0.5em;
  }

  .project__card__tech {
    margin-left: 0;
  }

  .contact h2 {
    font-size: 4.3rem;
  }

  .contact__links {
    flex-direction: row;
    max-width: 100%;
  }

  .contact a {
    margin-left: 0.25rem;
  }

  .contact i {
    margin-left: 0.5rem;
  }

  .contact__links i,
  .contact__links a {
    font-weight: 500;
    font-size: 1.65rem;
  }

  footer {
    font-size: 1.1rem;
  }
}

@media (min-width: 1368px) {
  .header__logo {
    margin-left: 2em;
  }

  .header__links a {
    margin-right: 1em;
  }

  .hero {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

  .hero h1 {
    font-size: 7rem;
    font-weight: 400;
    line-height: 0.9;
  }

  .hero__desc p {
    font-size: 3.3rem;
  }

  .about__container {
    display: flex;
    flex-wrap: wrap;
  }

  .about__main {
    width: 50%;
    padding-bottom: 5em;
  }
  .about__problems {
    width: 40%;
    margin-left: 3.5em;
  }

  .about__problems li {
    font-size: 1.4rem;
  }

  .about__extra {
    display: flex;
  }

  .about__exp {
    width: 50%;
    padding-bottom: 5em;
  }
  .about__idio {
    width: 40%;
    margin-left: 3.5em;
  }

  .project__box {
    flex-direction: row;
    justify-content: space-between;
    align-content: flex-start;
    justify-items: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .project__card {
    margin: 0 auto;
    flex-direction: column;
    justify-content: space-evenly;
    max-width: 30%;
  }

  .project__card__text {
    flex-direction: column;
    justify-content: space-evenly;
  }

  .card__main__text {
    max-width: 100%;
  }

  .card__details {
    flex-direction: column;
    max-width: 100%;
  }
}