/**
*** HIJACKED WEBSITE CSS HAND CRAFTED BY SIMON @ LUNYTIC
**/

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

html {
    height: 100%;
    width: 100%;
}

:root {
    --number-of-inner-grid: 5;
    --padding-amount: 2;
    --outer-grid-size: calc(100vw / 20); /* Outer grid size as 1/10th of viewport width */
    --inner-grid-size: calc(var(--outer-grid-size) / var(--number-of-inner-grid)); /* Inner grid size as 1/5th of outer grid */
    --grid-padding: calc(var(--padding-amount) * var(--inner-grid-size));

    /* Font sizing based on grid */
    --base-font-size: var(--inner-grid-size); /* Base font size matches inner grid */
    --heading-font-size: calc(var(--base-font-size) * 2); /* Larger headings */
    --line-height: 1.2; /* Unitless line height for consistency */

    /* Colours */
    --color-primary: #4cf490;
    --color-dark: #090909;
    --color-white: #fff;
}

body {
	display: flex;
	flex-direction: column;
	align-items: space-between;
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: 200;
	overflow-x: hidden;
	height: 100dvh;
	background: var(--color-dark);
	color: #fff;

    /* Base font settings */
    font-size: var(--base-font-size);
    line-height: var(--line-height);
}

h1, h2, h3 {
    font-family: "Whyte Inktrap", sans-serif;
    font-weight: bold;
    font-style: normal;
    margin: 0; /* Remove default margins */
}

h1 {
    font-size: calc(var(--base-font-size) * 3.5); /* Large heading */
}

h2 {
    font-size: calc(var(--base-font-size) * 2.5); /* Medium heading */
}

h3 {
    font-size: calc(var(--base-font-size) * 1.5); /* Small heading */
}

p {
    font-size: var(--base-font-size);
    line-height: var(--line-height);
    margin: 0; /* Remove default margins */
}

ul {
    display: flex;
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--color-white);
}
a:hover {
    color: var(--color-primary);
}
  
.grid-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    background: 
        /* Thick grid lines (5x5 main grid) */
        linear-gradient(rgba(68, 68, 68, 0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(68, 68, 68, 0.35) 1px, transparent 1px),

        /* Thin grid lines (subdivisions) */
        linear-gradient(rgba(68, 68, 68, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(68, 68, 68, 0.2) 1px, transparent 1px);

    background-size: 
        var(--outer-grid-size) var(--outer-grid-size), /* Thick grid spacing */
        var(--outer-grid-size) var(--outer-grid-size),
        var(--inner-grid-size) var(--inner-grid-size), /* Thin grid spacing */
        var(--inner-grid-size) var(--inner-grid-size);
    z-index: 100;
}

.grid-layout {
    display: grid;
    height: 100dvh;
    /* Define columns and rows based on --outer-grid-size */
    grid-template-columns: repeat(20, var(--outer-grid-size)); /* Matches 20 outer grids */
    /*grid-template-rows: repeat(20, var(--outer-grid-size)); /* Matches 20 outer grids */
    /*grid-template-rows: auto 1fr auto;*/
    grid-template-rows:
    calc(1 * var(--inner-grid-size)) /* Header row (3 inner blocks tall) */
    1fr /* Main content row (flexible) */
    calc(3 * var(--inner-grid-size)); /* Footer row (3 inner blocks tall) */

    /* Add padding equivalent to 2 inner blocks */
    padding: var(--grid-padding);

    /* Define template areas */
    grid-template-areas:
        "header header header header header header header header header header header header header header header header header header header header"
        "main main main main main main main main main main main main main main main main main main main main"
        "footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer";
    z-index: 1000;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - var(--grid-padding) * 2);
    grid-area: header;
}

.header p {
    font-size: 1rem;
}

.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-area: main;
}

.main h1 {
    line-height: 0.95;
}

.main h3 {
    margin-top: 2rem;
    width: 40%;
}

.footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: calc(100% - var(--grid-padding) * 2);
    grid-area: footer;
}

.footer p, .footer a {
    font-size: 1rem;
}

.footer a {
    padding: 0 0.5rem;
}

.footer ul li:first-child a {
    padding: 0 0.5rem 0 0;
}

.logo {
	font-family: "Researcher", sans-serif;
    font-weight: 700;
	letter-spacing: -2px;
    font-size: 1.5rem;
}

.beta {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    color: var(--color-dark);
    padding: 0.5rem 0.8rem;
    background-color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem!important;
}

.map-container {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

#map { 
	position: absolute;
	bottom: -20vh;
	left: 20vw;
	height: 100vh; 
	width: 100%; 
	z-index: 1;
	background: transparent;
    overflow: hidden;
}

.fullstop {
    color: var(--color-primary);
}

/* Adjustments for tablets and smaller screens */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --outer-grid-size: calc(100vw / 15);
    }

    .grid-layout {
        grid-template-columns: repeat(15, var(--outer-grid-size));
        grid-template-rows: auto 1fr auto;

    }
    
    .main {
        flex-direction: column;
        align-items: flex-start;
        width: calc(100% - var(--grid-padding) * var(--padding-amount));
    }
    
    .main h3 {
        width: 50%;
    }
    
    .logo {
        font-size: 1.5rem;
    }
    
    .beta {
        position: relative;
        top: none;
        left: 0;
        transform: none;
        margin: 1rem 0;
    }

    #map {
        left: 0;
    }
}

/* Adjustments for small tablets and large phones */
@media (min-width: 480px) and (max-width: 767px) {
    :root {
        --outer-grid-size: calc(100vw / 10);
    }

    .grid-layout {
        grid-template-columns: repeat(10, var(--outer-grid-size));
        grid-template-rows: auto 1fr auto;
        padding: var(--grid-padding);
    }

    .header {
        flex-direction: column;
    }
    
    .header p {
        font-size: 0.8rem;
    }
    
    .main {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: calc(100% - var(--grid-padding) * var(--padding-amount));
    }
    
    .main h1 {
        line-height: 0.95;
        width: 100%;
    }
    
    .main h3 {
        width: 100%;
    }
    
    .footer {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: calc(100% - var(--grid-padding) * var(--padding-amount));
    }
    
    .footer p, .footer a {
        font-size: 0.9rem;
        padding: 0.5rem 0;
    }
    
    .footer a {
        padding: 0 0.5rem;
    }
    
    .logo {
        font-size: 2rem;
    }
    
    .beta {
        position: relative;
        top: none;
        left: 0;
        transform: none;
        margin: 1rem 0;
    }
    
    #map { 
        left: 0;
    }
}

/* Adjustments for mobile phones */
@media (max-width: 479px) {
    :root {
        --outer-grid-size: calc(100vw / 6); /* Final transition to 10 outer grids */
    }

    .grid-layout {
        grid-template-columns: repeat(6, var(--outer-grid-size));
        grid-template-rows: auto 1fr auto;
        padding: var(--grid-padding);

    }

    .header {
        flex-direction: column;
    }
    
    .header p {
        font-size: 0.8rem;
    }
    
    .main {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: calc(100% - var(--grid-padding) * var(--padding-amount));
    }
    
    .main h1 {
        line-height: 0.95;
        width: 100%;
    }
    
    .main h3 {
        width: 100%;
    }
    
    .footer {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: calc(100% - var(--grid-padding) * var(--padding-amount));
    }
    
    .footer p, .footer a {
        font-size: 0.9rem;
        padding: 0.5rem 0;
    }
    
    .footer a {
        padding: 0 0.5rem;
    }
    
    .logo {
        font-size: 2rem;
    }
    
    .beta {
        position: relative;
        top: none;
        left: 0;
        transform: none;
        margin: 1rem 0;
    }
    
    #map { 
        top: 0;
        left: 0;
    }
}

/* Handle orientation-specific adjustments */
@media (max-width: 1024px) and (orientation: landscape) {
/* Adjustments for tablets in landscape mode */
    :root {
        --outer-grid-size: calc(100vw / 15); /* Slightly larger grids for landscape */
    }
}

@media (max-width: 768px) and (orientation: landscape) {
/* Adjustments for phones in landscape mode */
    :root {
        --outer-grid-size: calc(100vw / 14); /* Slightly larger grids for landscape */
    }
}




/*** FONTS ***/

/* Whyte Inktrap Font */
@font-face {
    font-family: 'Whyte Inktrap';
    src: url('fonts/WhyteInktrap-Bold.eot');
    src: local('Whyte Inktrap Bold'), local('WhyteInktrap-Bold'),
		url('fonts/WhyteInktrap-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Inter Font */
@font-face {
    font-family: 'Inter';
    src: local('Inter'), local('Inter'),
        url('fonts/Inter_24pt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Reasearcher Font */
@font-face {
    font-family: 'Researcher';
    src: local('Researcher'), local('Researcher'),
        url('fonts/researcher-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}