@charset "utf-8";

/*
   Assignment 6 - Your Personal Website

   Author: Jusnier Gastell Coira
   Date: 09/24/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;
}


.clear-float {
   clear: both;
}


/* =========================
   CONTACT FORM
   ========================= */


input:focus,
select:focus,
textarea:focus {
   background-color: rgb(235, 245, 255);
   outline: 2px solid rgb(20, 70, 110);
}


input:valid,
select:valid,
textarea:valid {
   background-color: rgb(235, 250, 235);
}


input:invalid,
select:invalid,
textarea:invalid {
   background-color: rgb(255, 235, 235);
}


form {
   width: 90%;
}


fieldset {
   width: 90%;
   padding: 5px;
   margin-right: 10px;
   margin-bottom: 10px;
   box-sizing: border-box;
}


fieldset legend {
   font-weight: bold;
   padding: 5px;
}


/* =========================
   NORMAL FORM ROWS
   ========================= */


.form-row {
   position: relative;
   display: block;
   width: 100%;
   min-height: 38px;
   clear: both;
   box-sizing: border-box;
}


.form-row > label,
.question-label {
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   width: 30%;
   padding: 5px;
   box-sizing: border-box;
}


.form-row > input,
.form-row > select {
   display: block;
   position: relative;
   left: 30%;
   width: 60%;
   height: auto;
   padding: 5px;
   box-sizing: border-box;
}


/* =========================
   REFERRER
   ========================= */


.referrer-row {
   min-height: 115px;
}


.referrer-row > select {
   min-height: 100px;
}


/* =========================
   RECOMMENDATION
   ========================= */


.recommendation-row {
   min-height: 50px;
}


.radio-group {
   display: block;
   position: relative;
   left: 30%;
   width: 60%;
   min-height: 40px;
   padding: 5px;
   box-sizing: border-box;
}


.radio-group input[type="radio"] {
   display: inline-block;
   position: static;
   width: auto;
   height: auto;
   margin: 0 5px 0 0;
   vertical-align: middle;
}


.radio-group input[type="radio"]:nth-of-type(2) {
   margin-left: 25px;
}


.radio-group label.radio {
   display: inline-block;
   position: static;
   width: auto;
   height: auto;
   padding: 0;
   margin: 0;
   vertical-align: middle;
}


/* =========================
   COMMENTS
   ========================= */


.comments-row {
   min-height: 145px;
}


.comments-row > textarea {
   display: block;
   position: relative;
   left: 30%;
   width: 60%;
   min-height: 125px;
   padding: 5px;
   box-sizing: border-box;
}


/* =========================
   BUTTONS
   ========================= */


.button-row {
   display: block;
   width: 100%;
   clear: both;
   overflow: hidden;
}


.button-row input[type="submit"],
.button-row input[type="reset"] {
   display: block;
   float: left;
   position: relative;
   left: 0;
   text-align: center;
   width: 40%;
   padding: 10px;
   margin-left: 5%;
   margin-right: 5%;
   margin-bottom: 10px;
   box-sizing: border-box;
}


form::after {
   content: "";
   display: table;
   clear: both;
}


/* =========================
   FOOTER
   ========================= */


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 Image */

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


   /* Vacation Gallery */

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


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


   .vacation-gallery img {
      height: auto;
   }


   /* =========================
      CONTACT FORM MOBILE
      ========================= */


   form {
      width: 100%;
      font-size: large;
   }


   fieldset {
      width: 100%;
      padding: 5px;
      margin: 0;
      box-sizing: border-box;
   }


   .form-row {
      position: static;
      min-height: 0;
      width: 100%;
      margin-bottom: 10px;
   }


   .form-row > label,
   .question-label {
      position: static;
      display: block;
      height: auto;
      min-height: 50px;
      width: 90%;
      padding: 5px;
      box-sizing: border-box;
   }


   .form-row > input,
   .form-row > select {
      position: static;
      left: auto;
      display: block;
      height: 50px;
      padding: 5px;
      width: 90%;
      box-sizing: border-box;
   }


   .referrer-row {
      min-height: 0;
   }


   .referrer-row > select {
      height: 125px;
      min-height: 125px;
   }


   .recommendation-row {
      min-height: 0;
   }


   .radio-group {
      position: static;
      left: auto;
      width: 90%;
      min-height: 45px;
      padding: 5px;
   }


   .radio-group input[type="radio"] {
      display: inline-block;
      position: static;
      height: auto;
      width: auto;
   }


   .radio-group label.radio {
      display: inline-block;
      position: static;
      height: auto;
      width: auto;
   }


   .comments-row {
      min-height: 0;
   }


   .comments-row > textarea {
      position: static;
      left: auto;
      display: block;
      width: 90%;
      min-height: 125px;
      padding: 5px;
      box-sizing: border-box;
   }


   .button-row {
      overflow: visible;
   }


   .button-row input[type="submit"],
   .button-row input[type="reset"] {
      float: none;
      position: static;
      left: auto;
      width: 90%;
      margin: 10px;
      font-size: 1.2em;
   }


   /* =========================
      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;
   }


   .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);
   }

}