/* Fonts */
@font-face {
    font-family: 'TC Block Party';
    src: url('Fonts/TC Block Party Bold.otf');
    src: url('Fonts/TC Block Party Bold.woff') format('woff'), /* Modern Browsers */
	     url('Fonts/TC Block Party Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('Fonts/TC Block Party Bold.svg') format('svg'); /* Legacy iOS */
}

/* Base Styling */
body
{
  line-height:1.4;
  font-size:18px;
  color:#444;
  background-color: #EEEEEE;
  /* Parallax support */
  scroll-behavior: smooth;
}
.content
{
  margin:40px auto;
  max-width:650px;
  line-height:1.4;
  font-size:18px;
  color:#444;
  background-color: #EEEEEE;
  padding:0 10px;

  /* Center on both mobile and web screens*/
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* Parallax support */
  scroll-behavior: smooth;
}
h1,h2,h3
{
  line-height:1.2
}

section,
dialog:open,
header {
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

section summary {
  padding: 1rem 0rem;
}

a {
  text-underline-offset: 0.3rem;
}

p {
  line-height: 2;
  text-indent: 2.5rem;
  max-width: 70ch;
}

ul {
  list-style: none;
}

li {
  margin: 0.25rem 0;
}

.image-banner
{
  background: url('Images/webp_work_header_lego_party.webp');
  background-attachment:relative;
  background-repeat: no-repeat no-repeat;
  background-size: 100%;
}

.image-banner > h1, summary, aside {
  text-shadow: 1px 1px 2px black;
}

.image-banner > details > summary {
  font-size: 1.5em;
  padding: 0 0;
}

summary::marker {
  content: "▲";
}

details[open] summary::marker {
  content: '▼';
}

/* Parallax scrolling behaviour */
.parallax-container {
    position: relative;
    height: 100vh;
    max-width: 100%;
    max-height: 150vw;
    overflow: hidden;
}

.parallax-layer {
    position: absolute;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: space-between;
    font-size: 3rem;
    will-change: transform;
    pointer-events: none;
}

.parallax-inner {
    padding:2.5vh;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    text-align: center;
}

.fullwidth-container {
    width: 90vw;
    margin: 0 0;
    border: 0 0;
    padding: 0 0;
    margin-left: -10vw;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


/* Base colours */
.bg-red {
  background: hsl(346 70 40%);
}

.bg-cream {
  background: hsl(45, 28.8%, 87.4%);
}

.bg-cream-fade {
  background: hsla(43, 27%, 87%, 0.916);
}

.bg-red-fade {
  background: hsla(346, 70%, 40%, 0.9);
}

.col-grey {
  color:#444;
}

.col-ivory {
  color:#EEEEEE;
}

.rounded {
    border-radius: 50%;
}

/* Popup Modals */
dialog:open {
  background: hsl(45, 28.8%, 87.4%);
  margin: auto auto;
  max-width:650px;
  line-height:1.4;
  font-size:18px;
  color:#212121;
  padding:1rem 2rem;
  display: block;
  text-align: left;
  align-items: left;
}

/* Layout modifiers */
.stretch-to-fit {
  margin:0px auto;
}

.stretch-to-fit:open {
  align-items: center;
  text-align: center;
}

.left-align {
  text-align: left;
  align-items: left;
}

/* Rounded circle buttons */
div:has(> .btn) {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.btn {
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: 0;
  border-radius: 20000000px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-1,
.btn-3,
.btn-4,
.btn-5 {
  background-color: lightblue;
  border: 2px solid lightblue;
}

.btn-1:hover {
  opacity: 0.75;
}

.btn-2 {
  border: 2px solid lightblue;
}

.btn-2:hover {
  background-color: #add8e655;
  opacity: 0.75;
}

/* Overlay and underlay images with easing */
.align-center {
    display: flex;
    align-content: center;
    justify-content: center;
}

.flex-horizontal-image {
    display: flex;
    width:fit-content;
    height:fit-content;
}

/* Parallaxing character portraits */
#parallax-character-tambo {
  width: 18vw;
  max-width: 18vh;
}

/* Tween-in keyframes */
@keyframes reveal {
    from {
    opacity: 0;
    transform: translate(0px,100px);
    }
    to {
    opacity: 1;
    transform: translate(0px,0px);
    }
}

@keyframes reveal-overlap {
    from {
    opacity: 0;
    transform: translate(0px,-100px);
    }
    to {
    opacity: 1;
    transform: translate(0px,-200px);
    }
}

.revealing-image {
    animation: reveal 1s ease both;
    animation-timeline: view();
    animation-range: cover 0% cover 50%;
}

.revealing-animation {
    animation: reveal-overlap 1s ease both;
}

/* Expandable Containers */
.expandable-container {
    width: 100%;
    overflow: hidden;
    transition: max-height 0.7s ease;
    position: relative;
    cursor: pointer;
}

/* Character portraits that scale differently on mobile*/

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 650px) and (orientation: portrait){
  body {
    margin: 0 auto;
    text-align: center;
    display: block;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    overflow: hidden scroll;
  }
  .content {
    max-width: 95%;
  }
  /*Correctly scale 'dan g technical artist' in overview*/
  span > img {
    max-width: 90%;
    padding:0 0;
    margin: 0 20px;
  }
  /*Resize social button/parallax characters to screen width*/
  .hero-character-div {
    width:100%;
  }
  .align-center {
    width:100%;
  }
  /* Character portraits */
  .align-center > .flex-horizontal-image {
    width: 20vw;
  }

  /* Debugging: make backgrounds red when in mobile mode 
  */
  div {
    background-color: #fe1b1b69;
  }
}