/* ===================== */
/* Global */
/* ===================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: "Play", sans-serif;
  color: #333;

  transition: all 0.5s ease-in;
  overflow-x: hidden;
  position: relative;
}

.dark-mode {
  color: #f7f7f7;
  background-color: #1f0823;
}

/* ion-icon {
  pointer-events: none;
} */

*:focus {
  outline: 3px solid #9c27b0;
}

/* section:focus {
  outline: none;
} */

/* ===================== */
/* General*/
/* ===================== */

h1 {
  font-weight: 700;
  font-size: 6.192rem;
  letter-spacing: -2px;
  color: #9c27b0;
}

h2 {
  font-weight: 400;
  font-size: 4.3rem;
  letter-spacing: -1.5px;
  margin-bottom: 3.2rem;
}

h3 {
  font-weight: 400;
  font-size: 2.074rem;
  letter-spacing: -1px;
  margin-bottom: 0.8rem;
}

.subtitle {
  font-size: 2.488rem;
}

.text {
  color: inherit;
  font-size: 1.728rem;
}

main .section {
  padding: 2.4rem;
  padding-top: 12.8rem;
  min-height: 100vh;
  transition: all 0.5s;
}

.dark-mode main .section {
  background-color: #1f0823;
}

.container {
  max-width: 132rem;
  margin: 0 auto;
}

.section-title {
  margin-bottom: 4.8rem;
}

.hidden {
  display: none;
}

/* ===================== */
/* Buttons*/
/* ===================== */

.btn:link,
.btn:visited {
  text-decoration: none;
  font-size: 1.728rem;
  color: #f7f7f7;
  margin-right: 2.4rem;
  padding: 1.2rem 2.4rem;
  background-color: #9c27b0;
  border-radius: 9px;
  transition: all 0.3s;
  z-index: 5;
}

.btn:hover,
.btn:active {
  background-color: #5e176a;
}

/* ===================== */
/* Re usable Grids */
/* ===================== */

.grid {
  display: grid;
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

/* ===================== */
/* Helper classes */
/* ===================== */

.margin-bottom-sm {
  margin-bottom: 1.6rem;
}

/* ===================== */
/* Colors
Main: #9c27b0
Tints (darker) : #5e176a, 
Shades (lighte) : #b052c0  #e1bee7  #ba68c8

Greys: #f7f7f7, #555, #333, #888, #eee;
*/
/* ===================== */

/* ===================== */
/* Typography */

/*  10px 12px 14.4px 17.28px 20.74px 24.88px 29.86px
    35.83px 43px 51.6px 61.92px 74.3px 89.16px
*/
/* ===================== */

/* ===================== */
/* Spacing*/
/* 2 4 8 16 32 48 64 80 96 112 128 144 160 px  */
/* ===================== */

/* ===================== */
/* Border radius */
/* 9px 11px */
/* ===================== */

/* ===================== */
/* Box shadow */
/* ===================== */