/*Roboto
Ubuntu*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/*Colour reference*/
:root {
    --base-colour: #000;
    --text-colour-bright: #fff;
    --text-colour-dark: #333;
    --github-colour: #000000;
    --linkedin-colour: #8D8DFF;
    --intro-colour: #011936;
    --section-colour: #465362;
    --colour-3: #6e6eff;
    --shadow-colour: rgba(0, 0, 0, 0.10);
    --card-colour: #F9DC5C;
    --project-card: #ED254E;/* #F4FFFD; */
    --contactme-colour: #F4FFFD;
}

/*Removing default spacing to prevent unexpected behaviour*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Defining Text Styles*/
html{
    font-family: Ubuntu, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-colour-bright);
    scroll-behavior: smooth; /* Enables smooth scroll for anchor links */
}

/*Defining Body Styles*/
body {
    padding: 1em;
    background-color: var(--base-colour);
    background-image: url('Images/Wallpaper.svg'); 
    background-size: cover;      /* Make the image cover the whole background */
    background-repeat: no-repeat;/* Prevent tiling */
    background-position: center; /* Center the image */
    background-attachment: fixed; /*Image moves with the page*/
}

/*Defining font for headers*/
h1, h2, h3{
    font-family: 'Roboto', sans-serif;
}

/*Navigation bar styles*/
nav {
    margin: 1em auto 3em auto; /*Margin: Top Right Bottom Left*/
    width: min (1000px, 100%);
    
}

/*Navigation Unordered list*/
nav ul {
    display: flex; /*Display as flex container into horizontal row*/
    align-items: center; /*Centers vertically*/
    list-style-type: none; /*Removes bullet points*/
    gap: 2em; /*Adds space between items*/
}

nav li:first-child {
    /*Adds left margin to first item*/
    margin-right: auto;
    font-family: Roboto Condensed, sans-serif;
    font-weight: bold;
}

nav a {
    /*Anchor tag styles*/
    text-decoration: none;
    color: var(--text-colour);
}

nav a:hover{
    /*Hover effect by underlining for links*/
    text-decoration: underline;
}


header, section{
    /*Vertical spacing, center horizontally*/
    margin: 2em auto;    
    width: min(75em,100%); /*Grow upto 75em wide and not overflow screen*/
    background-color: var(--intro-colour);
    padding: min(2em, 15%);
    border-radius: 1em; /*Adds rounded corners*/
}

.flex-container{
    /*Arrange chart elements side by side*/
    display: flex; 
    justify-content: center; /*Align center horizontally*/
    align-items: center; /*Align center vertically*/
    flex-wrap: wrap; /*Allow items to stack on smaller screens*/
    gap: 3em; /*Adds space between items*/

    opacity:0; /*Adds a fade in animation*/
    animation: fadeIn 2s ease-in forwards;
}
@keyframes fadeIn {
    to {
        opacity: 1;
    }

}

header img {
    max-width: 100%;
    border-radius: 1em;
    object-fit: cover;
    object-position: bottom;
}

.text-container {
    /* flex: grow behaviour, flex shrink, flex basis */
    flex: 0 1 34em;
}

h1{
    font-size: 2.5rem;
}

.text-container p{
    margin: .75em 0 1em 0;
    font-size: 1.25rem;
}

.cta-button {
    display: inline-block;
    text-decoration: none;
    color: white;
    background-color: var(--github-colour);
    padding: .75em 1.25em;
    border-radius: .5em;
    font-weight:600;
    transition: 100ms ease;
}

.cta-button:hover {
    background-color: var(--text-colour-dark);
    scale: 1.05;
}

.secondary {
    color: white;
    background-color: var(--linkedin-colour);
}

.secondary:hover {
    background-color: #5a5aff;
    scale: 1.05;
}

section {
    padding: 3em min(2em, 15%);
    background-color: var(--section-colour);
}

h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1em;
}
h3 {
    font-size: 1.5rem;
}

section p {
    margin-top: 1em;
    font-size: 1.25rem;
}

.text-container ul {
    font-family: 'Roboto', sans-serif; /* List font */
    padding-left: 1em; /* List left padding */
    list-style-type: disc; /* Bullet style */
    font-size: 1.25rem; /* List font size */
}

.skills-grid {
    display: flex; /* Skills grid layout */
    gap: 2em; /* Space between categories */
    justify-content: center; /* Center grid */
    margin-top: 2em; /* Top margin */
}

.skill-category {
    background: var(--card-colour); /* Card background */
    border-radius: 1em; /* Rounded card */
    padding: 1.5em; /* Card padding */
    box-shadow: 0 2px 8px var(--shadow-colour); /* Card shadow */
    flex: 1 1 200px; /* Card flex sizing */
    min-width: 200px; /* Minimum card width */
    text-align: center; /* Center text */
    color: var(--text-colour-dark); /*Text Colour*/
    transition: transform 100ms ease, box-shadow 100ms ease; /* Smooth transition */
}

.skill-category:hover {
    box-shadow: 0 4px 16px var(--shadow-colour); /* Hover shadow */
    transform: translateY(-5px); /* Lift effect */
}

.skill-category h3 {
    margin-bottom: 1em; /* Space below heading */
    font-size: 1.3em; /* Heading size */
    display: flex; /* Icon and text inline */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    gap: 0.5em; /* Space between icon and text */
}

.skill-category ul {
    list-style: none; /* Remove bullets */
    padding: 0; /* Remove padding */
}

.skill-category li {
    margin: 0.5em 0; /* Space between skills */
    font-size: 1.1em; /* Skill font size */
}

.project-list h2{
    margin-bottom: 1em;
    text-align: center;
}

.project-category {
    margin-bottom: 2em;
    padding: 1em;
    box-shadow: 0 2px 8px var(--shadow-colour);
    border-radius: 0.5em;
    background-color: var(--project-card);
    color:black;
    transition: transform 100ms ease, box-shadow 100ms ease;
}

.project-category:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px var(--shadow-colour);
}

.project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5em;
}

.project-icons i {
    font-size: 1.5em;
    margin-left: 0.5em;
}

.project-desc {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
}



input[type=text]{
    width:100%;
    margin: .5em 0;
    padding:1em;
    border-radius: .5em;
    border: none;
    font-size: 1rem;
    resize: vertical; /*Allows vertical resizing only*/
    font-family: 'Roboto', sans-serif; /*Consistent font*/
    margin-bottom: 2em;
    background: var(--contactme-colour);
}

input[type=submit], button{
    background-color: var(--base-colour);
    color: white;
    border: none;
    padding: 1em 2em;
    border-radius: 1em;
    font-size: 1rem;
    cursor: pointer;
    transition: 100ms ease;
}

button:hover{
    background-color: var(--text-colour-dark);
    scale: 1.05;
}

textarea {
    width: 100%;
    height: 15em;
    margin: 0.5em 0;
    padding: 1em;
    border-radius: 0.5em;
    border: none;
    font-size: 1rem;
    resize: vertical; /* Allows vertical resizing only */
    box-sizing: border-box; /* Ensures padding doesn't overflow */
    overflow-wrap: break-word; /* Ensures long words break */
    line-height: 1.5; /* Optional: for better readability */
    font-family: 'Roboto', sans-serif; /* Consistent font */
    background-color: var(--contactme-colour);
}