/* COLORS */
/* YELLOW #FFFF99 */ 
/* PINK   #FF99CC */

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

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

body {
    margin: 0;
    padding: 0;
    font-family: Poppins;
    /* Only works if there is nothing absolutely positioned in relation to the body*/ 
    overflow-x: hidden;
    
}

.secondary-heading {
    font-size: 4rem;
    padding: 20px;
    color: #530029;
}

.secondary-heading:after {
    display: block;
    height: 2px;
    background-color: #f3007a;
    content: " ";
    width: 100px;
    margin: 0 auto;
    margin-top: 10px;
}

p, strong {
    font-size:  1.5rem;
}

.centering-box {
    text-align: center;
}

.end-box {
    text-align: end;
}

.start-box {
    text-align: start;
}

.btn:link, .btn:visited {
    display: inline-block;
    background-color: #FFFF99;
    color: #FF99CC;
    font-size: 2rem;
    padding: 1.6rem;
    border-radius: 150px;
    text-decoration: none;
}

.btn:hover, .btn:active {
    background-color: YELLOW;
    color: #f3007a;
}

.content {
    max-width: 120rem;
    align-content: center;
    margin: 0 auto;
    padding: 0 3.2rem;
}


.grid {
    display: grid;
    gap: 9.6rem;
}

.grid img {
    height: 30rem;
}

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

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

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

.flex-box-tight {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

h1,
h2,
h3 {
    text-align: center;
    margin: auto;
}