/*ALL MADE BY BENNY HUI*/


/* =========================================
   GLOBAL
   ========================================= */

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

  font-family:
    'Whitney SSm A',
    'Whitney SSm B',
    Arial,
    sans-serif;

  color:#fff;
}


/* =========================================
   NAV
   ========================================= */

.nav{
  width:100%;

  background:rgba(40,40,40,0.5);

  position:fixed;
  top:0;
  left:0;

  z-index:1000;

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  border-bottom:
    1px solid rgba(255,255,255,0.15);
}

.nav ul{
  list-style:none;
  text-align:center;
}

.nav li{
  display:inline-block;
}

.nav a{
  display:inline-block;

  padding:20px 30px;

  text-decoration:none;

  font-size:18px;
  line-height:1;

  transition:all .3s ease;
}

.nav a:hover{
  background:rgba(0,0,0,0.4);
  opacity:.9;
}


/* =========================================
   RESUME BUTTON
   ========================================= */

.resume-btn{
  background:rgba(255,255,255,0.15);

  border:
    1px solid rgba(255,255,255,0.25);

  border-radius:30px;

  padding:12px 25px;

  margin-left:15px;

  font-weight:600;

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  box-shadow:
    0 0 10px rgba(255,255,255,0.2);
}

.resume-btn:hover{
  background:rgba(255,255,255,0.25);

  box-shadow:
    0 0 15px rgba(255,255,255,0.35);
}


/* =========================================
   BACKGROUND
   ========================================= */

body{
  background-image:
    url(image/daniel-sessler-Z5TV7ylXLrI-unsplash.jpg);

  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
  background-attachment:fixed;

  min-height:100vh;
}


/* =========================================
   GLASS
   ========================================= */

.glass{
  background:rgba(255,255,255,0.10);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  border:
    1px solid rgba(255,255,255,0.25);

  border-radius:18px;

  box-shadow:
    0 10px 32px rgba(0,0,0,.40);
}


/* =========================================
   HERO
   ========================================= */

.blog-hero{
  max-width:900px;

  margin:160px auto 30px;

  padding:28px 34px;

  text-align:center;
}

.blog-hero h1{
  font-size:64px;

  font-weight:800;

  margin-bottom:10px;

  text-shadow:
    2px 2px 10px rgba(0,0,0,.6);
}

.blog-hero p{
  font-size:20px;
  line-height:1.7;
}


/* =========================================
   BACK BUTTON
   ========================================= */

.back-btn-container{
  width:92%;

  max-width:1200px;

  margin:-5px auto 10px;

  display:flex;

  justify-content:flex-start;
}

.back-btn{
  display:inline-block;

  background:
    rgba(255,255,255,0.15);

  border:
    1px solid rgba(255,255,255,0.25);

  border-radius:12px;

  padding:10px 18px;

  text-decoration:none;

  font-weight:600;
  font-size:16px;

  color:#fff;

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  box-shadow:
    0 6px 20px rgba(0,0,0,0.25);

  transition:all 0.25s ease;
}

.back-btn:hover{
  background:
    rgba(255,255,255,0.3);

  transform:translateY(-2px);

  box-shadow:
    0 8px 24px rgba(0,0,0,0.35);
}


/* =========================================
   MAIN WRAPPER
   ========================================= */

.blog-page{
  width:92%;

  max-width:1200px;

  margin:0 auto 80px;

  display:flex;

  flex-direction:column;

  gap:26px;
}


/* =========================================
   ALBUM SELECTOR
   ========================================= */

.album-selector{
  display:grid;

  grid-template-columns:
    repeat(auto-fit, minmax(260px,1fr));

  gap:18px;

  justify-content:center;

  max-width:1100px;

  margin:0 auto;
}


/* =========================================
   NORMAL ALBUM CARD
   ========================================= */

.album-card{
  background:rgba(0,0,0,0.25);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  border:
    1px solid rgba(255,255,255,0.2);

  border-radius:16px;

  padding:16px 18px;

  cursor:pointer;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    filter .25s ease;

  box-shadow:
    0 10px 30px rgba(0,0,0,.25);

  min-width:260px;

  min-height:120px;

  text-align:left;
}

.album-card h2{
  font-size:20px;

  margin-bottom:6px;

  text-shadow:
    1px 1px 6px rgba(0,0,0,.4);

  font-weight:700;
}

.album-card p{
  font-size:14px;

  opacity:.8;
}

.album-card:hover{
  transform:translateY(-3px);

  background:
    rgba(255,255,255,0.12);
}

.album-card.active{
  background:
    rgba(255,255,255,0.20);

  border:
    1px solid rgba(255,255,255,0.4);

  box-shadow:
    0 12px 36px rgba(0,0,0,.35);
}


/* =========================================
   COUNTRY LINKS
   ========================================= */

.country-selector a{
  text-decoration:none;

  color:inherit;

  display:block;
}


/* =========================================
   COUNTRY GLASS CARDS
   ========================================= */

.country-selector .album-card{
  position:relative;

  overflow:hidden;

  background:
    rgba(255,255,255,0.05);

  backdrop-filter:
    blur(22px)
    saturate(1.15);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(1.15);

  border:
    1px solid rgba(255,255,255,0.24);

  box-shadow:
    0 10px 30px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.12);
}


/* =========================================
   FLAG LAYER
   ========================================= */

.country-selector .album-card::before{
  content:"";

  position:absolute;

  inset:-15px;

  z-index:1;

  border-radius:inherit;

  filter:
    blur(10px)
    saturate(1.05);

  transform:
    scale(1.05);

  opacity:.90;
}


/* =========================================
   GLASS SHINE
   ========================================= */

.country-selector .album-card::after{
  content:"";

  position:absolute;

  inset:0;

  z-index:2;

  pointer-events:none;

  border-radius:inherit;

  background:
    linear-gradient(
      145deg,

      rgba(255,255,255,.22) 0%,

      rgba(255,255,255,.10) 18%,

      rgba(255,255,255,.03) 38%,

      rgba(255,255,255,0) 62%
    );
}


/* =========================================
   TEXT
   ========================================= */

.country-selector .album-card h2,
.country-selector .album-card p{
  position:relative;

  z-index:3;

  text-shadow:
    0 2px 8px rgba(0,0,0,.75);
}

.country-selector .album-card p{
  opacity:.95;
}


/* =========================================
   GERMANY
   Black / Red / Gold
   ========================================= */

.country-germany::before{
  background:
    linear-gradient(
      to bottom,

      rgba(15,15,15,.72) 0%,
      rgba(15,15,15,.72) 33.333%,

      rgba(221,0,0,.58) 33.333%,
      rgba(221,0,0,.58) 66.666%,

      rgba(255,206,0,.54) 66.666%,
      rgba(255,206,0,.54) 100%
    );
}


/* =========================================
   SWITZERLAND
   Red + White Cross
   ========================================= */

.country-switzerland::before{
  background:

    linear-gradient(
      to right,

      transparent 0%,
      transparent 40%,

      rgba(255,255,255,.66) 40%,
      rgba(255,255,255,.66) 60%,

      transparent 60%,
      transparent 100%
    ),

    linear-gradient(
      to bottom,

      transparent 0%,
      transparent 32%,

      rgba(255,255,255,.66) 32%,
      rgba(255,255,255,.66) 68%,

      transparent 68%,
      transparent 100%
    ),

    rgba(218,41,28,.64);
}


/* =========================================
   ITALY
   Green / White / Red
   ========================================= */

.country-italy::before{
  background:
    linear-gradient(
      to right,

      rgba(0,146,70,.62) 0%,
      rgba(0,146,70,.62) 33.333%,

      rgba(255,255,255,.46) 33.333%,
      rgba(255,255,255,.46) 66.666%,

      rgba(206,43,55,.60) 66.666%,
      rgba(206,43,55,.60) 100%
    );
}


/* =========================================
   AUSTRIA
   Red / White / Red
   ========================================= */

.country-austria::before{
  background:
    linear-gradient(
      to bottom,

      rgba(237,41,57,.62) 0%,
      rgba(237,41,57,.62) 33.333%,

      rgba(255,255,255,.46) 33.333%,
      rgba(255,255,255,.46) 66.666%,

      rgba(237,41,57,.62) 66.666%,
      rgba(237,41,57,.62) 100%
    );
}


/* =========================================
   CROATIA
   Red / White / Blue
   ========================================= */

.country-croatia::before{
  background:
    linear-gradient(
      to bottom,

      rgba(255,0,0,.56) 0%,
      rgba(255,0,0,.56) 33.333%,

      rgba(255,255,255,.44) 33.333%,
      rgba(255,255,255,.44) 66.666%,

      rgba(23,23,150,.58) 66.666%,
      rgba(23,23,150,.58) 100%
    );
}


/* =========================================
   ENGLAND
   St. George Cross
   ========================================= */

.country-england::before{
  background:

    linear-gradient(
      to right,

      transparent 0%,
      transparent 42%,

      rgba(200,16,46,.64) 42%,
      rgba(200,16,46,.64) 58%,

      transparent 58%,
      transparent 100%
    ),

    linear-gradient(
      to bottom,

      transparent 0%,
      transparent 36%,

      rgba(200,16,46,.64) 36%,
      rgba(200,16,46,.64) 64%,

      transparent 64%,
      transparent 100%
    ),

    rgba(255,255,255,.42);
}


/* =========================================
   SWEDEN
   Blue + Yellow Nordic Cross
   ========================================= */

.country-sweden::before{
  background:

    linear-gradient(
      to right,

      transparent 0%,
      transparent 27%,

      rgba(254,204,0,.64) 27%,
      rgba(254,204,0,.64) 39%,

      transparent 39%,
      transparent 100%
    ),

    linear-gradient(
      to bottom,

      transparent 0%,
      transparent 39%,

      rgba(254,204,0,.64) 39%,
      rgba(254,204,0,.64) 58%,

      transparent 58%,
      transparent 100%
    ),

    rgba(0,106,167,.62);
}


/* =========================================
   CZECH REPUBLIC
   Blue Triangle + White / Red
   ========================================= */

.country-czech::before{
  background:

    linear-gradient(
      150deg,

      rgba(17,69,126,.68) 0%,
      rgba(17,69,126,.68) 25%,

      transparent 25.5%
    ),

    linear-gradient(
      to bottom,

      rgba(255,255,255,.44) 0%,
      rgba(255,255,255,.44) 50%,

      rgba(215,20,26,.60) 50%,
      rgba(215,20,26,.60) 100%
    );
}


/* =========================================
   NETHERLANDS
   Red / White / Blue
   ========================================= */

.country-netherlands::before{
  background:
    linear-gradient(
      to bottom,

      rgba(174,28,40,.60) 0%,
      rgba(174,28,40,.60) 33.333%,

      rgba(255,255,255,.44) 33.333%,
      rgba(255,255,255,.44) 66.666%,

      rgba(33,70,139,.60) 66.666%,
      rgba(33,70,139,.60) 100%
    );
}


/* =========================================
   FRANCE
   Blue / White / Red
   ========================================= */

.country-france::before{
  background:
    linear-gradient(
      to right,

      rgba(0,35,149,.62) 0%,
      rgba(0,35,149,.62) 33.333%,

      rgba(255,255,255,.44) 33.333%,
      rgba(255,255,255,.44) 66.666%,

      rgba(237,41,57,.60) 66.666%,
      rgba(237,41,57,.60) 100%
    );
}


/* =========================================
   MOROCCO
   Red with Green Center
   ========================================= */

.country-morocco::before{
  background:

    radial-gradient(
      circle at center,

      rgba(0,98,51,.62) 0%,

      rgba(0,98,51,.48) 8%,

      rgba(0,98,51,.20) 16%,

      transparent 28%
    ),

    rgba(193,39,45,.64);
}


/* =========================================
   LIECHTENSTEIN
   Blue / Red + Gold Crown
   ========================================= */

.country-lichtenstein::before{
  background:

    /* gold crown glow */
    radial-gradient(
      circle at 17% 23%,

      rgba(255,205,55,.85) 0%,

      rgba(255,205,55,.72) 5%,

      rgba(255,205,55,.32) 10%,

      transparent 18%
    ),

    /* blue top / red bottom */
    linear-gradient(
      to bottom,

      rgba(0,43,127,.68) 0%,
      rgba(0,43,127,.68) 50%,

      rgba(206,17,38,.64) 50%,
      rgba(206,17,38,.64) 100%
    );
}


/* =========================================
   COUNTRY HOVER
   ========================================= */

.country-selector .album-card:hover{
  background:
    rgba(255,255,255,0.06);

  transform:
    translateY(-5px)
    scale(1.012);

  border-color:
    rgba(255,255,255,.48);

  box-shadow:
    0 16px 38px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.18);
}


/* =========================================
   ALBUM VIEW
   ========================================= */

.album-view{
  padding:26px 26px 32px;
}


/* =========================================
   ALBUM HEADER
   ========================================= */

.album-header{
  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;
}

.album-header h2{
  font-size:32px;

  font-weight:800;

  text-shadow:
    1px 1px 6px rgba(0,0,0,.6);
}

.album-date{
  font-size:22px;

  font-weight:700;

  text-shadow:
    1px 1px 6px rgba(0,0,0,.6);

  white-space:nowrap;
}

.album-place{
  font-size:18px;

  font-weight:600;

  margin-top:14px;

  margin-bottom:12px;

  text-shadow:
    1px 1px 6px rgba(0,0,0,.5);
}


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

.gallery{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:16px;
}

.gallery a{
  width:100%;

  border-radius:16px;

  overflow:hidden;

  display:block;

  box-shadow:
    0 8px 24px rgba(0,0,0,.35);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;

  min-height:180px;

  background:
    rgba(0,0,0,0.25);
}

.gallery img{
  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  filter:
    saturate(1.05)
    contrast(1.02);
}

.gallery a:hover{
  transform:
    translateY(-4px)
    scale(1.01);

  box-shadow:
    0 12px 28px rgba(0,0,0,.45);

  filter:
    brightness(1.05);
}


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

.copy{
  text-align:center;

  font-size:14px;

  opacity:.85;

  margin:
    36px 0 24px;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width:980px){

  .blog-hero h1{
    font-size:48px;
  }

  .gallery{
    grid-template-columns:
      repeat(2,1fr);
  }

}


@media (max-width:640px){

  .album-header{
    flex-direction:column;

    align-items:flex-start;
  }

  .album-date{
    margin-top:4px;
  }

}


@media (max-width:620px){

  .nav a{
    padding:16px 18px;

    font-size:16px;
  }

  .blog-hero{
    margin-top:150px;
  }

  .blog-hero h1{
    font-size:36px;
  }

  .gallery{
    grid-template-columns:1fr;
  }

  .album-view{
    padding:20px 16px 30px;
  }

  .back-btn-container{
    margin-top:0;
  }

}