/* ———————————————————————————————————————————————————————————————————————————————————————— */
/* —————————————————————————————————————— UNIVERSAL ——————————————————————————————————————— */
/* ———————————————————————————————————————————————————————————————————————————————————————— */
* {
  -webkit-padding-start: 0px;
  -moz-padding-start: 0px;
  padding-start: 0px;
  padding-inline: 0;
}

body {
  background: #F1F0F5;
  margin: auto;
  padding: 0 20px;
  max-width: 900px; /* was 800px */
  background-image: url(assets/bkg.png); /* Background pattern from Toptal Subtle Patterns */
}

img {
  border-radius: 4px;
  max-width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid #beb5ce;
  margin-top: 80px;
}





/* ———————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————— TYPE STYLES —————————————————————————————————————— */
/* ———————————————————————————————————————————————————————————————————————————————————————— */
/* PRIMARY BODY COPY ———————————————————————————————— */
body {
  font-family: 'Mada', sans-serif;
  color: #504a5a;
  /* other attributes in previous section */
}

p, summary, li {
  font-size: 19px;
  line-height: 1.55;
}

p {
  margin: 0 0 12px;
}

ul {
  margin: 0 0 12px 20px;
}

li {
  margin-bottom: 8px;
}

/* HEADERS ———————————————————————————————— */
h1, h2 {
  font-family: "Petrona", serif;
}

h1 {
  color: #6E4FE8;
  font-size: 32px;
  /* other attributes in next section */
}

h2 {
  font-size: 28px;
  margin: 80px 0 8px;
}

h3 {
  font-size: 21px;
  
  margin: 32px 0 6px;
  padding-bottom: 0;
}

h3 > a {
  text-decoration: none;
}

h3 > a::after {
  content: "→";
  transition: all .1s ease-in-out;
  padding-left: 4px;
}

h3 > a:hover::after {
  padding-left: 8px;
}

/* Project details H3 (project title) */
.project > h3 {
  margin: 0 0 12px;
}

/* Project details H4 (section header) */
h4 {
  font-size: 19px;
  box-shadow: inset 0px -12px 0px 0px rgb(138, 74, 222, .15);
  
  display: inline-block;
  margin: 32px 0 8px;
}

details h4:first-of-type {
  margin-top: 8px;
}

/* LINKS ———————————————————————————————— */
a, summary {
  color: #6E4FE8;
}

a:hover, summary:hover {
  color: #4f0ba5;
}

/* Header navigation text styles */
nav a {
  font-size: 19px;
  text-decoration: none;
  color: #504a5a;
  /* other attributes in next section */
}

nav a:hover {
  text-decoration: wavy underline;
  color: #504a5a;
  text-decoration-color: #6E4FE8;
}

/* HIGHLIGHTS ———————————————————————————————— */
i      { font-style: normal;
         background-color: rgb(255, 188, 96, .3); }

mark   { background-color: transparent; }
mark.A { color: #FFBB0D; }
mark.B { color: #f25630; font-weight: 700; }
mark.C { font-family: 'Noto Sans HK', sans-serif; font-size: smaller; }

/* TOOLTIPS ———————————————————————————————— */
abbr {
  text-decoration: none;
  font-variant: none;
  border-bottom: 2px dotted #FFBC60;
  cursor: help;
}

/* PROJECT CARD INTRO DETAILS ———————————————————————————————— */
.stats {
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  
  max-width: 75%;
}

.link {
  font-size: 17px;
  text-transform: none;
  color: #6E4FE8;
  
  display: block;
  float: right;
  margin-bottom: 0;
  max-width: 25%;
}

.pending {
  color: #beb5ce;
}

/* RESPONSIVE ———————————————————————————————— */
@media (max-width: 730px) {
  nav a          { font-size: 17px; }
  h1, h2         { font-size: 24px; }
  p, summary, li { font-size: 17px; }
  .stats         { font-size: 12px; }
  .link          { font-size: 14px; }
  h3             { font-size: 19px; }
  h4             { font-size: 17px; }
}




/* ———————————————————————————————————————————————————————————————————————————————————————— */
/* ——————————————————————————————————— HEADER & FOOTER ———————————————————————————————————— */
/* ———————————————————————————————————————————————————————————————————————————————————————— */
/* COMMON ———————————————————————————————— */
header, footer {
  text-align: center;
}

/* HEADER ———————————————————————————————— */
header {
  margin: 24px 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

h1 {
  /* font attributes in previous section */
  margin-bottom: 0;
  margin-right: 16px;
}

nav ul {
  text-align: center;
  margin: 24px 0 0 0;
  padding: 0;
}

nav li {
  display: inline;
}

nav ul li:first-child a {
  padding-left: 0;
}

nav a {
  /* font attributes in previous section */
  display: inline-block;
  padding: 0em .5em;
}

/* FOOTER */
footer {
  border-top: 1px solid #beb5ce;
  padding-top: 16px;
  margin-top: 40px;
}

/* RESPONSIVE ———————————————————————————————— */
@media (max-width: 730px) {
  header { flex-direction: column; 
           margin: 0 0 12px; }
  nav ul { margin-top: 12px; }
  nav a  { margin-bottom: 16px; }
}





/* ———————————————————————————————————————————————————————————————————————————————————————— */
/* —————————————————————————————————————— HERO IMAGE —————————————————————————————————————— */
/* ———————————————————————————————————————————————————————————————————————————————————————— */
img#top {
  background-image: url(assets/hero/me_photo.png),
                    radial-gradient(rgba(241, 240, 245, .00) 25%,
                                    rgba(241, 240, 245, .50) 50%),
                    url(assets/hero/me_bubbles.gif);
  background-size: cover;
  margin: 0 auto 48px; /* new, to centre when container over 800px wide */
  display: block;
}





/* ———————————————————————————————————————————————————————————————————————————————————————— */
/* ———————————————————————————————————— PROJECT CARDS ————————————————————————————————————— */
/* ———————————————————————————————————————————————————————————————————————————————————————— */
/* CARD BACKGROUND ———————————————————————————————— */
.project {
  margin: 0 0 50px 0;
  padding: 16px;
  overflow: hidden;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0px 0.6px 0.6px rgba(20, 11, 56, 0.008),
              0px 1.3px 1.3px rgba(20, 11, 56, 0.012),
              0px 2.5px 2.5px rgba(20, 11, 56, 0.015),
              0px 4.5px 4.5px rgba(20, 11, 56, 0.018),
              0px 8.4px 8.4px rgba(20, 11, 56, 0.022),
              0px 20px  20px  rgba(20, 11, 56, 0.030);
}

.project:first-of-type {
  margin-top: 32px;
}

/* TITLE AREA ———————————————————————————————— */
.logo {
  display: inline;
  float: left;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 100px;
}

/* MAIN PROJECT IMAGE ———————————————————————————————— */
.project > img {
  margin: 0px -16px;
  max-width: calc(100% + 32px);
  border-radius: 0;
}

/* YEAR, TAGS, LINK */
.project > div {
  margin: 12px 0;
}

/* RESPONSIVE ———————————————————————————————— */
@media only screen and (max-width: 500px) {
  .stats { max-width: 100% }
  .link  { float: none;
           max-width: 100%; }
}




/* ———————————————————————————————————————————————————————————————————————————————————————— */
/* ———————————————————————————————————— EXPAND PROJECT ———————————————————————————————————— */
/* ———————————————————————————————————————————————————————————————————————————————————————— */
/* EXPAND LINK ———————————————————————————————— */
summary {
  background-color: transparent;
  margin-top: 0px;
  padding-left: 12px;
  margin: 8px -16px -16px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all .1s ease-in-out;
  background-color: rgba(138, 74, 222, .1);
  outline-color: #6E4FE8;
}

summary:hover {
  padding: 8px 24px;
  background-color: rgba(138, 74, 222, .2);
}

/* COLLAPSE LINK ———————————————————————————————— */
.closeit {
  display: block;
  max-width: calc(100% + 32px);
  margin: 0px -16px -16px -16px;
  padding: 8px 16px 8px;
  border-radius: 0px 0px 8px 8px;
  text-align: center;
  text-decoration: none;
  transition: all .1s ease-in-out;
  background-color: rgba(138, 74, 222, .1);
  outline-color: #f25630;
}

.closeit:hover {
  padding: 5px 16px 11px;
  background-color: rgba(138, 74, 222, .2);
}

/* EXPANDED PROJECT AREA ———————————————————————————————— */
details {
  border-radius: 4px 4px 12px 12px;
  background-color: #ffffff;
}

details > div {
  margin: 32px 0 0 0;
}

details img {
  margin: 8px 0;
}





/* ———————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————— GRID LAYOUT —————————————————————————————————————— */
/* ———————————————————————————————————————————————————————————————————————————————————————— */
/* GENERAL GRID AREA ———————————————————————————————— */
.grid {
  display: flex;
  justify-content: space-between;
}

.twocol {
  max-width: 48%;
}

/* 3-across images (gifs) */
.threecol {
  max-width: 33%;
}

/* 3-across text (additional projects) */
.threecol.text {
  max-width: 31%;
  margin-bottom: 32px;
}

.threecol > h4 {
  margin-top: 16px;
  box-shadow: none;
}
.threecol > h4 > .logo {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.threecol > .link {
  float: none;
}

/* Intro 2/3 text area */
.introL {
  max-width: 35%;
  margin-right: 24px;
  margin-bottom: 32px;
}

.introL > h2 {
  margin: 0 0 16px;
  line-height: 1.3;
}

.locAnim {
  background-color: #ffffff;
  padding: 2px 12px 2px 2px;
  border-radius: 20px;
  display: inline-block;
}


.locAnim:before {
  content: "🌏";
  display: inline-block;
  padding: 2px 4px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: bolder;
  color: #6E4FE8;
}

.locAnim:hover:before {
  animation: changeLetter 1.5s linear infinite;
}

@keyframes changeLetter {
    0% { content: "🌏"; }
   33% { content: "🌍"; }
   66% { content: "🌎"; }
  100% { content: "🌏"; }
}

.introR {
  max-width: 60%;
  margin-top: 2px;
}

/* RESPONSIVE ———————————————————————————————— */
/* Intro 2/3 text area */
@media only screen and (max-width: 600px) {
  .grid.text        { flex-direction: column; }
  .threecol.text    { max-width: 100%; }
  .introL, .introR  { max-width: 100%; }
  .introL > h2      { margin-bottom: 8px; }
  .locAnim          { padding: 1px 12px 0px 1px; }
  .locAnim:before   { padding: 1px 2px; }
}





/* ———————————————————————————————————————————————————————————————————————————————————————— */
/* ———————————————————————————————————— INLINE BUTTON ————————————————————————————————————— */
/* ———————————————————————————————————————————————————————————————————————————————————————— */
button {
  border-radius: 6px;
  border: 1px solid #6E4FE8;
  font-size: 14px;
  padding: 3px 5px 1px 6px;
  color: #6E4FE8;
  cursor: pointer;
  overflow: hidden;
  background-color: transparent;
  transition: all .1s ease-in-out;
}

button:hover {
  color: #ffffff;
  background-color: #6E4FE8;
}

button:active {
  background-color: #d3b8f5;
}