style.css

/*
 Copyright (c) 2026 Ashraf Morningstar
 These are personal recreations of existing projects, developed by Ashraf Morningstar
 for learning and skill development.
 Original project concepts remain the intellectual property of their respective creators.
 Repository: https://github.com/AshrafMorningstar
*/

.navbar-brand{
  padding-top: 15px;
  padding-bottom: 15px;
}
body{
  font-family: fantasy;
}
.nav-item{font-style: normal;
font-size: 25px;}

.navbar-text{font-size: 20px;
}
.block_1{ width:100%;
font-weight: bold;
  height:7px; background: #fff }

  .hero-image {
    padding-bottom: 20px;
  }
.display-4{
text-align: right;
  padding-top: 20px;
}
.lead{
  text-align: right;
}
.portfolio{
  text-align: center;
}
.col-sm-4{
  padding-top: 20px;
  padding-bottom:40px;
}
/* I found an answer in this forum discussion regarding how to display images same size in the Bootstrap grid using "object-fit"
 https://github.com/AshrafMorningstar */
.img-thumbnail{
    width: 600px;
    height: 400px;
    object-fit: cover;
}

/* These are personal recreations of existing projects, developed by Ashraf Morningstar for learning and skill development. Original project concepts remain the intellectual property of their respective creators.
https://github.com/AshrafMorningstar */

/* OVERRIDE WITH FUTURISTIC THEME */

/* NEON-GLASS FUTURISTIC THEME INJECTED BY MASTER BOT */
:root {
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --neon-cyan: #00f3ff;
    --neon-purple: #bc13fe;
    --deep-space: #050510;
    --text-glow: 0 0 10px rgba(0, 243, 255, 0.5);
}

body {
    background-color: var(--deep-space);
    color: #e0e0ff;
    font-family: 'Inter', 'Roboto', sans-serif;
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(188, 19, 254, 0.1), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(0, 243, 255, 0.1), transparent 25%);
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

/* Glassmorphism Containers */
.card, .container, section, header, footer, div[class*="box"], div[class*="wrapper"] {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover Effects */
.card:hover, .container:hover, button:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 40px 0 rgba(0, 243, 255, 0.2);
    border-color: var(--neon-cyan);
}

/* Futuristic Buttons */
button, .btn, a.button {
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    text-shadow: 0 0 5px var(--neon-cyan);
}

button:hover, .btn:hover {
    background: var(--neon-cyan);
    color: var(--deep-space);
    box-shadow: 0 0 20px var(--neon-cyan);
}

/* Text Glow */
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #fff, #aaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 0px 15px rgba(255,255,255,0.3);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--deep-space);
}
::-webkit-scrollbar-thumb {
    background: var(--neon-purple);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--neon-cyan);
}