@import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap');

*{
    color: #1D7A7A;
    margin: 0;
    padding: 0;
    font-family: "Inclusive Sans", sans-serif;
}

html{
    background: transparent;
    /* border: 0.2rem solid #B6E3E3; */
    
}

body{
    border-radius: 0.5rem;
    background: #EEFCFC;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.2rem;
    /* align-items: stretch;  */
    min-width: 22rem;
    padding: 0.5rem;
    
    .guppyProfilePicture{
        justify-items: stretch;

        img{
            max-width: 8rem;
            height: 100%;
            object-fit: cover;
        }
    }

    header{
        padding-block: 0.5rem;
        h1{
            font-size: 1.4rem;
            margin-block-end: 0.4rem;
            font-family: "Lemon", serif;
        }
    
        p{
            font-size: 0.8rem;
            font-weight: 400;
            color: rgba(29, 122, 122, 0.787);
            margin-block-end: 0.8rem;

        }

        a{
            text-decoration: none;
        }

        a:hover{
            background-color: #CFF6F6;
            color: #1D7A7A;
            
        }

        #seeBowl{
            display: none;
            background-color: #1D7A7A;
            padding-block: 0.4rem;
            padding-inline: 0.6rem;
            border: none;
            color: white;
             border-radius: 0.4rem;
            font-size: 0.8rem;
        }

        #seeBowl:hover{
            background-color: #125454;

        }
    }
}