/*

	Theme Name: windang
    Text Domain: windang
	Version: 1.0
	Description: Embrace modern simplicity with windang.me, a bespoke WordPress theme meticulously crafted for showcasing my portfolios with personality. This scrupulously crafted theme strikes a perfect balance between minimal aesthetics and impactful presentation, ensuring my work shine without unnecessary clutter.
	Tags: windang, windang.me
	Author: Win Dang
	Author URI: https://windang.me
	Requires PHP: 8.1
	Tested up to: 6.4.3

*/

/* Custom FunnelDisplay Font Definitions */
@font-face {
  font-family: 'FunnelDisplay';
  src: url('./assets/fonts/FunnelDisplay-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FunnelDisplay';
  src: url('./assets/fonts/FunnelDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FunnelDisplay';
  src: url('./assets/fonts/FunnelDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FunnelDisplay';
  src: url('./assets/fonts/FunnelDisplay-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FunnelDisplay';
  src: url('./assets/fonts/FunnelDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FunnelDisplay';
  src: url('./assets/fonts/FunnelDisplay-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Make FunnelDisplay available globally */
.font-funnel {
  font-family: 'FunnelDisplay', system-ui, sans-serif;
}

/* Apply FunnelDisplay to headings by default */
h1, h2, h3, h4, h5, h6 {
  font-family: 'FunnelDisplay', system-ui, sans-serif;
}

/* Ensure full viewport height for html and body */
html, body {
  height: 100%;
  min-height: 100vh;
}

/* Ensure main and its direct children fill the height */
.front-page-content {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.front-page-content > .grid {
  flex: 1 1 0;
  height: 100%;
}