@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: hsl(217, 54%, 11%);
    font-family: 'Outfit';
    font-size: 18px;
}

    .container {
        position: relative;

        height: 100vh;
    }

        .content {
            position: absolute;

            top: 50%;
            left: 50%;

            transform: translate(-50%, -50%);
        }

            #card {
                background-color: hsl(216, 50%, 16%);
                width: 300px;
                padding: 20px;
                border-radius: 15px;
                box-shadow: 0px 15px 30px 20px rgba(0, 0, 0, 0.212);
            }


                .container-overlay {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    display: inline-block;
                }

                    .nft-image {
                        display: block;
                        border-radius: 10px;
                        width: 100%;
                        height: 100%;
                    }

                    .content-overlay {
                        position: absolute;
                        transition: all .3s ease;
                        opacity: 0;
                        border-radius: 10px;

                    }    
                    
                    .overlayFade {
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        border-radius: 10px;
                        background-color: hsla(178, 100%, 50%, 0.397);
                    }

                        .view {
                            position: absolute;

                            top: 50%;
                            left: 50%;
                            
                            transform: translate(-50%, -50%);
                        }

                        .container-overlay:hover .overlayFade {
                            width: 100%;
                            opacity: 1;
                            cursor: pointer;
                        }

                h1 {
                    padding-top: 15px;
                    padding-bottom: 15px;
                }

                    a.name {
                        color: white;
                        font-weight: 600;
                        text-decoration: none;
                    }

                    a.name:hover {
                        color: hsl(178, 100%, 50%);
                    }

                p {
                    color: hsl(215, 51%, 70%);
                    font-weight: 300;
                    padding-bottom: 25px;
                }

                ul {
                    list-style: none;
                    columns: 2;
                    font-size: 0.9em;
                }

                    ul>li.price {
                        color: hsl(178, 100%, 50%);
                        background-image: url('images/icon-ethereum.svg');
                        background-repeat: no-repeat;
                        background-position: left center;
                        padding-left: 20px;
                    }

                    ul>li.timer {
                        text-align: right;
                        color: hsl(215, 51%, 70%);
                        background-image: url('images/icon-clock.svg');
                        background-repeat: no-repeat;
                        background-position: center;
                        margin-left: -35px;
                    }

                hr {
                    background-color: hsla(215, 52%, 70%, 0.377);
                    height: .1px;
                    border: none;
                    margin-top: 25px;
                    margin-bottom: 20px;
                }

                .container-author {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                }

                    .author-image {
                        height: 30px;
                        width: 30px;
                        background-image: url('images/image-avatar.png');
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: 100%;
                        border: 1px solid white;
                        border-radius: 50%;
                        margin-right: 20px;
                    }

                    .text-author > p{
                        font-size: 0.9em;
                        padding-bottom: 0px;
                    } 

                        .text-author > p > a {
                            color: white;            
                            text-decoration: none;
                        }
                    
                            .text-author > p > a:hover {
                                    color: hsl(178, 100%, 50%);
                            }

            .attribution {
                margin-top: 10px;
                color: hsl(215, 51%, 70%);
            }

                .attribution a {
                    text-decoration: none;
                }