/* overall webpage section */
:root {
    --bar-height: 80px;
    --outline-value: 4px solid #0000bb;
    --outline-offset: 4px;
    --background-color-default: #ffffff;
    --background-color-inverted: #333333;
    --text-off-black: #333333;
    --text-white: #ffffff;
    --focus-opacity: 0.7;
    --button-padding: 16px 24px;
    --button-padding-back: 16px 24px 16px 0px;
    --button-font-size: 1rem;
    --button-border-radius: 48px;    
    --card-margin: 60px 0;
    --card-margin-mobile: 80px 0;
    --card-space-desc: 0 0 16px 0;
    --card-padding: 0 0 0 24px;
    --card-padding-mobile: 16px 24px;
    --transition: 0.2s;
    --h1-padding: 24px 0;
    --icon-padding: 16px;
    --paragraph-margin: 8px 0;
    --grid-gap: 16px 40px;
    --grid-gap-mobile: 8px 0; 
    --content-title-margin: 12px 24px 0 0;
    --content-section-margin: 100px 0;
    --content-heading-margin: 80px;
    --content-heading-margin-mobile: 60px;
    --content-text-padding: 24px 0;
    --content-image-margin: 0;
    --space-desktop-large: 60px;
    --space-desktop-medium: 40px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0 auto;
    color: var(--text-off-black);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    line-height: 1.4;
    letter-spacing: 1.2px;
    padding: 0px 24px;
    max-width: 1072px;
}

a.globalnav {
    color: var(--text-off-black);
    text-decoration: none;
}

a:focus:not(:active) {
    outline: var(--outline-value);
    outline-offset: var(--outline-offset);
    border-radius: var(--button-border-radius);
}

a:visited {
    text-decoration: none;
}

.skip {
  position: absolute;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip:focus {
  position: static;
  width: auto;
  height: auto;
}

figure { 
    margin: 0;
}

figcaption {
    text-align: center;
}

#go-to-top {
  display: none; 
  position: fixed;
  bottom: 20px; 
  right: 20px; 
  z-index: 99; 
  border: none; 
  cursor: pointer;
  background-color: var(--background-color-inverted);
  border-radius: var(--button-border-radius);
  color: white; 
  padding: var(--icon-padding);
  font-size: var(--button-font-size);
}

#go-to-top:hover {
  opacity: var(--focus-opacity);
}

.back-button {
    background: none;
    border: none;
    color: var(--text-off-black);
    font-size: var(--button-font-size);
    border-radius: var(--button-border-radius);
    padding: var(--button-padding-back);
    margin-top: -8px;
    margin-bottom: 8px;
    transition: var(--transition);
}

.back-button::before {
    content: "\2B05";
    padding-right: 2px;
}

.back-button:hover {
    background-color: var(--background-color-inverted);
    color: var(--text-white);
    border: none;
    padding: var(--button-padding);
}

.back-button:focus {
    opacity: var(--focus-opacity);
    outline: var(--outline-value);
    outline-offset: var(--outline-offset);
}





/* global nav section*/
div.globalnav {
    background-color: var(--background-color-default);
    height: var(--bar-height);
    /* position:fixed;
    overflow: auto;
    width: 95%;
    top: 0; 
    z-index: 1; 
    max-width: 1024px;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div.globalnav a {
    text-align: center;
    text-decoration: none;
    position: relative;
}

a.globalnav-home img {
    vertical-align: sub;
    margin-right: 4px;
    transform: rotateY(0);
    transition: transform 0.4s ease-out;
}

a.globalnav-home {
    padding: 16px 0px;
    text-decoration: none;
    transition: var(--transition);
}

a.globalnav-home:hover img {
    transform: rotateY(360deg);
}

a.globalnav-home span {
    position: relative;
}

a.globalnav-home span::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -12px;
    left: 0;
    background-color: var(--text-off-black);
    transform-origin: bottom center;
    transition: transform var(--transition) ease-out;
}

a.globalnav-home:hover span::after {
    transform: scaleX(1.1);
}

a.globalnav-home:active {
    opacity: var(--focus-opacity);
}

div.globalnav-contents li {
    display: inline-block;
}

div.globalnav-contents a {
    padding: var(--button-padding);
    transition: var(--transition);
}

div.globalnav-contents a::before {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 4px;
    left: 0;
    background-color: var(--text-off-black);
    transform-origin: bottom center;
    transition: transform var(--transition) ease-out;
}

div.globalnav-contents a:hover::before {
    transform: scaleX(0.6);
}

div.globalnav-contents a:active {
    opacity: var(--focus-opacity);
}

.mobile-menu {
    display: none;
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
}

.overlay {
  height: 0;
  width: 100%;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  background-color: #fff; 
  overflow-x: hidden; 
  transition: var(--transition);
  display: none;
}

.overlay-content {
  position: relative;
  top: 35%;
  width: 100%; 
  text-align: center;
  font-size: 1.5rem;
}

.overlay ul {
    padding: 0;
}

.overlay a {
  padding: var(--button-padding);
  display: block; 
  margin: 0;
}

.overlay a:hover, .overlay a:focus {
  opacity: var(--focus-opacity);
}

.overlay .closebtn {
  position: absolute;
  color: var(--text-off-black);
  top: 4px;
  right: 16px;
  font-size: 2rem;
  padding: var(--button-padding);
}





/* footer */
div.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div.footer-contents ul {
    padding: 0;
    margin: 0;
}

div.footer-contents li {
    display: inline-block;
}

a.icon-link {
    padding: 24px 8px 8px 8px;
}

a.icon-link img {
    border-radius: var(--button-border-radius);
    transition: var(--transition);
}

a.icon-link:hover img {
    outline: 3px solid var(--text-off-black);
    outline-offset: 8px;
}    

a.icon-link:active {
    opacity: var(--focus-opacity);
}




/* 404 page */
.missing {
    padding: 20%;
    text-align: center;
}

.missing-button {
    padding: var(--button-padding);
    font-size: var(--button-font-size);
    border-radius: var(--button-border-radius);
    text-decoration: none;
    background-color: var(--background-color-inverted);
    color: var(--text-white);
}

.missing-button:hover, .missing-button:focus {
    opacity: var(--focus-opacity);
}




/* Homepage */
/* Homepage - header section */
.section-home {
    padding: 120px 45% 120px 0px;
}

 /* Homepage - main section */
div.card-main {
    display: flex;
    align-items: center;
    margin: var(--card-margin);
}

div.card-image {
    flex: 3;
}

div.card-desc {
    flex: 2;
    padding: var(--card-padding);
}

div.card-desc h2 {
    margin: var(--card-space-desc);
}

div.card-desc p {
    margin: var(--card-space-desc);
    padding: var(--card-space-desc);
}

a.card-button {
    background-color: var(--background-color-inverted);
    color: var(--text-white);
    font-size: var(--button-font-size);
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
}
  
a.card-button span {
    position: relative;
    display: inline-block;
    transition: var(--transition);
}

a.card-button span::after  {
    content: " \2B95";
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: var(--transition);
}

a.card-button:hover span {
    transform: translateX(-5%);
}

a.card-button:hover span::after {
    opacity: 1;
}

a.card-button:active {
    opacity: var(--focus-opacity);
}

footer {
    height: var(--bar-height);
    text-align: right; 
}




/* Content page */
.progress-bar {
    background-color: var(--background-color-inverted);
    height: 12px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    animation-name: progress-bar;
    animation-timeline: scroll(y);
}

@keyframes progress-bar {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

h1.contentpage-h1 {
    text-align: center;
    padding: var(--h1-padding);
    /* border: 1px solid gray; */
}

.title {
    display: block;
    margin: var(--paragraph-margin);
}

div.grid-container {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: 1fr 1fr 3fr;
}

div.item1{
    grid-area: 1 / 1 / 2 / 2;
}

div.item2{
    grid-area: 1 / 2 / 2 / 3;
}

div.item3{
    grid-area: 2 / 1 / 3 / 2;
}

div.item4{
    grid-area: 2 / 2 / 3 / 3;
}

div.item5 {
    grid-area: 1 / 3 / span 2 / span 1;
} 

div.item6 {
    grid-area: 3 / 1 / span 1 / span 3;
}

div.contentpage-section-divided {
    display: flex;
    margin: var(--content-section-margin);
}

.section-left {
    flex: 4;
    margin: var(--content-title-margin);
}

div.section-right {
    flex: 7;
}

.contentpage {
    margin-top: var(--content-heading-margin);
}

li.text {
    margin-bottom: 16px;
}

div.full-area-style-1 {
    display: flex;
    flex-direction: row;
    margin-bottom: var(--space-desktop-large);
}

div.image-area-style-1 {
    flex: 2;
}

div.text-area-style-1 {
    flex: 3;
    padding: var(--space-desktop-large);
}

div.full-area-style-2 {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: var(--space-desktop-large);
}

div.image-area-style-2 {
    flex: 2;
    margin: 0 60px;
}

div.text-area-style-2 {
    flex: 3;
    padding: 80px 0;
}

a.image-link:hover {
    opacity: var(--focus-opacity);
    transition: var(--transition);
}

div.disclaimer {
    padding-left: 38%;
    margin-top: 120px;
    margin-bottom: -80px;
}

figure.extra-gap {
    margin-top: var(--space-desktop-large);
}

p.research, audio.research {
    margin-top: var(--space-desktop-medium);
}

div.full-area {
    display: flex;
    flex-direction: row;
    margin-bottom: var(--space-desktop-large);
}

div.image-area-1 {
    flex: 4;
    margin-right: var(--space-desktop-medium); 
}

div.image-area-2 {
    flex: 8;
}

.gap {
    margin-bottom: var(--space-desktop-medium);
}




/* about page */
div.introduction {
    margin: var(--content-section-margin);
    align-items: center;
}

img.selfie {
    border-radius: 16px;
}

div.about-page {
    display: flex;
    flex-direction: row;
    margin: var(--content-section-margin);
}

.about-left {
    flex: 2;
    margin-top: 4px;
    margin-right: var(--space-desktop-medium);
}

div.about-right {
    flex: 3;
}

div.about-gap {
    margin-bottom: var(--space-desktop-medium);
}

div.about-gap > p {
    margin: var(--paragraph-margin);
}




/* responsive design */
@media screen and (max-width: 767px) {
  body {
    font-size: 1rem;
  }

  /* gloabl navigation */
  a.globalnav-home img {
    vertical-align: middle;
  }

  a.globalnav-home:active span::after {
    transform: scaleX(1.1);
  }
   
  a.globalnav-home:active {
    opacity: var(--focus-opacity);
  }

  div.globalnav-contents {
    display: none;
  }

  .mobile-menu {
    display: block;
    padding: 16px 0 16px 24px;
  }

  .overlay {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: #fff; 
    overflow-x: hidden; 
    transition: var(--transition);
    display: block;
  }

  .mobile-menu:active{
    opacity: var(--focus-opacity);
  }
  
  #go-to-top {
    opacity: var(--focus-opacity);
  }

  #go-to-top:hover, #go-to-top:focus {
    opacity: 1;
  }

  .back-button:hover, .back-button:focus {
    background-color: var(--background-color-inverted);
    color: var(--text-white);
    border: none;
    font-size: var(--button-font-size);
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
    opacity: var(--focus-opacity);
}




  /* footer */
  div.footer {
    flex-direction: column;
    align-items: start;
  }

  a.icon-link:active img {
    outline: 2px solid var(--text-off-black);
    outline-offset: var(--outline-offset);
  }    

  a.icon-link:active {
    opacity: var(--focus-opacity);
  }





  /* homepage */
  .section-home {
        padding: 80px 0;
  }

  div.card-main {
    flex-direction: column;
    margin: var(--card-margin-mobile);
    align-items: stretch;
  }

  div.card-desc {
    padding: var(--card-padding-mobile);
  }

  a.card-button:active span {
    transform: translateX(-5%);
  }

  a.card-button:active span::after {
    opacity: 1;
  }

  a.card-button:active {
    opacity: var(--focus-opacity);

  }




  /* content page */
  div.grid-container {grid-template-columns: 1fr 1fr; gap: var(--grid-gap-mobile);}
  div.item1 {grid-area: 1 / 1;}
  div.item2 {grid-area: 1 / 2;}
  div.item3 {grid-area: 2 / 1;}
  div.item4 {grid-area: 2 / 2;}
  div.item5 {grid-area: 3 / 1 / span 1 / span 2;}
  div.item6 {grid-area: 4 / 1/ span 1 / span 2;}

  div.contentpage-section-divided {
    flex-direction: column;
}

  .contentpage {
    margin-top: var(--content-heading-margin-mobile);
}

div.full-area-style-1 {
    flex-direction: column;
}

div.text-area-style-1, div.text-area-style-2 {
    padding: var(--content-text-padding);
}

div.image-area-style-2 {
    margin: var(--content-image-margin);
}

div.full-area-style-2 {
    flex-direction: column;
}

div.disclaimer {
    padding-left: 0;
}

div.full-area {
    flex-direction: column;
}

div.image-area-1 {
    margin-right: var(--content-image-margin);
    margin-bottom: var(--space-desktop-medium);
}


/* about page */
div.introduction {
    margin: var(--content-image-margin);
}

div.about-page {
    flex-direction: column;
}

.about-left {
    margin-right: var(--content-image-margin);
}

img.selfie {
    padding: 0 40px;
}

/* 404 page */
.missing {
    padding: 10% 10% 30% 10%;
    text-align: center;
}

}