@charset "UTF-8";
/*!
Theme Name: kodxme child theme
Template: kodxme
Theme URI: http://kodx.dev
Author: KODX
Author URI: http://kodx.dev
Description: This is a blogging theme with projects
Version: 1.5.5
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kodxme-child-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

kodxme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*
 
 88     88  dP""b8 88  88 888888     Yb    dP 888888 88""Yb .dP"Y8 88  dP"Yb  88b 88      dP"Yb  88b 88 88     Yb  dP 
 88     88 dP   `" 88  88   88        Yb  dP  88__   88__dP `Ybo." 88 dP   Yb 88Yb88     dP   Yb 88Yb88 88      YbdP  
 88  .o 88 Yb  "88 888888   88         YbdP   88""   88"Yb  o.`Y8b 88 Yb   dP 88 Y88     Yb   dP 88 Y88 88  .o   8P   
 88ood8 88  YboodP 88  88   88          YP    888888 88  Yb 8bodP' 88  YbodP  88  Y8      YbodP  88  Y8 88ood8  dP    
 
*/

/** Dark varian styles are in /css/darkmode.css */

/** --------------------- EDIT BELOW THIS LINE ----------------------------- */

/** YOU CAN CHANGE ROOT VARIABLE VALUES AND THAT WAY ACHIEVE EASILY THE CUSTOM  COLORS ETC. */

/*--------------------------------------------------------------
# Root Variables
--------------------------------------------------------------*/
:root {
  /** Root CSS settings. they will be provided in child-theme so one can edit override if needed */
  /** Fonts and colors */

  /** Site title is always a hyperlink */
  --site-title-a: #ff064d;
  --site-title-hover: #ff064d;

  /** Theme main content background color */
  --content-bg: #fcfcfc;

  /** Main font for headings and menu */
  --heading-font: "IBM Plex Sans", sans-serif;
  --heading-font-weight: 700;
  --heading-color: #010107;
  /** Headings that are also links typically post titles
 	* a and :visited are same color, :hover :active and :focus are another */
  --heading-link-a: #010107;
  --heading-link-hover: #ff064d;

  /** Main body font settings */
  --body-font: "Source Sans 3", sans-serif;
  --body-font-size: 1.1875rem;
  --body-font-weight: 400;
  --body-text-color: #55555e;
  --body-bg-color: #f5f5f5;
  --body-textarea: #f5f5f5;
  /** body medium, used rarely for some elements */
  --body-font-m: 1rem;
  /** body small, used rarely for some elements */
  --body-font-s: 0.875rem;

  /** main body hyperlinks color */
  --body-links-a: #ff064d;
  --body-links-hover: #ff064d;

  /** Social icon background color of the link */
  --social-icon-a: #010107;
  /** changes background color of hover effect on top right social icons */
  --social-icon-hover: #ff064d;
  /** Mobile Social media bar background  */
  --m-social-media-bg: #e7e7e7;
  /** invert image of social media */
  --img-invert-on: invert(100%);
  --img-invert-off: invert(0%);

  /** main site navigation  */
  --main-nav-font: "IBM Plex Sans", sans-serif;
  --main-nav-medium: 400;
  --main-nav-font-size: 14px;
  /** main nav colors */
  --main-nav-a: #646568;
  /** font color of menu link */
  --main-nav-hover: #010107;
  /** dropdown menu a background color */
  --sub-nav-a-bg: #ffffff;
  --sub-nav-hover: #f1f1f1;

  --color-border-mainnav: #f5f5f5;
  --color-border-article: #f5f5f5;

  /** Drop-down links background color on mouse over */
  --color-border-dropwodn-menu: #e0dbdb;

  /** Font settings for headins. */
  --h1-font-size: 64px;
  --h1-line-height: 1.24;
  --h1-letter-spacing: -3px;

  --h2-font-size: 48px;
  --h2-line-height: 1.3;
  --h2-letter-spacing: -2px;

  --h3-font-size: 36px;
  --h3-line-height: 1.25;
  --h3-letter-spacing: -1.4px;

  --h4-font-size: 28px;
  --h4-line-height: 1.25;
  --h4-letter-spacing: -1px;

  --h5-font-size: 18px;
  --h5-line-height: 1.2;
  --h5-letter-spacing: 0.5;

  --h6-font-size: 16px;
  --h6-line-height: 1.2;
  --h6-letter-spacing: 0;

  /** Widget font settings */
  --widget-font-size: 17px;
  --widget-font-weight: 400;
  --widget-font-line-height: 1.8;
  /** table widget */
  /** Table caption and td background */
  --widget-table-td: #fafafa;
  /** Table th background this color -> #7a292c; is also pretty cool redish for contrast but im sticking with grey tones */
  --widget-table-th: #f5f5f5;
  /** Widget Colors */
  --widget-link-a: #ff064d;
  --widget-link-hover: #ff064d;

  --widget-border: 16px;

  --color-widget-bg-li: #f7f7f7;
  --color-widget-li-accent: #ffffff;

  /** Utilities Misc. */
  /** Divider lines */
  --divider-color: #f5f5f5;
  --divider-height: 16px;

  /** Meta of the post font settings */
  --meta-font-size: 16px;
  --meta-font-color: #6c6d70;

  /** list link backgrounds on mobile to increase usability */
  --m-widget-li-a-bg: #f7f7f7;

  --submit-btn-bg: #010107;
  --submit-btn-hover: #292929;
  --submit-btn-text: #f1f1f1;
  --submit-btn-border: 3px solid transparent;

  /* tag bg and text color for wc product label
  same for dark and white. */
  --color-bg-discount-tag: #ff064d;
  --color-font-discount-tag: #ffffff;
}





/** for kodxme only ***/


.main-navigation li {
		padding: 2px 9px;
		text-transform: uppercase;
		border-right: 2px solid #f5f5f5;
		}

.main-navigation li:last-child {
		border-right: unset;
}



.prof-wrap {
	display: flex;
	justify-content: center;
	/* border: 1px solid yellow; */
}
	.prof-box {
		display: grid;
		grid-template-columns: minmax(0, 220px) 1fr;
		grid-template-rows: minmax(0, 220px) auto;
		margin-top: 3em;
		max-width: 760px;
		gap: 24px;
	}

		.prof-box p {
			padding: 0;
			margin: 0;
			text-transform: capitalize;
			/* font-family: "Barlow Condensed", sans-serif !important; */
			letter-spacing: -3px;
			margin-top: -16px;
		}

		.prof-pic {
			grid-row: 1 / span 1;
			grid-column: 1 / span 1;
			width: 212px;
			/* border: 2px solid red; */
			box-sizing: content-box;
		}

		.prof-pic img {
			border: 4px solid #f9f9f9;
			border-radius: 50%;
			width: 100%;
			height: auto;
		}

		.intro-wrap {
			grid-row: 1;
			grid-column: 2 / span 1;
			text-transform: capitalize;
			/* border: 2px solid yellow; */
			display: flex;
			flex-flow: column;
			align-content: space-between;
		}

			.prof-intro p {
				font-size: clamp(3rem, 14vw, 7.3rem);
				color: #FF064D;
				font-weight: 700;
				/* border: 2px solid purple; */
				line-height: 1;
				padding: 0;
				margin: 0;
				margin-top: -16px;
			}

			.prof-msg p {
				font-size: clamp(3rem, 14vw, 7.5rem);
				font-weight: 700;
				/* border: 2px solid aqua; */
				line-height: 1;
				padding: 0;
				margin: 0;
				text-indent: 4px;
			}

		.prof-descr {
			grid-row: 2 / span 1;
			grid-column: 1 / -1;
			font-size: clamp(1.6rem, 14vw, 2.25rem);
			border-bottom: 8px solid var(--body-links-a);
			margin-top: 16px;
			padding-bottom: 16px;
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
		}

.prof-descr span {
			color: #f5f5f5 !important;
}

		.prof-descr p {
			font-family: var(--body-font);
			letter-spacing: 0;
		}


		.prof-summary {
			grid-row: 3 / span 1;
			grid-column: 1 / -1;
			/* font-size: clamp(1.6rem, 14vw, 2.15rem); */
			margin-top: 16px;
			padding-bottom: 0px;
		}

		.prof-summary p {
			font-family: var(--body-font);
			letter-spacing: 0;
			text-transform:unset;
		}
		
		.prof-apps {
				width: 100%;
				height:132px;
				grid-row: 4;
				grid-column: 1 / -1;
				background: url('https://kodx.me/wp-content/uploads/2025/03/kodxme-skills-front-page.png') no-repeat;
			 	background-size: contain;
  				background-position: center;
			}


		@media only screen and (max-width : 1024px) {

			.prof-box {
				margin-top: 1.6em;
			}
		}


		@media only screen and (max-width : 688px) {

			.prof-box {
				margin-top: 1em;
				grid-template-columns: 1fr 1fr;
  				grid-template-rows: 1fr auto;
			}

			.prof-pic {
				grid-row: 1 / span 1;
				grid-column: 1 / -1;
				justify-self: center;
			}

			.intro-wrap {
				grid-row: 2 / span 1;
				grid-column: 1 / -1;
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				gap: 16px;
			}

			.prof-descr {
				grid-row: 3;
				grid-column: 1 / -1;
				text-align: center;
				padding-bottom: 24px;
			}
			
			.prof-summary {
				grid-row: 4;
				grid-column: 1 / -1;
				padding: 0px 24px;
			}
			
			.prof-summary p {
				font-size: 1.4rem;
				line-height: 160%;
			}
			
			.prof-apps {
				grid-row: 5;
				grid-column: 1 / -1;
			}
		}