/* ==============================
   Root Variables & Base Reset
   ============================== */
:root {
  --font-body: "Times New Roman", Times, serif;
  --font-size-base: 1.0rem; /* 14px */
  --font-size-lg: 1.125rem;   /* 18px */

  --color-text: #ffffff;
  --color-bg: #000000;

  --color-link: #e1ffff;
  --color-link-visited: #990000;
  --color-link-hover: #ff0000;

  --max-width-container: 1280px;
  --max-width-port: 1180px;
  --transition-default: 1.5s linear;

  --bp-md: 55em;
  --bp-lg: 60em;
}

* {
  padding: 0;
  box-sizing: border-box;
}
/* ==============================
   HTML + Body
   ============================== */
html {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  transition: var(--transition-default);
  
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  color: var(--color-text);
  background: var(--color-bg);
  text-align: center;
  overflow-y: scroll;
  margin: 0 auto;
}
/* ==============================
   Screen Size
   ============================== */
@media (max-width: 30em) {
  footer {
    font-size: 0.75rem;
  }
  .icon {
    width: 1.5rem;
    height: 1.5rem; 
  }
  #container {
    font-size: 0.8rem;
  }
}
@media (min-width: 30em) {
  h1 {
    font-size: 2.5rem;
  }
  h2 { margin: .3rem 0rem; }
  #container {
    width: 95%;
	padding: 2% 0 20% 0;
	font-size: 0.8rem;
  }
  .Menu { 
  	width: 100%;
	font-size: 145%;
  }
  footer {
	font-size: 0.75rem;
	width: 100%; 
  }
  .icon {
    width: 1.5rem;
    height: 1.5rem; 
  }
  .UnaSlides {
    padding-bottom: 5%;
  }
  .prev,
  .next {
    padding: 1.5%;
    border-radius: 0 3% 3% 0;
    font-size: 200%;
  }
}
@media (min-width: 48em) {
  .Title { font-size: 2.0rem;}
  .Menu { 
  	width: 90%;
  	font-size: 180%;
  }
  footer { 
    width: 90%;
	font-size: 1rem;
  }
  #container {width: 90%; }
}
@media (min-width: 60em) {
  .Title { font-size: 2.75rem}
  h1 {
    font-size: 3.75rem;
  }
  h2 { margin: .3rem -1rem; }
  #container {
  	width: 60%; 
    padding: 2% 0 8% 0;
	font-size: 1rem;
  }
  .Menu { 
  	width: 70%;
  	font-size: 200%;
  }
  footer {
    width: 70%;
	font-size: 1.2rem;
  }
  .icon {
    width: 2rem;
    height: 2rem; 
  }
}

/* ==============================
   Typography
   ============================== */
h1 {
  font-weight: 500;
  margin: 0 auto;
}

h2 {
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: underline;
}

.Title {
  font-size: 1.75rem;
}

/* ==============================
   Form Elements
   ============================== */
input[type="text"] {
  width: 40%;
}

textarea {
  width: 80%;
}

/* ==============================
   Positioning / Layout
   ============================== */
#Background, 
#alternative {
  position: fixed;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
  object-fit: cover;
}
#wrapper {
  position: absolute;
  min-width: 100%;
  text-align: center;
  overflow: hidden;
  z-index: -1;
}

#HeadBG {
  z-index: -1;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -37%);
  
  -webkit-mask-image: radial-gradient(circle, black 10%, rgba(0, 0, 0, 0) 70%);
  mask-image: radial-gradient(circle, black 10%, rgba(0, 0, 0, 0) 70%);
}

#heading {
  position: relative;
  width: 100%;
  padding: 4em 0 1em;
  overflow: hidden;
}

#container {
  margin: 0 auto;
  min-height: 10em;
  max-width: var(--max-width-container);
  padding: 2em 0 2em 0;
  text-align: left;
  background-image: url("../images/BlackBack.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* ==============================
   Menu Bar
   ============================== */
.Menu {
  margin: auto;
  position: relative;
  text-align: center;
  word-spacing: 4em;
  padding: 0.5% 0;
  border-radius: 15px;
  background-image: radial-gradient(ellipse, rgba(0,0,0,1) 20%, rgba(128, 128, 128, 0) 70%);
  overflow: hidden;
  z-index: 10;
}

.Menu::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: url('../images/LayingDragon1.png') no-repeat center / cover; /*cover vs contain maybe?*/
  background-size: 80% 280%;
  background-position: center 57%; 
  pointer-events: none; /* cannot click */
  user-select: none;
  z-index: -1;
  opacity: 0; /* Start hidden for fade-in */
  transform-origin: center;
  animation: dragonFadeIn 2s ease-out forwards 0.3s, dragonGentlePulse 9s ease-in-out infinite 2.6s;
}

#Welcome, #Resume, #Portfolio {
  background: radial-gradient(ellipse, rgb(0,0,0,1) 10%, rgba(0,0,0,0) 75%)
}

/* ==============================
   Footer
   ============================== */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto; 
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 15px;
  background-image: radial-gradient(ellipse, rgba(0,0,0,1) 30%, rgba(128, 128, 128, 0) 90%);
  padding: 0 2%;
  overflow: hidden;
  z-index: 10;
}

footer::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: url('../images/LayingDragon2.png') no-repeat center / cover; /*cover vs contain maybe?*/
  background-size: 80% 300%;
  background-position: center 70%; 
  pointer-events: none; /* cannot click */
  user-select: none;
  z-index: -1;
  opacity: 0; /* Start hidden for fade-in */
  transform-origin: center;
  animation: dragonFadeIn 2s ease-out forwards 0.3s, dragonGentlePulse 9s ease-in-out infinite 2.6s;
}

.SocialMedia {
  width: 10rem;
}

/* Floats */
.Right { float: right; }
.Left { float: left; }
.Clear { clear: both; }

/* ==============================
   Misc Layout
   ============================== */
.resume-grid {
  display: grid;
}

.resume-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.resume-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.resume-col {
  padding: 0.1rem 0.5rem;
  align-content: center;
}

.client-list {
  list-style: none;
  padding-left: 5%;
  width: 90%;
  margin: 0;
}

.client-item {
  margin: 1.5rem 0rem;
}

.client-details {
  list-style: disc;
  margin: 0.25rem 1rem;
  padding-left: 0;
}

.clickzoom {
  width: 100%;
  text-align:center;
  cursor:zoom-in;
}

.Work {
  font-weight: bold;
  margin-left: 15px;
}

/* ==============================
   Portfolio Container
   ============================== */
#PortContainer {
  width: 80%;
  max-width: var(--max-width-port);
  min-width: 625px;
  margin: 0 auto;
  text-align: left;
  padding-bottom: 10%;
  /*background: url("https://www.tombylicky.com/images/TransparentBackLogoC.png") no-repeat center 15px / 90%;*/
  z-index: 2;
}

/* ==============================
   Gallery & Thumbnails
   ============================== */
.Gallery {
  display: inline-block;
  width: 90%;
  text-align: center;
}

.Thumb {
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 1px;
  display: inline-block;
  transition: background-color 1s ease;
}

.Thumb:hover {
  color: #ff0000;
}

/* ==============================
   Slideshow
   ============================== */
.slideshow-container {
  margin: 0;
  position: relative;
  overflow: hidden;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  padding: 2.5%;
  color: white;
  font-weight: bold;
  font-size: 300%;
  background-color: rgba(0,0,0,0.8);
  border-radius: 0 4% 4% 0;
  transition: 1s ease;
  user-select: none;
}
.next { right: 0%; }
.story {
  color: #f2f2f2;
  text-align: left;
  margin: 0rem 1rem;
  transition: 1s ease;
}

/* ==============================
   Modal
   ============================== */
.w3-modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-top: 1%;
  background-color: rgba(0,0,0,0.4);
  z-index: 3;
  overflow: auto;
}

.w3-modal-content {
  display: block;
  margin: auto;
  width: 80vw;
}

.expanded {
  display: block;
  width: 100%;
}

.UnaSlides { padding: 0; }

/* ==============================
   Animation
   ============================== */
.fade {
  animation: fade 1.5s linear;
}

@keyframes fade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

@keyframes dragonFadeIn {
  to {
    opacity: 0.7;
  }
}

@keyframes dragonGentlePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
    filter: brightness(1.1) drop-shadow(0 0 16px rgba(120, 100, 220, 0.7));
  }
  50% {
    transform: scale(1.01);
    opacity: 0.7;
    filter: brightness(0.9) drop-shadow(0 0 10px rgba(120, 100, 220, 0.3));
  }
}

/* ==============================
   Links
   ============================== */
a {
  text-decoration: none;
  color: var(--color-link);
}

a:visited { color: var(--color-link-visited); }
a:hover,
a:active { color: var(--color-link-hover); }