/*In Progress Stylesheet*/
/*Last Edited: 6/28/2024 */


body
{
    background-color: black;
    color: blue;
    /* float: center;  <-- invalid, remove */
    /*margin-left: 240px;*/
}

h1
{
    margin-top: 4%;
    margin-left: 20%;
    margin-right: 20%;

    border: 8px solid blue;
    text-align: center;
    font-size: 50px;
}

h2
{
    margin-top: 2%;
    margin-left: 20%;
    margin-right: 20%;

    text-align: center;
    font-size: 25px;
}

p
{
    margin-top: 2%;
    margin-left: 20%;
    margin-right: 20%;

    text-align: center;
    font-size: 20px;
    color: white;
}

img
{
    margin-top: 0%;
}

video
{
    margin-top: 2%;
    border: 2px solid red;
}

#projects
{
    margin-top: 2%;
    margin-left: 2%;
    margin-right: 2%;

    align-self: center;
    border: 4px solid blue;
}

/* NAV BAR CONTAINER (THIS CENTERS THE BUTTONS) */
#headerlinks
{
    width: 100%;
    text-align: center;      /* <-- centers the inline-block links */
    margin: 0;
    padding: 20px 0;

    background-color: gray;
    border: 8px solid blue;
    border-radius: 5px;
}

/* NAV BUTTONS */
#headerlinks a
{
    display: inline-block;

    padding: 12px 24px;

    margin: 0 70px;

    text-decoration: none;
    font-size: 18px;
    font-weight: bold;

    color: white;
    background-color: blue;

    border: 3px solid cyan;
    border-radius: 8px;

    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* HOVER: COLOR CHANGE ONLY (NO SIZE CHANGE) */
#headerlinks a:hover
{
    color: blue;
    background-color: white;
    border-color: blue;
}

/* OPTIONAL: "pressed" click effect (still same size) */
#headerlinks a:active
{
    opacity: 0.85;
}

#resumefile
{
    margin-top: 2%;
    text-align: center;

    margin-left: 20%;
    margin-right: 20%;

    border: 5px solid white;
    border-radius: 5px;
}

#role
{
    margin-top: 0%;
    margin-left: 20%;
    margin-right: 20%;

    text-align: left;
    font-size: 20px;
    color: white;
}

#status
{
    margin-top: 0%;
    margin-left: 20%;
    margin-right: 20%;

    text-align: left;
    font-size: 20px;
    color: white;
}

#tags
{
    margin-top: 0%;
    margin-left: 20%;
    margin-right: 20%;

    text-align: left;
    font-size: 20px;
    color: white;
}

#description
{
    margin-top: 0%;
    margin-left: 20%;
    margin-right: 20%;

    text-align: left;
    font-size: 20px;
    color: white;
}

#contributions
{
    margin-top: 0%;
    margin-left: 20%;
    margin-right: 20%;

    text-align: left;
    font-size: 20px;
    color: white;
}

#phone_image
{
    margin-left: 2%;
}

#mail_image
{
    margin-left: 2%;
    font-size: 20px;
}

#links
{
    text-align: left;
     margin-top: 2%;
     margin-bottom: 2%;
    margin-left: 20%;
    margin-right: 20%;
}

/* Floating Project Sidebar */
#project-sidebar
{
    position: fixed;
    top: 120px;
    left: 20px;

    width: 200px;
    padding: 15px;

    background-color: #111;
    border: 3px solid cyan;
    border-radius: 10px;

    z-index: 1000;
}

/* Title */
#project-sidebar h3
{
    color: cyan;
    text-align: center;
    margin-bottom: 10px;
}

/* Links */
#project-sidebar a
{
    display: block;
    color: white;
    text-decoration: none;
    padding: 8px;
    margin: 5px 0;

    border: 2px solid cyan;
    border-radius: 5px;

    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover effect */
#project-sidebar a:hover
{
    background-color: cyan;
    color: black;
}

/* Contact Card */

.contact-card {
  width: 70%;
  max-width: 700px;
  margin: 40px auto;

  padding: 25px;

  border: 4px solid blue;
  border-radius: 12px;

  background-color: #111;
}

/* Row layout */
.contact-row {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 15px;
  margin: 20px 0;
}

/* Email link */
.contact-link {
  color: white;
  font-size: 22px;
  text-decoration: none;
}

.contact-link:hover {
  color: cyan;
  text-decoration: underline;
}

/* Phone text */
.contact-phone {
  color: white;
  font-size: 22px;
  user-select: all;
}

/* Itch button */
.contact-links {
  margin-top: 25px;
  text-align: center;
}

.contact-links a {
  display: inline-block;
  padding: 12px 22px;

  background-color: blue;
  color: white;
  text-decoration: none;

  border: 3px solid cyan;
  border-radius: 8px;

  font-weight: bold;

  transition: background-color 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease;
}

.contact-links a:hover {
  background-color: white;
  color: blue;
  border-color: blue;
}

/* =========================
   MOBILE ONLY (phones)
   ========================= */
@media (max-width: 768px)
{
  /* Give the page room */
  body { padding: 10px; }

  /* Headings/text stop being squeezed by 20% margins */
  h1, h2, p,
  #role, #tags, #description, #contributions, #links
  {
    margin-left: 5%;
    margin-right: 5%;
  }

  h1 { font-size: 34px; }
  h2 { font-size: 22px; }
  p  { font-size: 18px; }

  /* Navbar becomes stacked + readable */
  #headerlinks
  {
    padding: 12px 0;
    border-width: 6px;
  }

  #headerlinks a
  {
    display: block;           /* stack buttons */
    margin: 10px auto;        /* center */
    width: 85%;               /* nice big tap target */
    max-width: 420px;
    font-size: 18px;
  }

  /* Project cards use full width */
  #projects
  {
    margin-left: 0;
    margin-right: 0;
  }

  /* Images + videos scale to phone width */
  img, video, iframe, embed
  {
    max-width: 100%;
    height: auto;
  }

  /* Your fixed-size iframes: make them responsive */
  iframe
  {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
  }

  /* Sidebar: stop covering the screen */
  #project-sidebar
  {
    position: static;        /* no longer floating */
    width: auto;
    margin: 15px 5%;
  }

  #project-sidebar a
  {
    text-align: center;
  }

  /* Resume PDF embed: fit screen */
  #resumefile
  {
    margin-left: 5%;
    margin-right: 5%;
  }
}