#Skills,#Certifications{
    width:90%;
}
.projects,.small-projects,.skills,.certifications{
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    flex-wrap: wrap;
}
    .card-background,.skill-background,.certification-background{
        display: flex;
        width:280px;
        height:400px;
        margin:30px;
        border-radius: 15px;
    }
    .card,.screen,.skill,.certification{
        flex:1;
        position:relative;
        margin:0;
        box-shadow: 20px 20px 50px rgba(0,0,0,.5);
        border-radius: inherit;
        background:rgba(255,255,255,.1);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top:1px solid rgba(255,255,255,.5);
        border-left:1px solid rgba(255,255,255,.5);
        transition: 0.5s;
    }
        .card:hover,.screen:hover,.skill:hover,.certification{
            backdrop-filter: blur(5px);
        }
            .card:hover .card-content,.screen:hover .screen-content,.skill:hover .skill-description{
                transform:translateY(0vh);
                opacity:1;
            }
        .card-content,.screen-content,.skill-description{
            padding:20px;
            text-align:center;
            transform:translateY(100vh);
            opacity:0;
            transition: .5s;
            background-color: --card-bg;
        }
            .card-content h2{
                font-family: "Poppins",sans-serif;
                position:absolute;
                top:-15vh;
                right:20px;
                font-size: 8em;
                color:rgba(255,255,255,.7);
                pointer-events: none;
            }
            .card-content h3,.skill-description h3,.certification-text h3{
                font-family: "Poppins",sans-serif;
                font-size:1.3em;
                margin-top: 25px;
                font-weight: bolder;
                /*text-align: center;*/
                text-indent: 15px;
                text-align:left;
            }
            .card-content p,.skill-description p,.certification-text p{
                font-size:1em;
                padding:5px;
                text-align:left;
            }
            .card-content a,.screen-content a,.certification-text a{
                font-family: inherit;
                position:inherit;
                display:inline-block;
                padding: 8px 20px;
                margin-top:15px;
                background: var(--button-bg);
                color:var(--button-text-color);
                border-radius: 20px;
                text-decoration: none;
                box-shadow:0 5px 15px rgba(0,0,0,.5);
                transition: .2s ease-out;
            }
                .card-content a:hover,.screen-content a:hover,.certification-text a:hover{
                    background:var(--hover--button-bg);
                    color:var(--hover--button-text-color);
                }
            .card-background:nth-child(1){
                background:url("../img/projects/Reactify.png") no-repeat center;
                background-size:cover;
            }
            .card-background:nth-child(2){
                background:url("../img/projects/Mentorify.png") no-repeat center;
                background-size:cover;
            }
            .card-background:nth-child(3){
                background:url("../img/projects/a_django_portfolio.png") no-repeat center;
                background-size:cover;
            }
        
    .screen-background .screen .screen-content h3,.screen-background .screen .screen-content p{
        color:var(--card-text-color);
    }
    .screen-background .screen .screen-content p{
        font-size: .7em;
    }
    .screen-background:nth-child(1){
        background:url("../img/projects/Hacker-News-Snapshot.png") no-repeat center;
        background-size:cover;
        
    }
    .screen-background:nth-child(2){
        background:url("../img/projects/Emoji-Memory-Game-Snapshot.png") no-repeat center;
        background-size:cover;
        
    }
    .screen-background:nth-child(3){
        background:url("../img/projects/Flappy-Bird-Snapshot.png") no-repeat center;
        background-size:cover;
        
    }
/*------------------------------------------------------------------------------*/
        .prj-transition{
            margin:20px 0 20px 0;
        }
        #first-snippet{
            color: var(--dark-snippets);
        }
        #second-snippet{
            color: var(--light-snippets);
        }
        #go-to-2{
            color: var(--anchors);
        }
/*------------------------------------------------------------------------------*/
.screen-background{
    display: flex;
    width:350px;
    height:230px;
    margin:30px;
    border-radius: 15px;
}
        .screen-content h3{
            font-family: "Poppins",sans-serif;
            font-size:1.8em;
            margin-top: 25px;
            font-weight: bolder;
            /*text-align: center;*/
            text-indent: 15px;
            text-align:left;
        }
        .screen-content p{
            font-size:1em;
            padding:5px;
            text-align:left;
        }   
/*------------------------------------------------------------------------------*/
        .go-to-skills .bx-down-arrow-alt{
            display: none;
            animation-name:alternative-disappear;
            animation-duration:.6s;
        }
            .go-to-skills:hover .bx-down-arrow-alt{
                display: block;
                transform: scale(1.5);
                animation-name:alternative-appear;
                animation-duration: .6s;
            }
            .go-to-skills:not(:hover) .bx-down-arrow-alt{
                display:none;
                animation-name: alternative-disappear;
                animation-duration: .6s;
            }
        .go-to-skills:hover .bx-chevron-down{
            display: none;
            animation-name: alternative-disappear;
            animation-duration: .6s;
        }
        .go-to-skills:not(:hover) .bx-chevron-down{
            display:block;
            animation-name: alternative-appear;
            animation-duration: .6s; 
        }
 /*------------------------------------------------------------------------------*/


    .skill-background .skill .skill-description h3, .skill-background .skill .skill-description p{
        color:var(--card-text-alt-color);
    }

    .skill-background:nth-child(1){
        background:url("../img/html/logo-200-black.png") no-repeat center;
    }
    .skill-background:nth-child(2){
        background:url("../img/css/logo-200-black.png") no-repeat center;
    }
    .skill-background:nth-child(3){
        background:url("../img/js/logo-200-black.png") no-repeat center;
    }
    .skill-background:nth-child(4){
        background:url("../img/python/logo-200-black.png") no-repeat center;
    }
    .skill-background:nth-child(5){
        background:url("../img/django/logo-200-black.png") no-repeat center;
    }
    .skill-background:nth-child(6){
        background:url("../img/git/logo-200-black.png") no-repeat center;
    }
/*------------------------------------------------------------------------------*/

.certification-text, .certification-text h3{
    text-align: center;
    text-indent:0;
}
.certification-text p{
    margin-left: 10px;
}
    .certification-background:nth-child(1){
        background:url("../img/tdi/logo-200-white.png") no-repeat center;
    }
    .certification-background:nth-child(2){
        background:url("../img/cisco/logo-200-white.png") no-repeat center;
    }
    .certification-background:nth-child(3){
        background:url("../img/cisco/logo-200-white.png") no-repeat center;
    }


/*------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------*/

@media screen and (max-width:600px){
    #Projects,#Skills,#Certifications{
        width:90%;
    }
    .card-background{
        margin:15px;
    }
        .card-content h2{
            top:-10vh;
        }
        .content h3{
            font-family: "Poppins",sans-serif;
            font-size:.9em;
            margin-top: 40px;
        }
        .content p{
            font-size:.6em;
            padding:0;
        }
        .content a{
            font-size: .5em;
            font-weight: bold;
        }
}