body {
    font-family      : 'Roboto', sans-serif;
    background-color : #f5f5f5;
    color            : #333;
}

body h1, body .footer-text {
    font-family : 'Press Start 2P', cursive;
    color       : #7959ef;
}

.footer-text {
    font-size : 1.2rem;
    color     : #f8f9fa;
}

footer {
    background-color : #333;
    color            : #f8f9fa;
    padding          : 20px 0;
}

.avatar-container {
    width  : 150px;
    height : 150px;
}

.avatar {
    width         : 100%;
    height        : 100%;
    object-fit    : cover;
    border-radius : 50%;
}

.about-me-row {
    align-items : center;
}

.navbar-custom {
    background-color : #333;
    color            : #f5f5f5;
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
    color       : #f5f5f5;
    font-family : 'Press Start 2P', cursive;
    text-align  : center;
}

.navbar-custom .nav-item {
    margin : 0 10px;
}

.navbar-custom .nav-link.active {
    color           : #7959ef;
    text-decoration : underline;
}

.navbar-custom .nav-link:hover {
    color : #7959ef;
}

.content-image {
    transition : all 600ms ease-in-out;
}

.row:hover .content-image {
    transform : scale(1.2);
}

.align-right {
    text-align : right;
}

.align-left {
    text-align : left;
}

.btn-purple {
    background    : #7959ef;
    border        : 1px solid #7959ef;
    border-radius : 4px;
    color         : #fff;
}

.btn-purple:hover {
    background : #5e36ef;
    border     : 1px solid #5e36ef;
    color      : #fff;
}


.navbar-toggler {
    background-color : #f5f5f5 !important;
}

.hero-banner {
    text-align : center;
    padding    : 50px 0;
}

.video-section {
    text-align : center;
    padding    : 50px 0;
}