@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600&family=Fraunces:opsz,wght@9..144,700;9..144,900&display=swap');
/* font-family: 'Barlow', sans-serif;
font-family: 'Fraunces', serif; */

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

:root {
    --Soft-red: hsl(7, 99%, 70%);
    --Yellow: hsl(51, 100%, 49%);
    --Dark-desaturated-cyan: hsl(167, 40%, 24%); /* (graphic design text) */
    --Dark-blue: hsl(198, 62%, 26%); /* (photography text) */
    --Dark-moderate-cyan: hsl(168, 34%, 41%); /* (footer) */
    --Very-dark-desaturated-blue: hsl(212, 27%, 19%);
    --Very-dark-grayish-blue: hsl(213, 9%, 39%);
    --Dark-grayish-blue: hsl(232, 10%, 55%);
    --Grayish-blue: hsl(210, 4%, 67%);
    --White: hsl(0, 0%, 100%);
}

header {
    background-color: #3dbeff;
}

.header {
    width: 100%;
    height: 88px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.triangulo {
    display: none;
    width: 0;
    height: 0;
    position: fixed;
    top: 61px;
    right: 5%;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent; 
    border-right:25px solid #fffbf8;
}

.menu-ham {
    visibility: hidden;
}

#opcoes:checked ~ .triangulo {
    display: block;
}

.nav {
    visibility: hidden;
    width: 0;
    height: 0;
    position: fixed;
    background: #fffbf8;
    top: 86px;
    left: 5%;
    text-align: center;
}

#opcoes:checked ~ .nav {
    visibility: visible;
    width: 90%;
    height: auto;
}

.nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--Dark-grayish-blue);
    font-family: 'Barlow', sans-serif;
    font-size: 20px;   
    margin: 2rem 0; 
}

.nav a li {
    list-style: none;
}

.contato {
    font-family: 'Fraunces', serif;
    color: var(--Very-dark-desaturated-blue);
    background: var(--Yellow);
    padding: 15px 30px;
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 16px;
}

.header .logo {
    padding: 1rem;
    width: 40vw;
    height: auto;
}

.menu {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
    cursor: pointer;
}

.l1, .l2, .l3 {
    background: var(--White);
    height: .2rem;
    width: 2rem;
    border-radius: .1rem;
}

.l1 {
    margin-top: .1rem;
}

.l1, .l2 {
   margin-bottom: .4rem;
}

.inicio {
    background: url('./images/mobile/image-header.jpg') no-repeat;
    background-size: 100%;
    background-position: bottom;
    height: 385px;
    text-align: center;
}

.inicio h1 {
    text-transform: uppercase;
    font-size: 2.5rem;
    color: var(--White);
    font-family: 'Fraunces', serif;
    margin-top: 4rem;
    letter-spacing: 7px;
    font-weight: 900;
}

.inicio img {
    margin-top: 3rem;
}

.ovo, .copo {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fffbf8;
}

.ovo img, .copo img {
    width: 100%;
}

.info {
    height: auto;
    margin: 3.5rem 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
} 

.info h2 {
    font-family: 'Fraunces', serif;
    color: var(--Very-dark-desaturated-blue);
    font-size: 2rem;
    text-align: center;
    font-weight: 900;
    padding: 0 1rem;
    margin-bottom: 2rem;
}

.info p {
    color: var(--Dark-grayish-blue);
    font-size: 18px;
    font-family: 'Barlow', sans-serif;
    text-align: center;
    padding: 0 1.5rem;
    line-height: 32px;
}

.info a {
    font-family: 'Fraunces', serif;
    text-decoration: none;
    margin-top: 2rem;
    color: var(--Very-dark-desaturated-blue);
    font-weight: 900;
    z-index: 9;
}

.grifado-amarelo {
    background-color: var(--Yellow);
    width: 125px;
    height: 8px;
    border-radius: 4px;
    opacity: .3;
    margin-top: -6px;
    cursor: pointer;
}

.grifado-amarelo:hover {
    opacity: .8;
}

.grifado-rosa {
    background-color: var(--Soft-red);
    width: 125px;
    height: 8px;
    border-radius: 4px;
    opacity: .3;
    margin-top: -6px;
    cursor: pointer;
}

.grifado-rosa:hover {
    opacity: .8;
}

.cereja {
    background: url('./images/mobile/image-graphic-design.jpg') no-repeat;
    background-size: 100%;
    background-position: top;
    height: 600px;
    color: var(--Dark-desaturated-cyan);
}

.cereja h2, .laranja h2 {
    padding-top: 24.5rem;
    font-size: 1.8rem;
    font-family: 'Fraunces', serif;
    font-weight: 900;
    text-align: center
}

.cereja p, .laranja p {
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    padding: 2rem 1rem;
    text-align: center;
    line-height: 25px;
}

.laranja {
    background: url('./images/mobile/image-photography.jpg') no-repeat;
    background-size: 100%;
    background-position: top;
    height: 600px;
    color: var(--Dark-blue);
}

.clientes {
 background: #fffbf8;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 padding-bottom: 1rem;
}

.clientes h3 {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    font-weight: 900;
    color: var(--Grayish-blue);
    padding: 3.6rem 0 4.5rem 0;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.foto-cliente {
    width: auto;
    height: 4.5rem;
    border-radius: 4rem;
}

.relato {
    font-family: 'Barlow', sans-serif;
    color: var(--Very-dark-grayish-blue);
    padding: 2rem;
    line-height: 28px;
    font-size: 17px;
}

.nome {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 900;
    color: var(--Very-dark-desaturated-blue);
    margin-bottom: .5rem;
}

.cargo {
    font-family: 'Barlow', sans-serif;
    color: var(--Grayish-blue);
    margin-bottom: 4rem;
    font-size: 14px;
}

.galeria {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.galeria img {
    width: 50%;
    height: auto;
}

footer {
    background: #90d4c5;
    height: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.logo-footer {
    color: var(--Dark-desaturated-cyan);
    width: 50%;
    height: auto;
    align-self: center;
    margin-top: 4rem;
}

footer nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

footer nav li {
    list-style: none;
    margin: 2rem 0;
}

footer nav li a {
    text-decoration: none;
    color: var(--Dark-moderate-cyan);
    font-family: 'Barlow', sans-serif;
    font-size: 18px;
}

.redes {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin: 3rem 6rem 3rem 6rem;
}

.attribution {
    font-size: 11px;
    text-align: center;
    font-family: 'Barlow', sans-serif;
    color: var(--Dark-moderate-cyan);
    margin: 1rem;
}

.attribution a {
    text-decoration: none;
    color: var(--Dark-desaturated-cyan);
}