@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=League+Spartan:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

body{
 background-color: hsl(300, 24%, 96%);
 font-family:'League-Spartan', 'Poppins', 'Opens-Sans';
 width: 100%;
 height: 100vh;
 margin: 0 auto;
 max-width: 90rem;
 font-size: 15px;
}
.mobile{
    visibility: hidden;
   }

.desktop{
    visibility:visible;
   }

@media (max-width:23.4375rem) {
   .desktop{
    visibility: hidden;
   }
   .mobile{
    visibility: visible;
   }
   

   .top{
    position: absolute;
    left: 0;
    top: 0;
   }

   .bottom{
    position: absolute;
    right: 0;
    bottom: 0;
   }

   main{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

     .principal h1{
        font-weight: 600;
        text-align: center;
        font-size: 1.9rem;
        width: 250px;
        line-height: 25px;
        color:hsl(300, 43%, 22%);
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .principal .conteudo{
        color:hsl(303, 10%, 53%);
        font-weight: 400;
        font-size: 0.8rem;
        text-align: center;
        width: 287px;
    }

    .nota-1 img{
       position: relative;
       left: 40px;
    }

    .nota-1{
        background-color: hsl(300, 28%, 91%);
        padding: 10px 50px;
        color: hsl(300, 43%, 22%);
        font-weight: 600;
        border-radius: 5px;
    }

    .nota-2 img{
       position: relative;
       left: 55px;
    }

    .nota-2{
        background-color: hsl(300, 28%, 91%);
        padding: 10px 40px;
        color: hsl(300, 43%, 22%);
        border-radius: 5px;
        font-weight: 600;
    }

    .nota-3 img{
       position: relative;
       left: 40px;
    }

    .nota-3{
        background-color: hsl(300, 28%, 91%);
        padding: 10px 50px;
        color: hsl(300, 43%, 22%);
        font-weight: 600;
        border-radius: 5px;
    }
}

footer{
    display: flex;
    flex-direction: column;
     justify-content: center;
     align-items: center;
     margin-top: 20px;

    .cliente-1, h2{
       margin-bottom: 10px;
       background-color: hsl(300, 43%, 22%);
       border-radius: 10px;
       display: flex;
       color: white;
    }

    .cliente-2, h2{
       margin-bottom: 10px;
       background-color: hsl(300, 43%, 22%);
       border-radius: 10px;
       display: flex;
       color: white;
    }

    .cliente-3, h2{
        margin-bottom: 10px;
       background-color: hsl(300, 43%, 22%);
       border-radius: 10px;
       display: flex;
       color: white;
    }
    
    .Colton, .Anne, .Irene{
        border-radius: 50%;
        height: 50px;
        margin: 15px;
    }

   h3{
    color: hsl(333, 59%, 58%);
    flex-direction: column;
   }
    p{
        flex-direction: column;
    }

}
}