/* variable */

:root{

--hue: 350;

--base-color: hsl(var(--hue) 60% 60%);
--base-color-second: hsl(var(--hue) 65% 88%);
--base-color-alt: hsl(var(--hue) 57% 53%);
--title-color: hsl(var(--hue) 99% 8%);
--text-color:  hsl(0 20% 40%);
--text-color-light: hsl(0 30% 98%);
--body-color: hsl(0 80% 98%);

/* fonts */
--title-font-size: 1.875rem;
--subtitle-font-size: 2rem;

--title-font: 'Zen Maru Gothic', sans-serif;
--body-font: 'Zen Maru Gothic', sans-serif;
}
/* logo */

.logo {
    font: 700 1.31rem var(--title-font);
    color: var(--title-color);                
}

.logo span {
    color: var(--base-color);
 }
  
  .logo-alt span {
    color: var(--body-color);
}

/* header */

.header {    
    border-bottom: 1px solid rgb(214, 92, 113);
    margin-bottom: 1px;

    height: 15vh;
    width: 100%;

    display: block;
   
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color:var(--text-color-light);
    width: 100%
}    

/* body */

html {
    scroll-behavior: smooth;
}

body {
    font: 400 1rem var(--body-font);
    color: var(--text-color);
    background: var(--body-color);    
}

nav{
    height:5vh;
    width: 100%; 
    
}      

/* ID */

#logo{
    text-align: right;
    margin-right: 5%;          
}
#title{
    text-align: center;
    color: black;

    font: var(--title-font);
    font-size: var(--title-font-size);
}

/* classe */

.subtitle{
    
    margin-top:20vh;
    margin-left: 30px;    
    color:  var(--text-color);  
    font: var(--title-font);
    font-size: 1.5rem;  

}


.profile{   
    border-radius: 100%;
    height: 70px;
    margin-right: 25px;

}

.testimonials{
    padding: 2%;
    margin-top: 1vh;  
}

.color-white{
    padding: 30px;
    border-radius: 15px;
    background-color: white;
    
    font-family: var(--body-font);    
}

footer p{
    margin-left:30px;
    margin-bottom: 50px;

    text-indent: 30px;

    font: var(--title-color);
}

a{
    text-decoration: none;
}