@charset "utf-8";

/*
   Assignment 5 - Your Personal Website

   Author: Jusnier Gastell Coira
   Date: 09/21/2026
   Filename: personal.css
*/


html {
   font-family: Verdana, Geneva, sans-serif;
}


body {
   color: rgb(45, 55, 65);
   background-color: rgba(255, 255, 255, 0.94);
   width: 90%;
   min-height: 95vh;
   margin-left: auto;
   margin-right: auto;
}


header {
   text-align: center;
   padding: 20px;
}


h1,
h2 {
   text-shadow: 4px 6px 5px gray;
}


h2 {
   font-size: 1.3em;
}


nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
}


nav a {
   display: block;
   background-color: rgb(20, 70, 110);
   line-height: 2.8em;
   text-decoration: none;
   text-align: center;
   color: white;
}


nav a:hover {
   background-color: rgb(100, 180, 220);
   color: rgb(10, 35, 60);
}


.navicon {
   display: none;
}


main {
   padding: 20px;
   margin-top: 35px;
   min-height: 500px;
}


main > img {
   width: 50%;
   max-width: 50%;
   height: auto;
   padding: 25px;
   float: right;
   box-sizing: border-box;
}


main ul {
   list-style-type: square;
}


body > footer {
   clear: both;
   background-color: rgb(20, 70, 110);
   color: rgba(255, 255, 255, 0.7);
   font-weight: bold;
   font-size: 0.9em;
   line-height: 3em;
   text-align: center;
   margin-top: 10px;
   padding: 10px;
}


body > footer a {
   color: white;
}


/* =========================
   VACATION GALLERY
   ========================= */

.vacation-gallery {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   margin: 20px 0;
}


.vacation-gallery figure {
   margin: 0;
   overflow: hidden;
   border-radius: 8px;
   box-sizing: border-box;
}


.vacation-gallery img {
   width: 100%;
   height: 250px;
   object-fit: cover;
   display: block;
   transition: transform 0.4s ease, opacity 0.4s ease;
}


.vacation-gallery img:hover {
   transform: scale(1.05);
   opacity: 0.85;
}


.vacation-gallery figcaption {
   text-align: center;
   font-weight: bold;
   padding: 10px;
   background-color: rgb(20, 70, 110);
   color: white;
}


.vacation-gallery figcaption a {
   color: white;
}


/* =========================
   FAMILY TABLE
   ========================= */

.family-table {
   clear: both;
   width: 100%;
   margin: 35px 0;
}


.family-table table {
   width: 100%;
   border-collapse: collapse;
   border: 3px solid rgb(20, 70, 110);
   background-color: white;
   table-layout: fixed;
}


.family-table caption {
   caption-side: top;
   text-align: left;
   font-size: 1.4em;
   font-weight: bold;
   padding: 10px 0;
   color: rgb(20, 70, 110);
}


.family-table th:nth-child(1),
.family-table td:nth-child(1) {
   width: 18%;
}


.family-table th:nth-child(2),
.family-table td:nth-child(2) {
   width: 17%;
}


.family-table th:nth-child(3),
.family-table td:nth-child(3) {
   width: 17%;
}


.family-table th:nth-child(4),
.family-table td:nth-child(4) {
   width: 48%;
}


.family-table th {
   background-color: rgb(20, 70, 110);
   color: white;
   border: 1px solid rgb(45, 55, 65);
   padding: 14px;
   text-align: left;
   vertical-align: middle;
}


.family-table td {
   border: 1px solid rgb(45, 55, 65);
   padding: 14px;
   vertical-align: top;
   line-height: 1.5em;
   overflow-wrap: break-word;
   word-wrap: break-word;
}


.family-table tbody tr:nth-child(even) {
   background-color: rgb(235, 242, 248);
}


.family-table tbody tr:hover {
   background-color: rgb(210, 230, 240);
}


.family-table tfoot td {
   background-color: rgb(100, 180, 220);
   color: rgb(10, 35, 60);
   font-weight: bold;
   text-align: center;
   padding: 14px;
}


/* =========================
   DESKTOP
   ========================= */

@media only screen and (min-width: 769px) {

   html {
      background-image: url("blue-background.webp");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      background-attachment: fixed;
   }


   nav li {
      display: block;
      width: 20%;
      float: left;
   }


   .vacation-gallery figure {
      flex: 1 1 calc(25% - 20px);
   }

}


/* =========================
   MEDIUM SCREEN
   ========================= */

@media only screen and (min-width: 769px) and (max-width: 1100px) {

   .vacation-gallery figure {
      flex: 1 1 calc(50% - 20px);
   }

}


/* =========================
   MOBILE
   ========================= */

@media only screen and (max-width: 768px) {

   body {
      width: 100%;
      margin: 0;
   }


   .navicon {
      display: block;
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 32px;
      text-align: center;
      text-decoration: none;
      background-color: rgb(20, 70, 110);
      color: white;
      margin: 5px 0;
   }


   nav ul {
      display: none;
   }


   nav > .navicon:hover + ul,
   nav > ul:hover {
      display: block;
   }


   nav li {
      float: none;
      width: 100%;
      font-size: x-large;
   }


   nav li a {
      border-bottom: 1px solid black;
   }


   main > img {
      width: 90%;
      max-width: 90%;
      float: none;
   }


   .vacation-gallery {
      flex-direction: column;
   }


   .vacation-gallery figure {
      flex: 1 1 100%;
   }


   .vacation-gallery img {
      height: auto;
   }


   /* =========================
      RESPONSIVE FAMILY TABLE
      ========================= */

   .family-table {
      clear: both;
      width: 100%;
      margin: 25px 0;
   }


   .family-table table {
      width: 100%;
      border: none;
      table-layout: auto;
   }


   .family-table thead {
      display: none;
   }


   .family-table tbody,
   .family-table tr,
   .family-table td {
      display: block;
      width: 100%;
      box-sizing: border-box;
   }


   /* Fix desktop column widths on mobile */

   .family-table th:nth-child(1),
   .family-table td:nth-child(1),
   .family-table th:nth-child(2),
   .family-table td:nth-child(2),
   .family-table th:nth-child(3),
   .family-table td:nth-child(3),
   .family-table th:nth-child(4),
   .family-table td:nth-child(4) {
      width: 100%;
   }


   .family-table tr {
      margin-bottom: 20px;
      border: 2px solid rgb(20, 70, 110);
      background-color: white;
   }


   .family-table td {
      width: 100%;
      border: none;
      border-bottom: 1px solid rgb(180, 180, 180);
      padding: 12px;
      padding-left: 42%;
      position: relative;
      min-height: 45px;
      line-height: 1.5em;
      box-sizing: border-box;
      overflow-wrap: break-word;
      word-wrap: break-word;
   }


   .family-table td:last-child {
      border-bottom: none;
   }


   .family-table td::before {
      content: attr(data-label);
      position: absolute;
      left: 12px;
      top: 12px;
      width: 35%;
      font-weight: bold;
      color: rgb(20, 70, 110);
   }


   .family-table tfoot,
   .family-table tfoot tr,
   .family-table tfoot td {
      display: block;
      width: 100%;
      box-sizing: border-box;
   }


   .family-table tfoot td {
      padding: 15px;
      text-align: center;
      background-color: rgb(100, 180, 220);
   }

}