html {
scroll-behavior: smooth;
}
/* The astertisk (*) targets every objects in the scene */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* The root is where we define the global variables */
:root {
--bg-color: #0a0a0a;
--text-primary: #e0e0e0;
--accent-color: #4196f3;
--font-main: "Courier New", Courier, monospace;
}
/* This is the world settings*/
body {
/*usage of the variables*/
background-color: var(--bg-color);
color: var(--text-primary);
font-family: var(--font-main);
/*Spacing between lines*/
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
/* Header */
header{
/* Padding is "internal spacing"
Or more so The distance from wall to content */
padding: 1rem 2rem;
/* Blue Light at bottom */
border-bottom: 2px solid var(--accent-color);
}
/* Navigation Bar */
nav{
/* DISPLAY: FLEX is the magic engine. */
/* It turns this container into a flexible layout manager. */
display: flex;
/* Push items to opposite ends (Left and Right). */
/* Like Vector Math: Position A = 0, Position B = ScreenWidth */
justify-content: space-between;
/* Vertically center the items inside the bar. */
align-items: center;
}
/* Navigation List */
nav ul {
/* Remove default list styling */
list-style: none;
/* Making the list items horizontal */
display: flex;
/* Gap between list items */
gap: 20px;
}
nav a {
/* Link color */
color: var(--text-primary);
/* Remove default link underline */
text-decoration: none;
/* Font weight */
font-weight: bold;
/* Add transition for smooth color change */
transition: color 0.3s
}
/* Hover effect for navigation links */
nav a:hover{
/* Change link color on hover */
color: var(--accent-color);
}
#hero{
/* HEIGHT: 80vh = 80% of the Viewport Height. */
/* It takes up most of the screen. */
height: 80vh;
display: flex;
/* Flexbox properties */
flex-direction: column;
/* Center content vertically and horizontally */
justify-content: center;
align-items: flex-start;
/* Center text horizontally */
text-align: left;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
#hero h1 {
/* Font size and margin */
font-size: 2rem;
line-height: 1.1;
margin-bottom: 1rem;
}
#hero p {
/* Font size and margin */
font-size: 1rem;
color: #888;
max-width: 600px;
margin-bottom: 2rem;
}
#hero button {
/* Button styling */
padding: 10px 30px;
background-color: transparent;
border: 2px solid var(--accent-color);
border-radius: 5px;
color: var(--accent-color);
font-family: inherit;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s;
/* Transition for hover effect */
transition: background-color 0.3s;
}
#hero button:hover {
/* Hover effect for the button */
background-color: var(--accent-color);
color: var(--bg-color);
}
#home-about {
padding: 4rem 2rem;
background-color: #111;
border-bottom: 1px solid #333;
}
.content-wrapper {
max-width: 1200px;
margin: 0 auto;
}
.text-link{
color: var(--accent-color);
text-decoration: none;
font-weight: bold;
margin-top: 1rem;
display: inline-block;
}
.text-link:hover{
text-decoration: underline;
}
#projects {
/* Padding around the projects section */
padding: 4rem 2rem;
max-width: 1800px;
margin: 0 auto;
}
#projects h2{
font-size: 2rem;
margin-bottom: 2rem;
text-align: center;
border-bottom: 1px solid var(--accent-color);
display: inline-block;
}
.project-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px 1fr));
gap: 2rem;
}
.card-link {
text-decoration: none;
color: inherit;
display: block;
}
.project-card{
background-color: #161616;
padding: 1.5rem;
border: 1px solid #333;
border-radius: 8px;
transition: 0.2s ease;
}
.project-card:hover{
transform: translateY(-8px);
border-color: var(--accent-color);
}
.project-card h3 {
margin-bottom: 0.5rem;
color: var(--accent-color);
}
#contact {
text-align: center;
padding: 6rem 2rem;
background-color: #0f0f0f;
border-top: 1px solid #333;
}
#contact p {
margin-bottom: 2rem;
color: #888;
}
/* A prominent Call-To-Action (CTA) button */
.cta-button {
display: inline-block;
padding: 15px 40px;
background-color: var(--accent-color); /* Blue/Green */
color: var(--bg-color); /* Black Text */
font-weight: bold;
text-decoration: none;
border-radius: 4px;
font-size: 1.2rem;
transition: transform 0.2s, box-shadow 0.2s;
}
.cta-button:hover {
transform: scale(1.05);
box-shadow: 0 0 10px var(--accent-color);
}
footer {
padding: 2rem;
text-align: center;
background-color: #000; /* Pitch black */
font-size: 0.9rem;
color: #666;
border-top: 1px solid #333;
}
.social-links {
margin-top: 1rem;
display: flex;
justify-content: center;
gap: 1.5rem;
}
.social-links a {
color: #888;
text-decoration: none;
transition: color 0.3s;
}
.social-links a:hover {
color: var(--accent-color);
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*==========Animation============*/
#hero h1 {
animation-name: slideUp;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
#hero p {
animation: slideUp 1s ease-out forwards;
animation-delay: 0.2s;
opacity: 0;
}
#hero button {
animation: slideUp 1s ease-out forwards;
animation-delay: 0.4s;
opacity: 0;
}
/*==========Responsive Design============*/
@media (max-width: 760px) {
nav {
flex-direction: column;
gap: 1rem;
}
nav ul {
gap: 15px;
font-size: 0.9rem;
}
#hero h1 {
font-size: 1.5rem;
}
#projects {
padding: 2rem 1rem;
}
}
/*============= Scrollbar Styling ==========*/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #333;
border-radius: 5px;
border: 1px solid var(--bg-color);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--accent-color);
}
::-webkit-scrollbar-track {
background-color: var(--bg-color);
}