:root {
    --black: #0f0f0f;
    --white: #eeeeee;
    --bg-color: #070707;
    --dark-grey:#0c0c0c;
    --lg:#f3f3f3;
    --red: #fd5a5a;
    --mid-gray-1: #575757;
    --mid-gray-2:#8a8a8a;
    --accent-1:#ff9823;
    --padding: 10px 30px;
    --transition: all 0.5s ease;
    --transition-long: all 1.1s linear;
}
body{
    background-color: var(--black);
    color:var(--white);
    font-family: NMC Red;
    margin:0;
    padding:0;
    line-height: 1.25;
    position:relative;
    /* overflow-x: hidden; */
    width:100vw;
    transition: var(--transition);
}
section{
    box-sizing: border-box;
}
h1{
    font-weight: normal;
    margin:0;
}
p{
    margin:0;
}
a{
    color:var(--white);
    text-decoration: none;
    transition: var(--transition);
}
.small-type{
    font-size:16px;
    color:var(--mid-gray-1);
    font-family: NMC Red Mono;
    font-variation-settings: 'wght' 200;
    line-height: 1.5;
    transition: var(--transition-long);
}
.small-type-white{
    font-size:16px;
    color:var(--white);
    font-family: NMC Red Mono;
    font-variation-settings: 'wght' 300;
}
.grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap:20px;
}
a.header-index{
    margin-left:20px;
    color:gray;
}
a.index-active{
    color:var(--white);
}
div.header-bg{
    height:60px;
}



a.mm-site-title{
    font-size:18px;
    position: fixed;
    top:2vh;
    left:32px;
    font-variation-settings: 'wght' 700;
    z-index: 6;
  }
  a.menu-link{
    font-size:24px;
    position: fixed;
    top:12px;
    right:32px;
    z-index: 6;
    cursor:pointer;
  }
  a.disabled-link{
    color:gray;
    font-variation-settings: 'wght' 100;
  }
  p.disabled-info{
    margin-top:30px;
    right:103px;
  }
  div.menu{
    position:fixed;
    top:0;
    left:0;
    z-index: 5;
    height:60vh;
    width:100vw;
    background-color: rgb(14, 14, 14);
    padding:20px 32px;
    padding-top: 100px;
    transform: translateY(-100%);
    opacity:0;
    overflow-x: scroll;
    transition: all 0.5s ease;
    -webkit-box-shadow: 0px 10px 32px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 10px 32px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 10px 32px 0px rgba(0,0,0,0.75);
  }
  div.menu.open{
    opacity:1;
    transform: translateY(0);
  }
  div.sections-links.menu-open{
    display:none;
  }
  div.mm-links{
    display:flex;
  }
  div.mm-links a{
    display:block;
    margin-bottom:20px;
    font-size:44px;
    margin-right:60px;
  }
  p.mm-fonts-title{
    left:32px;
    /* border-bottom: 1px solid; */
    color:gray;
    margin-top:32px;
  }
  div.mm-fonts-container{
    overflow-y: hidden;
    overflow-x: scroll;
    padding: 22px 0px;
    white-space: nowrap;
  }
  @keyframes riseUp {
    0%{
      transform: skew(2deg, 2deg) translateX(50%);
      opacity: 0;
      border-radius: 50%;
    }
    100%{
      transform: skew(0deg, 0deg) translateX(0);
      opacity:1;
      border-radius: 0%;
    }
    
  }
  div.mm-font{
    display: inline-block;
    overflow:hidden;
    position:relative;
  }
  div.mm-font-inner{
    height:350px;
    width:350px;
    margin-right: 40px;
    font-size: 128px;
    display:flex;
    align-items: center;
    justify-content: center;
    border:1px solid gray;
    margin-bottom:10px;
    transform: skew(10deg, 10deg) translateX(50%);
    opacity: 0;
  }
  div.mm-font-inner.animate{
    animation: riseUp .9s .3s cubic-bezier(0.77, 0.01, 0.06, 1.01) forwards;
  }
  div.mm-fi-two.animate{
    animation-delay: .35s;
  }
  div.mm-fi-three.animate{
    animation-delay: .4s;
  }
  div.mm-fi-four.animate{
    animation-delay: .45s;
  }
  div.mm-fi-five.animate{
    animation-delay: .5s;
  }
  div.mm-font-inner.active{
    background-color:rgba(255, 255, 255, 0.76);
    color:var(--black);
  }
  div.beta-flag-small{
    opacity: 0.8;
    background-color:rgba(128, 128, 128, 0.473);
    height:24px;
    width:60px;
    position: absolute;
    bottom:0;
    right:0px;
    font-size: 14px;
    display:flex;
    align-items: center;
    justify-content: center;
    font-family: NMC Red Mono;
  }
  /* .mm-beta{
    opacity:0.7;
  } */








section.index-intro{
    /* height:60vh; */
    position: sticky;
    z-index: 1;
    top:0;
    width:70vw;
    padding:var(--padding);
    padding-top:300px;
    font-size:3vw;
    line-height: 1.3;
    letter-spacing: 0.05em;
    font-variation-settings: 'wght' 200;
    margin-bottom: 40px;
}
.index-intro-copy span{
    position:relative;
    z-index: 2;
}
.index-intro-copy span:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 28%;
    width: 100%;
    background-color: #3a5c41;
    z-index: -1;
}
section.index-content{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap:0;
    position:relative;
    z-index: 2;
}

div.index-container{
    /* border: 1px solid var(--dark-grey); */
    width:32.8333333vw;
    height:32.8333333vw;
    position:relative;
    display:flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
/* section.index-index div.index-container{
    background-color: var(--black);
    transition: all 0.5s ease;
} */
.index-detail{
    position:absolute;
}
.bottom-left-detail{
    bottom:24px;
    left:24px;
}
.bottom-right-detail{
    bottom:24px;
    right:24px;
}
.top-left-detail{
    top:24px;
    left:24px;
    font-size:18px;
    font-family:NMC Red Mono;
}
.top-right-detail{
    top:24px;
    right:24px;
}
div.aa{
    font-size:12vw;
}












footer{
    /* background-color:var(--bg-color); */
    padding: var(--padding);
    padding-top:150px;
    padding-bottom: 60px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap:20px;
}
div.divider{
    grid-column: 1/13;
    grid-row: 1;
    width:100%;
    height:1px;
    background-color:var(--mid-gray-1);
    margin-bottom:15px;
    display: none;
}
div.footer-links p{
    margin-bottom: 20px;
}
div.footer-links a{
    display:inline-block;
    margin-bottom: 20px;
    color:var(--mid-gray-2) !important;
}
div.footer-links a:hover{
    color:var(--white);
}
p.top-link{
    background-color:var(--white);
    height:180px;
    width:180px;
    border-radius: 50%;
    grid-column: 12/13;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    display:none;
}












/* INFO SECTION STYLES ======================================================== */
section.info-page-container{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap:44px;
    padding: var(--padding);
    margin-top:100px;
    min-height:70vh;
}
div.info-inner{
    /* background-color: blue; */
    font-size:24px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    width:100%;
    font-variation-settings: 'wght' 100, 'slnt' 0;
    color:#aaaaaa;
}
div.info-inner h1{
    font-size: 44px;
    width:70%;
    margin-bottom: 24px;
}
div.info-left{
    grid-column: 1/2;
}
div.info-middle{
    grid-column: 2/3;
}
div.info-right{
    grid-column: 3/4;
    font-size:18px;
}
div.info-right div{
    border-top:1px solid;
    padding-top:5px;
    margin-bottom:25px;
}
div.info-right div.services{
    margin-bottom:80px;
}
.info-one span{
    position:relative;
    z-index: 2;
}
.info-one span:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 28%;
    width: 100%;
    background-color: #3a5c41;
    z-index: -1;
}