@charset "utf-8";

/*
   Assignment 4 - Your Personal Website

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


/* General HTML styles */

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


/* Body */

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

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


/* Headings */

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

h2 {
   font-size: 1.3em;
}


/* Navigation */

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


/* Navigation links */

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


/* Navigation hover */

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


/* Navicon hidden by default */

.navicon {
   display: none;
}


/* Main */

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


/* Images that are direct children of main */

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


/* Education list marker */

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


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


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

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

   /* Desktop background */

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


   /* Desktop navigation */

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


   /* Desktop vacation gallery - 4 columns */

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

}


/* =========================
   INTERMEDIATE - 2 COLUMNS
   ========================= */

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

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


   /* Navicon */

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


   /* Hide navigation list */

   nav ul {
      display: none;
   }


   /*
      Show navigation when the user hovers
      over the navicon or the menu itself.
   */

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


   /* Mobile navigation list items */

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


   /* Mobile navigation links */

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


   /* Mobile images */

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


   /* Mobile vacation gallery - 1 column */

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

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

   .vacation-gallery img {
      height: auto;
   }

}