* {
    font-family: 'Source Sans Pro';
    font-weight: 300;
}

:root {
    --bg: #222727;
    --item: #3a4242;
    --txt-main: #d8d8d8;
    --txt-sec: #adb4c2;
    --glow-main: 0 -1px 4px #FFF, var(--glow-normal);
    --glow-normal: 0 -2px 10px rgb(0, 255, 242), 0 -10px 20px #00f7ffb2, 0 -18px 40px rgb(0, 255, 234);
}

b {
    font-weight: 700;
}

body {
    background-color: var(--bg);
    text-align: center;
    color: var(--txt-sec);
}

.mccoder99 {
    display: inline-block;
    font-size: 5rem;
    margin-bottom: -1rem;
    margin: 0%;
    margin-top: 1rem;
    text-align: center;
    transition-duration: 1s;
    animation: .7s top-slide;
    color: var(--txt-main);
}

.mccoder99:hover {
    color: white;
    text-shadow: var(--glow-main);
    transition-duration: 5s;
}

.sub-header {
    font-size: 1.75rem;
    margin: 1.5%;
    margin-bottom: 3rem;
    margin-top: 0%;
    animation: .7s left-slide;
}

@keyframes top-slide {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes left-slide {
    0% {
        transform: translateX(-5%);
    }

    100% {
        transform: translateX(0%);
    }
}

.container {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    margin: 2%;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5%;
    margin-top: 3%;
    margin-bottom: 0%;
    height: 30%;
}

.item {
    margin: .85rem;
    width: 400px;
    min-width: 300px;
    height: 200px;
    border-radius: .75rem;
    font-size: 3rem;
    background-color: var(--item);
    transition-duration: 0.2s;
    overflow: hidden;
    animation: .7s item-slide;
}

@keyframes item-slide {
    0% {
        transform: translateX(10%);
    }

    100% {
        transform: translateX(0%);
    }
}

.title-item {
    margin-right: 5%;
}

.item:hover {
    transform: scale(1.1);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,0.3), 0 1rem .5rem rgba(0,0,0,0.22)
}

.item:hover .title-txt {
    color: white;
    text-shadow: var(--glow-normal)
}

.title-img {
    height: 80%;
}

.title-txt {
    font-size: 70%;
    color: var(--txt-main);
}

.body-txt {
    font-size: 44%;
    margin: 5%;
    margin-bottom: 0%;
    margin-top: 1.5%;
    color: rgb(200, 214, 226);
}

.body-url {
    display: inline-block;
    position: relative;
    top: -8%;
    color: #5fe7ff;
    font-size: 40%;
}

.body-url:hover {
    color: #00d9ff;
    text-decoration: underline;
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}