/* -------------------------------------------------------------------------------- */
/* ! Base */
/* -------------------------------------------------------------------------------- */
/* Tavolozza */
:root {
  --primary: #7e3a57;
  --secondary: #844d93;
  --accent: #e887ae;
  --light: #EEF8FB;
  --dark: #372F34;
}


/* Reset */
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

/* Tipografia */
body {
  font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', sans-serif;
}

p,
ul,
a {
  font-size: 1.2em;
  line-height: 1.2em;
  margin-bottom: 15px;
}

p.leading {
  font-size: 1.4em;
  line-height: 1.4em;
}

p span {
  font-weight: 900;
  color: var(--secondary);
}

.cta {
  display: block;
  border: 2px solid var(--primary);
  color: var(--primary);
  margin: 0 auto;
  /* questo comando con gli oggetti block riesce a centrarli */
  padding: 12px;
  border-radius: 12px;
  width: fit-content;
  /* comando che ottimizza la larghezza in base al contentuto */
  text-transform: uppercase;
  font-weight: 900;
}

.cta:hover {
  background: var(--primary);
  color: var(--light);
}

/* Riuso */
.res {
  width: 100%;
  max-width: 400px;
}

.clipped {
  clip-path: circle();
}

/* -------------------------------------------------------------------------------- */
/* ! Mobile first */
/* -------------------------------------------------------------------------------- */
/* Grid system */

.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  padding: 20px;
}


/* navigazione */
.site-nav h1 {
  border-bottom: 2px solid var(--primary);
  color: var(--primary);
  grid-column: 1/5;
  z-index: 1;
}

.site-nav__menu {
  position: absolute;
  top: 0;
  left: 0;
  max-height: 0;
  overflow: hidden;
  /* ciò che straborda lo zero viene nascosto in questa maniera */
}

.open .site-nav__menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-height: 100%;
  height: 100vh;
  width: 100%;
  background-color: var(--light);
  position: fixed;
}

.site-nav__hamburger {
  cursor: pointer;
  grid-column: 7/9;
  justify-self: end;
  z-index: 1;
}

.site-nav__hamburger .fa-solid {
  font-size: 2em;
}

/* benvenuto */

#welcome h2 {
  grid-column: 1/9;
}

.welcome__text {
  grid-column: 1/9;
}

.welcome__img {
  display: flex;
  grid-column: 1/9;
  justify-content: center;
}

/* libro */

#book h2 {
  grid-column: 1/9;
}

.book__text {
  grid-column: 1/9;
}

.book__img {
  grid-column: 1/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* finchè il flex lavora in row la centratura la fa justify content, se lavoro in column si ruota tutto 
  e la centratura la fa align items */
}

/* portfolio */
#portfolio {
  position: relative;
  background: var(--dark) url(img/ajo.jpeg) no-repeat;
  background-size: cover;
}

#portfolio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dark);
  opacity: 0.7;
}

#portfolio h2 {
  position: relative;
  color: white;
  z-index: 1;
  text-align: center;
}

.portfolio__projects a {
  grid-column: 1/9;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portfolio__projects a * {
  max-width: 50%;
  display: block;
  z-index: 1;
}

.portfolio__projects h3 {
  border: 3px solid var(--primary);
  background: var(--primary);
  padding: 12px;
  text-align: center;
  border-radius: 12px;
  color: var(--light);
}

.portfolio__projects h3:hover {
  border: 3px solid var(--light);
  background: none;
}

/* skillz */
#skills h2 {
  text-align: center;
}

#skills img {
  height: 80px;
}

#skills li {
  grid-column: span 4;
  /* diciamo al programma di prendere per ogni li 4 colonne */
  text-align: center;
  padding: 12px;
  background: var(--light);
  border: 1px solid var(--accent);
}

/* footer */
#prefooter {
  background: var(--dark)
}

footer {
  padding: 30px 0px;
}

footer * {
  color: var(--light);
}

.credits {
  grid-column: 1/5;
  display: flex;
  align-items: center;
}

.social {
  grid-column: 6/9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}