style.css

    body{
        background: #e5e5e5;
        color: #25282B;
       /* text-align: justify;*/
        margin: 0;
        font-family: 'Montserrat', sans-serif;
    }
 body.hideScroll{
     overflow: hidden; /*tira as rolagens*/
 }
    
    a{
        color: #ff5E84;
        font-weight: bold;
        text-decoration: none;
    }

    a:hover{
        text-decoration: underline;
    }
    
    .p, .description{
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 0.1px;

    }

    #container{
        max-width: 980px;
        width: 90%;
        margin: 40px auto;

        display: flex;
    }

    #intro{
        width: 300px;
        margin-right: 64px;
    }

    main{
        margin:32px  0;
    }
   

    #buttons{
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 32px;
    }

    button{
        border: none;
        color: #ff5E84;
        font-weight: bold;
        
        background: none;
        cursor: pointer;
        outline: none;

        font-size: 14px;
        font-weight: bold;
        line-height: 18px;
        letter-spacing: 0.2px;
    }

    button:hover{
        text-decoration: underline;
    }

   #buttons, footer{
       text-align: center;
   }

 
    footer{
        text-align: center;

        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0.2px;
        text-decoration: none;
        color: #7777;
        }

    footer a{
        opacity: 0.7;
       color: #25282B;
       text-decoration: none;
    }

    footer:hover{
        color: #ff5E84;
        font-weight: bold;
    }

    .idea{
        display: flex;
        margin-bottom: 32px;
        border-radius: 8px;
        background-color: #FFF;
        box-shadow:  0 4px 16px -8px rgba(1, 1, 1, 0.1);
        padding: 20px;
        
    }
    .idea img{
        height: 60px;
        width: 60px;
        
        margin-right: 32px;
        
    }
    .idea h3{
        margin: 0;
    }
    .idea p{
        margin: 8px 0;
        color:#7777;
    }
    .idea .description{
        margin: 16px 0;
    }

    /*Modal*/
    #modal{
        background: #ff5E84;
        position: absolute;

        top:0;
        bottom: 0;
        right: 0;
        left: 0;

        display: flex;
        align-items: center;
        justify-content: center;

    }

    #modal.addScroll{
        overflow: auto;
    }

    #modal .content{
        margin-top: 20%;
        color: white;
    }

    #modal .content h1{
        text-align: center;
        text-transform: uppercase;
    }

    #modal form{
        max-width: 800px;
        width: 80%;

        margin:  0 auto 20%;

        display: grid;
        grid-template-columns: 1fr 1fr ;
        gap: 20px;
    }
/*agrupamento de ideias-pseudo elemento (pega o elemento de dentro do form*/
.content form div:nth-child(3),
.content form div:nth-child(4), 
.content form div:nth-child(5){
        grid-column: span 2 ;
    }

    form a{
        width: 150px;
        height: 40px;
        background-color: #ffffff22;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        border-radius: 6px;
        align-self: end;
        font-weight: bold;
        transition:all 400ms;
    }
    form a:hover{
        background: #fff;
        color: #ff5E84;
        text-decoration: none;

    }
  form  input,
    form textarea{
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(141,25,52,0.5);
    
    box-sizing: border-box;
    font-size: 19px;
    outline: none;
    }

    form label{
        font-weight: 600;
        line-height: 32px;
        letter-spacing: 0.8px;
    }
    form button{
        background: white;
        width: 150px;
        height: 40px;
        border-radius: 6px;
        cursor: pointer;

        margin-top: 32px;
        grid-column: 2;
        justify-self: end;

    }

    form button:hover{
        background-color: #0984e3;
        text-decoration: none;
        color: white;

    }

    #modal.hide{
        display: none;
        opacity: 0;
        visibility: hidden;/*mostra a sobre pagina sem dar conflito*/
    }

    #modal.hide{
        display: none;
    }
    /*Ideia-html*/

    #page-ideas #container{
        display: block;
    }
    header{
        display: flex;
        justify-content: space-between;
    }
    #page-ideas nav{
        display: flex;
        align-items: center;
    }
    #page-ideas nav li{
        list-style-type: none;/*marcações de º do menu*/
        margin-right: 14px;
    }

    #page-ideas nav li a{
        color: #25282B;
    }

    #page-ideas nav li a.button{
        color: #ff5E84;
    }


    #page-ideas nav li:last-child{/* last-child pega o elemento do  ultimo do menu */
        margin: 0;  
    }

    #page-ideas nav li:last-child a{/* aqui a cor está acessando o child direto sem ter conflito com o pai*/
        color:#ff5E84;
        height: 40px;
        width: 150px;
        text-decoration: none;
        background-color: #0984e3;
        
        background: #ff5E84;;
        color: white;
        width: 150px;
        height: 40px;
        border-radius: 6px;/*60 0; arredondamento*/
        box-shadow: 0px 8px 16px  #ff5E8432;

        font-size: 14px;
        font-weight: bold;
    
        
        border-radius: 8px;
        display: flex;
        background-color: #ff5E84;
        align-items: center;
        justify-content: center;


    }

    .button{
        background: #ff5E84;;
        color: white;
        width: 150px;
        height: 40px;
        border-radius: 6px;/*60 0; arredondamento*/
        box-shadow: 0px 8px 16px  #ff5E8432;

        font-size: 14px;
        font-weight: bold;
    
        
        border-radius: 8px;
        display: flex;
        background-color: #ff5E84;
        align-items: center;
        justify-content: center;

    }
    .buton:hover{
        text-decoration: none;
        background-color: #0984e3;
    }
    

    #page-ideas nav li:last-child a:hover{
    
        text-decoration: none;
        
    }
section#title{
    text-align: center;
    /*margin-top: 64px 0;*/
}

section#title p{
    opacity: 0.7;
    margin: 0;
}
section#title h1{
    margin: 0;
    font-size: 28px;
}

section#ideas {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap:  29px;
}

section#ideas .idea{
    margin: 0;
}
/*agrupamento*/
section#ideas,
section#title,
footer {
    margin-top: 64px;
}