/* css cards for page 2 */
.skill-card {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 300px;
    height: 400px;
    
    box-shadow: 11px 10px 16px 0px rgba(0,0,0,0.62);
    -webkit-box-shadow: 11px 10px 16px 0px rgba(0,0,0,0.62);
    -moz-box-shadow: 11px 10px 16px 0px rgba(0,0,0,0.62);
    overflow: hidden;
    border-radius: 15px;
}

.skill-card::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 100%;
    background: hsl(150, 58%, 46%);
    animation: animate ease-in-out infinite 60s;
}

.skill-card::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: hsl(220, 6%, 10%);
}

@keyframes animate {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

.skill-card svg {
    z-index: 10;
}

/* css cards for page 3 */
.project-card, form {
    display: grid;
    place-content: center;
    width: 300px;
    height: 500px;
    border-radius: 15px;
    box-shadow: 11px 10px 16px 0px rgba(0,0,0,0.62);
    -webkit-box-shadow: 11px 10px 16px 0px rgba(0,0,0,0.62);
    -moz-box-shadow: 11px 10px 16px 0px rgba(0,0,0,0.62);
}

.project-buttons {
    display: flex;
    justify-content: center;
}

.link-btn {
    display: flex;
    justify-content: center;
    padding: 1em;
}

@media screen and (max-width: 650px) {
    .skill-card {
        width: 200px;
        height: 300px;
    }

    .project-card {
        width: 220px;
    }
}