/* Font Import */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@font-face {
    font-family: 'CreatoDisplay';
    font-weight: 400;
    font-style: normal;
    src: url('./assets/fonts/CreatoDisplay-Regular.woff2') format('woff2'),
         url('./assets/fonts/CreatoDisplay-Regular.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'CreatoDisplay';
    font-weight: 400;
    font-style: italic;
    src: url('./assets/fonts/CreatoDisplay-RegularItalic.woff2') format('woff2'),
         url('./assets/fonts/CreatoDisplay-RegularItalic.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Coolvetica';
    font-weight: 400;
    font-style: normal;
    src: url('./assets/fonts/Coolvetica-Regular.woff2') format('woff2'),
         url('./assets/fonts/Coolvetica-Regular.woff') format('woff');
    font-display: swap;
}

/* Variables */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

:root {

    /* Defining Colours */
    --mausBlack: #151516;
    --mausWhite: #EAEAE9;
    --mausOrange: #D66647;
    --mausTransparent: rgba(0, 0, 0, 0.4);

    /* Desktop and Mobile Uniform sizes */
    --defaultLeftPadding: 5vw;
    --defaultRightPadding: 35vw;

    --desktopFontSize: 1vw;
    --mobileFontSize: 3vw;
}

/* Setting default styles */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

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

/* Every page has the same background colour */
body {
    background-color: var(--mausWhite);
}

/* Headers (h1) font and padding */
h1 {
    font-family: 'Coolvetica', sans-serif;
    font-size: 2.5em;
    color: var(--mausBlack);
    padding-left: 0.2em;
}

/* Orange dot after each header */
h1::after {
    content: ".";
    color: var(--mausOrange);
}

/* Paragraphs same font */
p {
    font-family: 'CreatoDisplay', sans-serif;
    font-size: 1em;
    color: var(--mausBlack);
    padding: 1em;
    padding-top: 0.5em;
}

/* Emphasis use italic font */
em {
    font-family: 'CreatoDisplay', sans-serif;
    font-style: italic;
}

/* Span for additional orange period (buttons, navbar, etc.) */
.orange-period {
    color: var(--mausOrange);
}

/* Set Font size on Desktop */
@media (hover: hover) {

    .home-content {
        font-size: var(--desktopFontSize);
    }

    .about-me-content {
        font-size: var(--desktopFontSize);
    }
    
    .contact-container {
        font-size: var(--desktopFontSize);
    }

    .work-subcontent {
        font-size: var(--desktopFontSize);
    }
}

/* Set Font size on mobile */
@media (hover: none) {

    .home-content {
        font-size: var(--mobileFontSize);
    }

    .about-me-content {
        font-size: var(--mobileFontSize);
    }

    .contact-container {
        font-size: var(--mobileFontSize);
    }

    .work-subcontent {
        font-size: var(--mobileFontSize);
    }
}

/* Default content padding */
.home-content {
    padding-left: var(--defaultLeftPadding);
    padding-right: var(--defaultRightPadding);
}

.about-me-content {
    padding-left: var(--defaultLeftPadding);
    padding-right: var(--defaultRightPadding);
}

.contact-container {
    padding-left: var(--defaultLeftPadding);
    padding-right: var(--defaultRightPadding);
    height: 50vh;
    justify-content: space-evenly;
}

.work-subcontent {
    padding-left: var(--defaultLeftPadding);
    padding-right: var(--defaultRightPadding);
}

/* Empty Spacer element */
.spacer {
    height: 3vw;
    background-color: var(--mausWhite);
}

/* Sticky Navigation Bar */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* Navigation bar sticking to top */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--mausWhite);
    padding: 10px 20px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;    
}

/* Navigation bar items display horizontally */
.nav-options {
    display: flex;
    gap: 30px;
}

/* Undecorate links in navbar and style like headers */
.nav-item {
    font-family: 'Coolvetica', sans-serif;
    font-size: 1.5em;
    color: var(--mausBlack);
    text-decoration: none;
    position: relative;
    padding-bottom: 0em;
}

/* Add orange period after nav element dynamically */
.nav-item::after {
    content: ".";
    color: var(--mausOrange);
}

/* Hover colour */
.nav-item:hover {
    color: var(--mausOrange);
}

/* Fake 'selected' element that has no link */
.nav-item-selected {
    font-family: 'Coolvetica', sans-serif;
    font-size: 1.5em;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    color: var(--mausOrange);
    position: relative;
    padding-bottom: 0em;
}

/* Logo at the right of the bar, linking to home */
.logo {
    padding: 0.01em;
    height: 3.5em;
}

/* Home page */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* Greeting (cloud loop video with typed-out greeting text) */
.greeting {
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0vw;
}

/* video fits on full view width */
.greeting video {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    z-index: -1;
}

/* Typewriter effect 'Shaping Digital Worlds' */
#typewriterText {
    color: var(--mausBlack);
    font-size: 5vw;
    font-family: 'Coolvetica', sans-serif;
} 

/* Home page buttons (for 'works' and 'about' paragraphs.) */
.home-button-box {
    padding-left: 1em;
}

.home-button {
    background-color: var(--mausBlack);
    display: flex;
    align-items: center;
    padding: 1em 1em;
    color: var(--mausWhite);
    font-family: 'Coolvetica', sans-serif;
    font-size: 1em;
    border: 2px;
    border-style: solid;
    border-color: var(--mausBlack);
    gap: 0.1em;
}

/* Button hover animation */
.home-button:hover {
    background-color: var(--mausWhite);
    color: var(--mausBlack);
    border: 2px;
    border-style: solid;
    border-color: var(--mausBlack);
}

/* Work page */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* Establish the work grid space */
.work-grid {
    display: grid;
    padding: 0.1vw;
    grid-gap: 1vw;
    background-color: var(--mausWhite);
}

/* Variable column amount based on display size */
@media (min-width: 0px) {
    .work-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-title { font-size: 7vw; }
    .grid-description { font-size: 3.5vw; }
}

@media (min-width: 500px) {
    .work-grid { grid-template-columns: repeat(3, 1fr); }
    .grid-title { font-size: 4vw; }
    .grid-description { font-size: 2vw; }
}

@media (min-width: 1000px) {
    .work-grid { grid-template-columns: repeat(4, 1fr); }
    .grid-title { font-size: 3vw; }
    .grid-description { font-size: 1.5vw; }
}

/* Styling for grid items */
.grid-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
}

/* Work grid image, and the animated hover text it contains */
.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Darkening image on hover */
.grid-item:hover img {
    transform: scale(1.1);
    filter: brightness(0.6);
}

/* Desktop has a hover animation when mouse is held over one of the elements. */
@media (hover: hover) {
    .grid-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1vw;
        transform: translateX(-100%);
        transition: transform 0.4s ease;
    }

    .grid-item:hover .grid-overlay {
        transform: translateX(0);
    }
}

/* Mobile has the hover animation disabled and displays the elements' header and description by default. */
@media (hover: none) {
    .grid-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1vw;
        padding-bottom: 0;
        background: var(--mausTransparent);
        backdrop-filter: blur(0.2em);
    }
}

/* Title styling */
.grid-title {
    color: var(--mausWhite);
    padding-left: 0.1vw;
    padding-bottom: 0;
    padding-top: 0.1vw;
    font-family: 'Coolvetica', sans-serif;
}

.grid-title::after {
    content: ".";
    color: var(--mausOrange);
}

/* Description styling */
.grid-description {
    color: var(--mausWhite);
    padding-left: 0.1vw;
    padding-bottom: 1.5vw;
    padding-top: 0;
    font-family: 'CreatoDisplay', sans-serif;
}

/* Contact page */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.contact-container form {
    padding-top: 0.75em;
}

/* Form */
.contact-left {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1em;
    padding-left: 1em;
}

/* Contact Page Form */
.contact-inputs {
    font-family: 'CreatoDisplay', sans-serif;
    font-size: 0.75em;
    background-color: var(--mausWhite);
    width: 15em;
    height: 3em;
    border: 2px;
    border-style: solid;
    border-color: var(--mausBlack);
    padding-left: 1em;
    border-radius: 0;
}

/* When text field is selected to be typed in, changes border to orange */
.contact-inputs:focus {
    border-color: var(--mausOrange);
}

/* Sets the text colour for the placeholder 'Name' 'Email' 'Your Message Here' fields */
.contact-inputs::placeholder {
    color: var(--mausBlack);
}

/* Sets the padding for text in the message box */
.contact-left textarea {
    padding-top: 1em;
    width: 30em;
    height: 8em;
}

/* Styling for the 'send message' button */
.contact-left button {
    background-color: var(--mausBlack);
    display: flex;
    align-items: center;
    padding: 1em 1em;
    color: var(--mausWhite);
    font-family: 'Coolvetica', sans-serif;
    font-size: 1em;
    border: 2px;
    border-style: solid;
    border-color: var(--mausBlack);
    gap: 0.1em;
}

/* Button Hover Animation */
.contact-left button:hover {
    background-color: var(--mausWhite);
    color: var(--mausBlack);
    border: 2px;
    border-style: solid;
    border-color: var(--mausBlack);
}

/* Work Subpages */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* Top-page banner */
.banner {
    height: 30em;
    display: flex;
    position: relative;
    padding: 0vw;
}

/* Show banner image at top of page */
.banner-image {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    z-index: -1;
}

/* Semi-transparent background for text in banner, with blur */
.banner-bg {
    position: absolute;
    bottom: 0;
    height: 5em;
    width: 100vw;

    background-color: var(--mausTransparent);
    backdrop-filter: blur(0.2em);
}

/* Project Title */
.banner-header {
    position: absolute;
    bottom: 0;
    left: 0;

    padding:1rem;

    color: var(--mausWhite);
}

/* Logo in corner to show */
.client-image {
    position: absolute;
    bottom: 0;
    right: 0;

    padding: 0.5rem;

    max-height: 5em;
    max-width: auto;
}

/* Inline media */
.work-media {
    display: block;
    padding: 1em;

    /* Overshooting variable size for mobile */
    @media (hover: none) {width: 80vw;}
    @media (hover: hover) {width: 60vw;}
}

.work-media-pdf { 
    display: block;
    padding: 1em;

    /* Overshooting variable size for mobile */
    @media (hover: none) {width: 80vw; height: 80vh; /* Height aspect ration of 1.414*/}
    @media (hover: hover) {width: 60vw; height: 80vh; /* Height aspect ration of 1.414*/}
}

.work-media-pdf-link {
    font-family: 'CreatoDisplay', sans-serif;
    font-size: 1em;
    color: var(--mausOrange);
    padding: 1em;
    padding-top: 0.5em;
}

.work-inline-link {
    font-family: 'CreatoDisplay', sans-serif;
    font-size: 1em;
    color: var(--mausOrange);
}

/* Tools used icon array */
.toolicon-list {
    display: flex;
    justify-content: center;

    background-color: var(--mausBlack);
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.toolicon {
    padding: 1vw;
    margin-block-start: 1vw;
    margin-block-end: 1vw;
    margin-left: 1vw;
    margin-right: 1vw;
    align-self: center;
}

.toolicon img {
    display:block;
    margin:auto;

    /* SVG to full rect */
    width: 50%;
    height: 7vw;
    
}

.toolicon h1 {
    display: flex;
    justify-content: center;

    text-align: center;
    color: var(--mausWhite);

    /* Reset from unified font size for nowrap */
    white-space: nowrap;
    font-size: 3vw;

    padding-top:2vw;
}

.toolicon p {
    display: flex;
    justify-content: center;

    text-align: center;
    color: var(--mausWhite);

    /* Reset from unified font size */
    font-size: 2vw;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ᘛ⁐ᕐᐷ */