/* 
    Body Background color; #fcfcfd; Athens Gray,
    Body Text color ; #272d32; Shark,
    Header/Footer Backgroud color; #ffffff,
    Header/Footer Text color; #004182; Congress Blue
    
*/


/* Google font */
@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&family=Iceberg&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Oswald:wght@200..700&family=Russo+One&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap');
/* From love running project */
/* Asterisk wildcard selector to override default styles added by the browser */
* {
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}

/* HTML & BODY SETUP
   Ensure the page takes full height */
html, body {
    height: 100%;       /* Make HTML and BODY take full viewport height */
    margin: 0;          /* Remove default margin */
}

/* BODY FLEX CONTAINER
   Arrange header, main, and footer vertically */
body {
    display: flex;           /* Use flexbox for layout */
    flex-direction: column;  /* Stack elements vertically */
}
/* Main content styles:
   - Tinos font family
   - Light gray background (#fcfcfd)
   - Dark gray text (#272d32)
   - Inner padding for spacing
   - Rounded corners
   - Subtle box-shadow for depth */
main {
    font-family: "Tinos", sans-serif;
    background-color: #fcfcfd;
    color: #272d32;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* White background as specified in color scheme */
#navbar {
    background-color: #ffffff; 
}

/* Logo styles:
   - Uses Tinos font
   - Extra large font size
   - White background and blue text (#004182)
   - Very bold font weight for strong emphasis */
#logo {
    font-family: "Tinos", sans-serif;
    font-size: xx-large;
    background-color: #ffffff;
    color: #004182;
    font-weight: 1000;
}

/* Common button style */
.btn-custom {
    background-color: #004182;  /* Base background color */
    color: white;               /* Text color */
    border-color: #004182;      /* Border color matching background */
    border-radius: 10px;          /* Rounded corners */
    margin-top: 10px;             /* Space above each button */
    padding: 10px 20px;           /* Button padding (vertical | horizontal) */
    cursor: pointer;              /* Pointer cursor on hover */
    transition: background-color 0.3s, color 0.3s;  /* Smooth transition for hover */
}

/* Hover effect for the button */
.btn-custom:hover {
    background-color: steelblue;    /* Softer blue hover */
    color: white;                   /* Keep text color white */
    border-color: steelblue;        /* Border color changes with background */
}
/* Portfolio page specific buttons 
   - Target only .btn-custom inside #portfolio 
   - Set background color, text color, border radius, padding, and smooth transition */
#portfolio .btn-custom {
    background-color: #004182;  /* Base blue color */
    color: white;               /* Text color */
    border-color: #004182;      /* Border color matching background */
    border-radius: 10px;          /* Rounded corners */
    padding: 10px 20px;           /* Vertical and horizontal padding */
    transition: background-color 0.3s, color 0.3s;  /* Smooth hover transition */
}

/* Hover effect for portfolio buttons */
#portfolio .btn-custom:hover {
    background-color: steelblue;  /* Lighter blue on hover */
    color: white;                 /* Keep text color white */
    border-color: steelblue;      /* Match border with hover background */
}
/* Contact page specific buttons 
   - Target only .btn-custom inside #contact 
   - Set background color, text color, border radius, padding, and smooth transition */
#portfolio .btn-custom {
    background-color: #004182;  /* Base blue color */
    color: white;               /* Text color */
    border-color: #004182;      /* Border color matching background */
    border-radius: 10px;          /* Rounded corners */
    padding: 10px 20px;           /* Vertical and horizontal padding */
    transition: background-color 0.3s, color 0.3s;  /* Smooth hover transition */
}

/* Hover effect for contact buttons */
#portfolio .btn-custom:hover {
    background-color: steelblue;  /* Lighter blue on hover */
    color: white;                 /* Keep text color white */
    border-color: steelblue;      /* Match border with hover background */
}
/* Contact page specific buttons 
   - Target only .btn-custom inside #contact 
   - Set background color, text color, border radius, padding, and smooth transition */
#contact .btn-custom {
    background-color: #004182;  /* Base blue color */
    color: white;               /* Text color */
    border-color: #004182;      /* Border color matching background */
    border-radius: 10px;          /* Rounded corners */
    padding: 10px 20px;           /* Vertical and horizontal padding */
    transition: background-color 0.3s, color 0.3s;  /* Smooth hover transition */
}

/* Hover effect for contact buttons */
#contact .btn-custom:hover {
    background-color: steelblue;  /* Lighter blue on hover */
    color: white;                 /* Keep text color white */
    border-color: steelblue;      /* Match border with hover background */
}

/* Profile section spacing */
#profile {
    margin-top: 8%;             /* Space above the profile section */
    margin-bottom: 8%;         /* Space below the profile section */
}

/* Image styling */
img {
    width: 60%;                  /* Set image width to 60% of its container */
}

/* Greeting text styling */
#greeting {
    font-size:larger;           /* Increase the font size for the greeting text */
}

/* FOOTER
   Always stays at the bottom */
footer {
    text-align: center;           /* Center text */
    padding: 20px 0;              /* Vertical spacing */
    background-color: #ffffff;  /* White background */
}

/* Sets the font size for paragraphs inside the "about" section */
#about p {
    font-size: 20px;
}

h1 {
    margin-top: 10px;   /* Adds spacing above all h1 headings */
    padding: 2rem;      /* Adds padding inside h1 for spacing */
}

small,
h3,
ul {
    padding-top: 5px;     /* Adds space above small text, h3 headings, and unordered lists */
    padding-bottom: 5px;  /* Adds space below small text, h3 headings, and unordered lists */
}

.skills ul,
.experiences ul {
  list-style: none;   /* Removes default bullet points */
  padding-left: 0;    /* Removes default left padding */
}

ul li {
    font-size: 18px;  /* Sets font size for all list items */
}

/* Increases font size for <small> elements inside .job 
(overrides the default "small" style, which usually makes text smaller) */
.job small {
    font-size: 15px;
}

/* Skills logo container 
   - Use flexbox to arrange logos vertically 
   - Center logos both horizontally and vertically 
   - Add top margin for spacing */
.skills .skill-logos {
    display: flex;
    flex-direction: column;  /* Arrange logos vertically */
    justify-content: center;  /* Center vertically */
    align-items: center;      /* Center horizontally */
    margin-top: 1rem;         /* Space above the logos */
}

/* Each individual logo box 
   - Fixed width and height for uniform size */
.skills .skill-logos .logo {
    width: 190px;   /* Set width */
    height: 190px;  /* Set height */
}

/* Logo images 
   - Scale images to fit the box 
   - Make them circular */
.skills .skill-logos img {
    max-width: 100%;      /* Ensure image does not exceed container width */
    max-height: 100%;     /* Ensure image does not exceed container height */
    border-radius: 50%;   /* Make image circular */
}

.social-links {
    font-size: 32px;
}

/* Responsive adjustment for smaller screens (mobile) 
   - Reduce logo size to fit smaller viewport */
@media (max-width: 768px) {
    .skills .skill-logos .logo {
        width: 120px;
        height: 12
    }}