/*
Name: Austin Nguyen
Date: 08.25.25
Section: CSE 190e
This is the style.css page for my website project.
It is used by to give the site a cohesive apearence */

html {
    font-family: "Times New Roman", "Times", serif;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
}

header h1 {
    font-size: 4.5rem;
}

#right-nav {
    display: flex;
    gap: 0.5rem;
}

.nav {
    width: 50px;
    height: 50px;
    transition: transform 0.3s;
}

body {
    background-color: black;
    color: whitesmoke;
    height: 100%;
    margin: 0;
    overflow: hidden; /* Prevents scrolling */
}

* {
    margin: 0;
    box-sizing: border-box;
}

.textwrapper {
    display: flex;
    justify-content: flex-start;
    background: #202020;
    overflow: hidden;
}

h2 {
    font-size: 40px;
    white-space: nowrap;
    padding: 0 2rem;
    animation: move-RtL 2000ms linear infinite;
}

@keyframes move-RtL {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

#titlecard {
    display: flex;
    justify-content: center;
    padding: clamp(1rem, 4vh, 3rem) 0; /* Responsive vertical padding */
    position: relative;
}

#titlecard img {
    width: clamp(300px, 80vw, 800px); /* Responsive width with limits */
    height: auto;
    aspect-ratio: 2/1; /* Maintain 2:1 aspect ratio (adjust based on your image) */
    object-fit: contain; /* Ensure image stays contained */
    transition: width 0.3s ease; /* Smooth resizing */
}

#hehe {
    font-size: 10px;
    color: rgb(42, 42, 42);
}

#a1 {
    display: flex;
    justify-content: flex-start; /* Mirror of #a2's flex-end */
    position: relative;
    transform: translateY(-28vh); /* Same vertical adjustment pattern */
}

#a1image {
    width: clamp(300px, 40vw, 400px); /* Matching #a2's responsive width pattern */
    aspect-ratio: 1.15;
    background-color: #fff;
    border: clamp(0.5px, 0.04vw, 0.75px) solid #ddd;
    border-radius: clamp(0.3rem, 0.5vw, 0.75rem);
    padding: clamp(0.5rem, 0.5vw, 1.25rem);
    transform: translate(5vw, -15vh); /* Mirror of #a2image positioning */
}

#a1text {
    position: absolute;
    font-size: clamp(1rem, 2vmin, 20px); /* Same font-size logic */
    left: 17vw; /* Mirror of #a2text's right property */
    top: 64%;
    transform: translateY(-50%) translateX(-30%); /* Inverse horizontal offset */
    width: min(40ch, 35vw);
    line-height: 1.4;
}
#a2 {
    display: flex;
    justify-content: flex-end;
    position: relative; /* Add this for positioning context */
    transform: translateY(-60vh); /* Adjust this value to move up/down */
}

#a2image {
    width: clamp(300px, 40vw, 500px); /* Responsive width with limits */
    background-color: #fff;
    border: clamp(0.5px, 0.04vw, 0.75px) solid #ddd;
    border-radius: clamp(0.3rem, 0.5vw, 0.75rem);
    padding: clamp(0.5rem, 0.5vw, 1.25rem);
    transform: translate(-5vw, -20vh); /* X-axis, Y-axis positioning */
}

#a2text {
    position: absolute;
    font-size: clamp(1rem, 2vmin, 20px); /* Responsive font size */
    right: 15vw; /* Replace margin-right */
    top: 50%; /* Position from top */
    transform: translateY(-50%) translateX(30%); /* Center vertically + horizontal offset */
    max-width: 30ch; /* Better text measure */
}

footer {
    display: flex;
    justify-content: flex-end;
    padding: clamp(10px, 2vh, 20px) 0;
    width: 90%;
    margin-top: auto; /* Pushes footer to bottom */
    position: sticky; /* Alternative: use relative */
    bottom: 0;
}   

#w {
    width: 1.5%;
}

#container {
    position: relative;
    width: fit-content;
    margin: clamp(1rem, 5vh, 3rem) auto; /* Responsive vertical margin */
    transform: translateY(-71vh);
}

#container img {
    width: min(90vw, 200px);
    height: auto;
    background-color: #fff;
    border: clamp(0.25px, 0.0125vw, 0.5px) solid #ddd;
    border-radius: clamp(0.1rem, 0.25vw, 0.25rem);
    padding: clamp(0.25rem, 0.25vw, 0.75rem);
  }

.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2.5rem;
    text-align: center;
    width: 100%;
}

h3 {
    margin-left: 20px;
}

.list {
    margin: 20px;
    background-image: url("img/background.jpg");
}

#me {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 7px;
    width: 300px;
}

#aboutme {
    float: right;
    margin-right: 120px;
    position: relative;
    top: -300px;
    width: 320px;
    line-height: 20px;
}

#highlight {
    color: black;
    background-color: white;
}


#container2 {
    position: relative;
    width: fit-content;
    margin: clamp(1rem, 5vh, 3rem) auto; /* Responsive vertical margin */
    transform: translateY(15vh);
}

#container2 img {
    width: min(90vw, 200px);
    height: auto;
    background-color: #fff;
    border: clamp(0.25px, 0.0125vw, 0.5px) solid #ddd;
    border-radius: clamp(0.1rem, 0.25vw, 0.25rem);
    padding: clamp(0.25rem, 0.25vw, 0.75rem);
}

#overlay2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2.5rem;
    text-align: center;
    width: 100%;
}