/* reset styles */
*, *::before, *::after {box-sizing: border-box}
* {margin: 0;}
img {height: 100%;}
html {interpolate-size: allow-keywords;}
body {--webkit-font-smoothing: antialiased; background: #F0F0FF; color: #333; font-family:inter; font-weight:500;}

/* elements appear on desktop or mobile only */
[desktop] {display: none !important;}
[mobile] {display: initial !important;}

@media screen and (min-width:980px) {
  [desktop] {display: initial !important;}
  [mobile] {display: none !important;}
}

nav {
  width:100%;
  &, & * {height:90px;}
  background: #FFF2E3;

  & #navContent {
    margin:auto;
    width:100%;

    @media screen and (min-width:1523px) {& {width:45%; line-height:90px;}}
    
    & #navLeft {
      height:100%; width:100vw;
      display:inline-block;
      text-align: left;
      & a {text-decoration: none; color:#333;}
      & #clipHistIcon {padding:15px 11px 0px 11px; height:70px; filter:drop-shadow(0px 5px 3px #ccc);}
      & #clipHistSpan {font-family: Roboto Mono; font-weight:bold; font-size: 36px; letter-spacing: -2px;}
      @media screen and (min-width:1523px) {
        & {width:35%;}
      }
    }
    
    & #navRight {
      height:30px; width:100vw; padding-right:5%;
      text-align:right;
      transform:translatey(-9px);

      @media screen and (min-width:1523px){
        & {
          display:inline-block; height:100%; width:59%; margin-right:0; display:inline-block; vertical-align:bottom;
        }
      }

      @media screen and (min-width:980px) and (max-width:1522px) {
        /* between 980 and 1522, move links upward */
        & {
          margin-top:-32px;
        }
      }

      & a {
        text-decoration: none;
        color:white;
        background-color:#7EB8BC;
        transition:background-color .2s, box-shadow .2s;
        padding:1px 19px; margin:0px 3px; border-radius:5px;
        box-shadow:0px 3px 3px #ddd;
        
        &:hover {
          background-color:#9ADDE1 !important; 
          box-shadow:0px 3px 5px #bbb;
        }
      }
    }
  }
}

#swoops {
  display:block; margin:0; width:100%; height:600px;
  background:white; position:absolute; z-index:0;

  & #swoopTop, & #swoopBottom {
    display:block; width:100%; height:300px;
    background-size:100% 100%;
    background-position:center top;
    background-repeat:no-repeat;
  }

  & #swoopTop {background-image:url(images/swoopTop.png); filter:drop-shadow(0px 17px 9px #ccc);}
  & #swoopBottom {background-image:url(images/swoopBottom.png); filter:drop-shadow(0px -17px 9px #ccc)}
}

.powerBlock {
  width:320px; height:100px;
  display:flex; flex-wrap:wrap;
  position:relative;

  & h2.powerBlockTitle {
    width:320px; height:20px;
    font-weight:bold; font-family: Roboto Mono;
    margin-bottom:39px; text-decoration: none !important;
    margin-left:-27px;
  }
  & .powerBlockContent {
    width:320px; min-height:40px; padding:11px 9px;
    border: 2px solid #979797; border-radius:1px;
    background:white; color: #333;
    font-family: Source Serif Pro; font-size:18px;
    vertical-align:middle;
  }

  &#upgradeBlock {
    top:80px; margin-left:-50px;
  }

  &#missionBlock {
    text-align: right; left:100%; margin-left:-350px; top:150px;
    height: 120px;

    & h2.powerBlockTitle {text-align:right; margin-left:0;}
  }

  @media screen and (max-width:979px) {
    &#upgradeBlock {
      top:0px; margin-left:5%;
    }
    &#missionBlock {
      top:80px;
    }
  }
}

#powerBlocks {
  margin-bottom:200px;
  @media screen and (min-width:980px) {
    margin-bottom:240px;
  }

  & .powerBlock {z-index:1;}

  & #moneyShot{
    & img {width:100%; max-width:680px;}

    z-index:0; display:block;
    width:75%;
    position:absolute;
    top:-100px; right:0;
    transform:rotate3d(19,-13,5, 35deg);
  }
}


#bodyContent {
  width:100%;
  padding:0 3%; z-index:1;
  position:relative;
  top:20px;

  @media screen and (min-width:980px) {
    width:45%; margin:auto; padding: 0 0;
    margin-top:500px; top:-350px;
  }

  & h2 {
    font-family:Roboto Mono;
    font-size: 3rem;
    font-weight:900;
    text-decoration: underline;
    text-align:center;
    width:100%;
    letter-spacing: -3px;
    color:#222;
  }

  & section {
    width:100%; display:block;
    margin-bottom:128px;

    &#howItWorks {
      text-align: center;

      & #keyImages {
        width:100%; display:block; filter:drop-shadow(0px 3px 3px #aaa);
        text-align:center;
        &, & img {height:70px; margin:2px; margin-top:5px;}
      }
    }
  }
}

#createdBy {
  padding-right:5%; margin-bottom:15px;
  font-size:medium; font-weight:normal;
  display:block; width:100%; text-align:right;
  color: #BDBDCA;

  & a {
    display:inline-block;
    position:relative;
    color: #a5a5b5;
    text-decoration: none;

    &:hover{color:#9292a0; transition:color;}

    &::after {
      content: '';
      position:absolute;
      width: 100%;
      transform:scaleX(0);
      height:2px;
      bottom:0;
      left:0;
      background-color:#a5a5b5;
      transition: transform .2s ease-out, color .2s;
    }

    &:hover::after {
      transform:scaleX(1);
      transform-origin:bottom center;
      color: #9292a0;
    }
  }
}

#sitemap {visibility:collapse;}