:root {
    --content-primary: #006666;
    --content-secondary: #009999;
    --content-tertiary: #666666;
    --content-primary-inverse: #CCFFCC;
    --content-tertiary-inverse: #009999;
    --content-link: #FFFFCC;
    --content-link-inverse:#666600;
    --colour-neutral: #FEFAE0;
    --background-primary: #99FF99;
    --background-secondary: #009900;
    --background-inverse: #006666;
    --watermark: #006969;
    --white: #FFFFFF;
    --background-infor-subtle: #666600;
    --border-radius-btn: 999px;
    --border-radius-card: 15px;
    --max-width: 58.5rem;
    --h2: max(3rem, 7.594cqi);
    --h6: max(2rem, 3cqi);
    --gutter-vertical: 2rem;
    --gutter-horizontal: 1rem;
    --font-family-primary: "OV Treasure", serif;
    --font-family-secondary: "TT Interphases Pro", sans-serif;
    --font-family-teriary: "Sink", serif;
    --font-family-quaternary:"Calive Drawn", serif;

    /* Global transition values */
    --td: 150ms;
    --te: cubic-bezier(0.215, 0.61, 0.355, 1);
}

@font-face {
    font-family: 'Calive Drawn';
    src: url('./fonts/CaliveDrawn-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Ogg Text';
    src: url('./fonts/OggText-Extrabold.otf') format('opentype');
}

@font-face {
    font-family: 'Awesome Shorten';
    src: url('./fonts/Awesome-Shorten.ttf') format('truetype');
}

@font-face {
    font-family: 'TC Jovial Pro';
    src: url('./fonts/TcjovialproRegular.otf') format('opentype');
}

@font-face {
    font-family: 'Sink';
    src: url('./fonts/Sink.ttf') format('truetype');
}

@font-face {
    font-family: 'OV Treasure';
    src: url('/fonts/OVTreasureDemo-Light.otf') format('opentype');
}

@font-face {
    font-family: 'TT Interphases Pro';
    src: url('/fonts/TT\ Interphases\ Pro\ Trial\ Regular.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-family-secondary), serif;
    background: var(--background-primary);
    overflow-x: hidden;
    background-position: center;
}

.pointer {
    cursor: url("./img/pointer-1.png"), auto;    
}

a:hover,
a:focus {
    cursor: url("./img/pointer-2.png"), auto; 
}


main {
    width: var(--max-width);
    margin: 0 auto;
    overflow: hidden;
}

h2 {
    text-transform: uppercase;
    font-family: var(--font-family-teriary), sans-serif;
    font-size: var(--h2);
    max-width: var(--max-width);
    margin: 0 auto;
}

h6 {
    font-family: var(--font-family-quaternary), sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    font-size: var(--h6);
}

.link {
    text-decoration: underline; 
    text-decoration-thickness: .07rem;  
    text-underline-offset: 0.2rem; 
    font-size: 1rem;
}

.btn {
    border-radius: var(--border-radius-btn);
    font-weight: 600;
    padding: 1rem;
    text-decoration: none;
    color: var(--white);
    display: inline-block;
    text-align: center;
}

p {
    line-height: 1.5;
    font-size: 1.2rem;
}

/* SCROLLBAR */

::-webkit-scrollbar {
    width: .5rem;
}

::-webkit-scrollbar-thumb {
    background: var(--content-primary); 
}

/* HEADER */

.header {
    pointer-events: none;
}

.header__logo,
.nav__label,
.header__nav {
    pointer-events: auto;
}

.header__logo {
    background-color: transparent;
}

.header__logo-text {
    text-decoration: none;
    font-weight: bold;
    color: var(--white);
    width: 100%;
}

@media (min-width: 64.0625rem) {
    [id="main-navigation-toggle"] {
        opacity: 0;
        position: fixed;
        top: -100%;
    }

    .header {
        background-color: transparent;
        font-family: var(--font-family-secondary);
        font-size: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 10; 
        mix-blend-mode: difference;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 1rem 0;
    }

    .header__nav {
        display: flex;
        align-items: center;
        background-color: transparent;
    }

    .header__nav-list {
        list-style: none;
        display: flex;
        align-items: center;
        background-color: transparent;
    }

    .header__nav-item:not(:last-of-type) {
        margin-right: 2.5rem;
        background-color: transparent;
    }

    .header__nav-item:hover {
        text-decoration: underline;
        text-decoration-thickness: .1rem; 
        text-decoration-color: var(--white); 
        text-underline-offset: 0.2rem; 
    }

    .header__nav-link {
        text-decoration: none;
        color: var(--white);
        font-weight: bold;
    }
}

/* HERO */

.main {
    width: 100%;
}

.hero__title {
    font-family: var(--font-family-primary), sans-serif;
    font-size: max(10rem, 15cqi);
    color: var(--content-primary);
    line-height: max(10rem, 15cqi);
    white-space: nowrap;
}

.marquee {
    display: flex;
    margin: 0 auto;
    margin-top: 5rem;
    margin-bottom: 2rem;
}

.hero__description {
    width: max(5rem, 38cqi);
    margin: 0 auto;
    margin-bottom: 2rem;
    color: var(--content-tertiary);
    font-weight: 600;
}

.hero__link:link,
.hero__link:visited {
    color: var(--colour-primary);
}

.hero__cta {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero__cta li {
    list-style: none;
}

.hero__cta li:first-of-type {
    margin-right: 1rem;
}

.hero__cta li:last-of-type {
    margin-right: 1rem;
}

.hero__cta-btn-primary {
    list-style: none;
    background-color: var(--background-secondary);
    border: .0625rem solid var(--background-secondary);
    margin-right: 1rem;
    width: 100%;
}

.hero__cta-btn-secondary {
    list-style: none;
    border: .0625rem solid var(--background-secondary);
    color: var(--background-secondary);
    margin-left: 1rem;
    width: 100%;
    color: var(--background-secondary);
    padding: 1rem;
}

 .hero__images {
    display: flex;
    margin: 5rem auto;
    margin-left: -10%;
}

.hero__image {
    width: max(20rem, 40cqi);
}

/* GRID */

.grid {
    margin: var(--gutter-vertical) auto;
}

.row {
    width: 100%;
    margin: 0 auto;
}

/* clear fix */
.row::after {
    content: "";
    display: table;
    clear: both;
}

.row:not(:last-child) {
    margin-bottom: var(--gutter-vertical);
}

.col-1-of-2 {
    width: calc((100% - var(--gutter-horizontal))/2);
    float: left;
}

.col-1-of-2:not(:last-child) {
    margin-right: var(--gutter-horizontal);
}

.col-1-of-3 {
    width: calc((100% - 2 * var(--gutter-horizontal))/3);
    float: left;
}

.col-2-of-3 {
    width: calc(2 * ((100% - 2 * var(--gutter-horizontal)) / 3));
    float: left;
}

.col-1-of-3:not(:last-child) {
    margin-right: var(--gutter-horizontal);
}

.col-2-of-3:not(:last-child) {
    margin-right: var(--gutter-horizontal);
}

/* PROJECTS */

.projects {
    width: 100%;
    background-color: var(--background-inverse);
    padding: 5rem 0;
}

.projects__title {
    color: var(--content-primary-inverse);
    text-align: center;
    width: 100%;
    margin-bottom: 5rem;
}

.project {
    max-width: var(--max-width);
    margin: 0 auto;
    background-color: var(--background-primary);
    border-radius: var(--border-radius-card);
    padding: 1rem;
}

.project__image {
    height: 30rem;
    margin: 0 auto;
    background: url(./img/placeholder.jpg);
    background-position: center;
    background-size: cover;
    border-radius: var(--border-radius-card);
}

.project__title {   
    color: var(--content-tertiary-inverse);
    margin-bottom: 1rem;
}

.project__info-container {
    display: flex;
    width: 100%;
    margin-bottom: 2rem;
}

.project__info {
    color: var(--background-inverse);
    background-color: var(--white);
    padding: .5rem 1rem;
    margin-right: 1rem;
    border-radius: var(--border-radius-card);
}

.project__link {
    background-color: var(--background-secondary);
    color: var(--white);
}

/* ABOUT */

.about {
    width: 100%;
    padding: 3rem 0;
    background-color: var(--colour-neutral-alpha);
}

.about__title {
    color: var(--content-primary);
    text-align: center;
}

.about__content {
    max-width: var(--max-width);
}

.about__image {
    width: 10rem;
    height: 15rem;
    border-radius: var(--border-radius-card);
    background: url(./img/nigel.jpg);
    background-position: center;
    background-size: cover;
    margin: 0 auto;
    margin-bottom: 1rem;
}

.about__heading {
    text-align: center;
    color: var(--content-tertiary-inverse);
    margin-bottom: 2rem;
}

.about__description {
    color: var(--content-tertiary);
    text-align: center;
    font-weight: 600;
}

/* FOOTER */

.footer {
    width: 100%;
    background-color: var(--background-inverse);
    padding-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
    overflow: hidden;
    height: 100vh;
}

.footer__title {
    color: var(--background-primary);
    position: absolute;
    font-size: max(7rem, 10cqi);
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 5;
}

.footer__contact-info {
    max-width: var(--max-width);
    margin: 0 auto;
    position: absolute;
    top: 20rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.footer__contact-info p {
    margin-bottom: 1rem;
}

.footer__link {
    color: var(--content-link);
}

.footer__watermark {
    max-width: 100%;
    text-align: center;
    font-size: max(20rem, 40cqi);
    line-height: max(5rem, 20cqi);
    color: var(--watermark);
    position: absolute;
    margin: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.footer__copyright {
    max-width: var(--max-width);
    color: var(--background-primary);
    text-align: center;
    font-size: 1rem;
    z-index: 5;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 64rem) {

    .hero__description {
        width: max(50%, 38cqi);
    }

    .header {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        background-color: transparent;
    }

    .header__logo {
        cursor: pointer;
        position: fixed;
        left: 0;
        top: .8rem;
        z-index: 98;
        mix-blend-mode: difference;
    }
    
    /* NAVIGATION TOGGLE */
    [id="main-navigation-toggle"] {
        opacity: 0;
        position: fixed;
        top: -100%;
    }

    [id="main-navigation-toggle"] ~ .nav__label {
        cursor: url("./img/pointer-2.png"), auto;
        position: fixed;
        height: 3rem;
        width: 3rem;
        right: 1rem;
        top: 0;
        z-index: 100;
        mix-blend-mode: difference;
    }

    .nav__label span {
        display: block;
        height: 3rem;
        width: 3rem;
        padding: 0.5rem;
        position: relative;
        transition: transform calc(var(--td) * 3) var(--te);
    }

    .nav__label span::before,
    .nav__label span::after {
        content: '';
        background-color: var(--white);
        height: .2rem;
        width: 3rem;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        transition: transform calc(var(--td) * 3) var(--te);
    }

    .nav__label span::before {
        transform: rotate(0) translateY(-100%)
    }

    .nav__label span::after {
        transform: rotate(0) translateY(100%)
    }

    /* NAVIGATION TOGGLE CHECKED*/

    [id="main-navigation-toggle"]:checked ~ .nav__label span {
        transform: rotate(1turn);
    }
    
    [id="main-navigation-toggle"]:checked ~ .nav__label span::before {
        transform: rotate(45deg);
    }
    
    [id="main-navigation-toggle"]:checked ~ .nav__label span::after {
        transform: rotate(-45deg);
    }

    [id="main-navigation-toggle"]:checked ~ .header .header__nav {
        left: 0;
        transition: transform 0s;
    }

    [id="main-navigation-toggle"]:checked ~ .header .header__nav::before,
    [id="main-navigation-toggle"]:checked ~ .header .header__nav::after {
        transform: translateX(0);
        transition-delay: 0s;
    }

    [id="main-navigation-toggle"]:checked ~ .header .header__nav::after {
        transition-delay: calc(var(--td) / 2);
    }

    [id="main-navigation-toggle"]:checked ~ .header .header__nav .header__nav-item {
        opacity: 1;
        transform: translateX(0);
        transition: 
        opacity calc(var(--td) * 2) var(--te),
        transform calc(var(--td) * 2) var(--te);
    }

    .header__nav-item:nth-child(1) {
        transition-delay: calc(var(--td) * 2 * (1 * 0.25));
        z-index: -1;
    }

    .header__nav-item:nth-child(2) {
        transition-delay: calc(var(--td) * 2 * (2 * 0.25));
        z-index: -2;
    }

    .header__nav-item:nth-child(3) {
        transition-delay: calc(var(--td) * 2 * (3 * 0.25));
        z-index: -3;
    }

    .header__nav-item:nth-child(4) {
        transition-delay: calc(var(--td) * 2 * (4 * 0.25));
        z-index: -4;
    }

    /* HEADER NAV LIST */
    .header__nav-list {
        position: relative;
        text-align: center;
        z-index: 1;
    }

    .header__nav-list > .header__nav-item {
        font-family: var(--font-family-secondary);
        font-size: 10vmin;
    }

    .header__nav-item {
        display: block;
        position: relative;
    }

    .header__nav-item:hover .header__nav-link::before,
    .header__nav-item:hover .header__nav-link::after {
        animation: blink 1s var(--td) steps(1, end) forwards infinite;
        transform: translateX(calc(100% - 0.5rem));
        transition-duration: calc(var(--td) * 3);
    }
        
    .header__nav-item:hover .header__nav-link::after {
        transition-delay: calc(var(--td) / 2);
    }

    /* HEADER NAV */
    .header__nav {
        align-items: center;
        display: flex;
        justify-content: center;
        height: 100%;
        width: 100%;
        position: fixed;
        left: -100%;
        transition: 
          left 0s calc(var(--td) * 2),
          transform 0s calc(var(--td) * 2);
    }
        
    .header__nav::before,
    .header__nav::after {
        content: '';
        background-color: var(--background-inverse);
        height: 50%;
        left: 0;
        position: absolute;
        transform: translateX(-110%);
        transform-origin: 0 50%;
        transition: transform calc(var(--td) * 2) var(--td) var(--te);
        width: 100%;
        z-index: -100;
    }
        
    .header__nav::before {
        top: 0;
    }
        
    .header__nav::after {
        bottom: 0;
    }
        
    .header__nav-item {
        opacity: 0;
        transform: translateX(-1rem);
        transition: 
        opacity var(--td) var(--te),
        transform var(--td) var(--te);
    }

    /* HEADER NAV */

    .header__nav {
        position: relative;
        text-align: center;
        z-index: 1;
    }

    .header__nav-item {
          font-family: var(--font-family-secondary);
          font-size: 10vmin;
    }

    /* HEADER LINK */

    .header__nav-link {
        color: var(--content-primary-inverse);
        display: inline-block;
        font-weight: 900;
        overflow: hidden;
        padding: 0.5rem 1rem 0.125rem;
        position: relative;
        text-decoration: none;
        transition: 
          color var(--td) var(--te),
          opacity var(--td) var(--te),
          transform var(--td) var(--te);
        z-index: 1;
    } 
        
    .header__nav-link::before,
    .header__nav-link::after {
        content: '';
        background-color: var(--content-primary-inverse);
        height: 50%;
        left: 0;
        position: absolute;
        transform: translateX(-110%);
        transform-origin: 0 50%;
        transition: transform 0s var(--te);
        width: 100%;
        z-index: -1;
    }
        
    .header__nav-link::before {
        top: 0;
    }
        
    .header__nav-link::after {
        bottom: 0;
    } 

    /* NAV HOVER SYTLE */
    .header__nav-list:not(:focus-within):not(:hover) .header__nav-link { 
          opacity: 1;
          transform: translate(0, 0);
    }
      
    .header__nav-item {
        --pull: 30%;
    }
        
    .header__nav-link {
        opacity: 0.25;
        transition-duration: calc(var(--td) * 3);
        transform: translate(0, calc(var(--pull) * -1));
    }

    .header__nav-item:hover > .header__nav-link {
        color: var(--content-primary-inverse);
        opacity: 1;
        transform: translate(0, 0);
    }
          
    .header__nav-link:hover {
        color: var(--content-primary-inverse);
        transition-delay: 0s;
    }
        
    .header__nav-item:hover ~ .header__nav-item > .header__nav-link {
        transition-duration: calc(var(--td) * 3);
        transform: translate(0, var(--pull));
    }

    /* ANIAMTIONS */
      
    @keyframes blink {
        50%, 100% { opacity: 0 }
    }

    .project {
        width: 95%;
    }

    .footer__contact-info {
        width: 95%;
    }
}

@media screen and (max-width: 768px) {
    .hero__description {
        width: max(60%, 38cqi);
    }

    .hero__images {
        margin-left: -20%;
    }

    .project__image {
        height: 20rem;
    }
}

.no-scroll {
    overflow: hidden;
    height: 100vh;
}

@media (max-width: 89.5rem) {
    .header__logo {
        margin-left: 1rem;
    }

    .header__nav-list {
        margin-right: 1rem;
    }

    .about {
        padding: 3rem 1rem ;
    }

    .hero__images {
        margin-left: -10%;
    }

}

@media (max-width: 670px) {
    .col-1-of-2 {
        width: 100%;
        display: block;
    }

    .col-1-of-3 {
        width: 100%;
        display: block;
    }

    .col-2-of-3 {
        width: 100%;
        display: block;
    }

    .project__image {
        margin-bottom: 1rem;
    }

    .footer__contact-info {
        top: 13rem;
    }

    .footer__contact-info p {
        width: 100%;
        text-align: left;
    }

    .footer__title {
        text-align: left;
        width: 95%;
    }

    .about__senary-title {
        margin-bottom: 1rem;
    }

    .hero__description {
        width: max(90%, 38cqi);
    }

    .hero__images {
        margin-left: -40%;
    }
}

@media (max-width: 480px) {
    .project__image {
        margin-bottom: 1rem;
        height: 15rem;
    }
}

@media (max-width: 390px) {
    .footer__contact-info {
        top: 20rem;
    }
}

@media (min-width: 1585px) {
    :root {
        --max-width: 100%
    }

    .footer__contact-info {
        padding: 0 15rem;
        padding-top: 5rem;
    }

    .about__title {
        text-align: center;
    }

    .about__content {
        padding: 2rem 15rem;
    }

    .projects__title {
        text-align: center;
    }

    .project {
        padding: 2rem 15rem;
    }

    html {
        font-size: 32px;
    }
        
}