@import "reset.css";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;100;400;600;700;900&display=swap');

/* Light Mode Colors */
:root {
    --primary-background-light: #ffffff; /* Light background color */
    --primary-text-light: #333333; /* Light text color */
    --accent-color-light: #800080; /* Purple accent color */
    --shadow-color-light: #888888; /* Gray shadow color */
    --link-color-light: #0078d4; /* Light mode link color */
    --headline-color-light: #800080 /* Light headline color */
  }
  
  /* Dark Mode Colors */
  :root {
    --primary-background-dark: #1e1e1e; /* Dark background color */
    --primary-text-dark: #ffffff; /* Dark text color */
    --accent-color-dark: #800080; /* Purple accent color (same as light mode) */
    --shadow-color-dark: #333333; /* Dark gray shadow color */
    --link-color-dark: #00aaff; /* Dark mode link color */
    --headline-color-dark: #4fff4f; /* Dark */
  }
  
  :root {
    --bg-color: var(--primary-background-light);
    --text-color: var(--primary-text-light);
    --accent-color: var(--accent-color-light);
    --shadow-color: var(--shadow-color-light);
    --link-color: var(--link-color-light);
    --headline-color: var(--headline-color-light);
  }

  @media (prefers-color-scheme: dark) {
    :root {
        --bg-color: var(--primary-background-dark);
        --text-color: var(--primary-text-dark);
        --accent-color: var(--accent-color-dark);
        --shadow-color: var(--shadow-color-dark);
        --link-color: var(--link-color-dark);
        --headline-color: var(--headline-color-dark);
      }
  }

html {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Now my styles */

html {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 300;
}

p {
	margin-bottom: 1rem;
}

img {
	max-width: 100%;
	height: auto;
}

code, kbd, samp, pre {
	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 1em;

}

ol {
	list-style: decimal;
	padding-left: 2rem;
}

ol, ul {
	padding-top: 0.1rem;
	padding-bottom: 0.5rem;
}

ul {
	list-style:square;
	list-style-position: inherit;
	padding-left: 2rem;
}

ol li, ul li {
	padding-top: 0.15rem;
}

h1, h2, h3, h4 {
	margin-bottom: 10px;
	font-weight: 400;
}

/* Navigation */

nav {
	width: 100%;
	box-shadow: 0 4px 6px var(--shadow-color);
	padding-left: 30px;
	padding-right: 10px;
	position:relative;
	font-weight: 400;
}


nav ul {
	list-style:none;
	font-weight: inherit;
}
nav ul li {
	display: inline-block
}
nav ul li a{
	display: inline-block;
	padding: 10px 15px;
	text-decoration: none;
	color: var(--text-color);
}

nav ul li a:visited{
	display: inline-block;
	padding: 10px 15px;
	text-decoration: none;
	color: var(--text-color);
}
nav ul li:hover{
	font-weight: 700;
}



.footer {
	padding-left: 4rem;
}

.homepage-content {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap:1rem;
	height: auto;
}



.homepage-text {
	margin: auto;
	padding: 1 rem;
}

/* Image styling */

img[src*="#left"] {
	float: left;
	margin: 1rem;
    padding-right: 1.5rem;
	border-radius: 8px;
}


img[src*="#right"] {
	float: right;
	margin: 1rem;
    padding-left: 1.5rem;
	border-radius: 8px;
}

img[src*="#center"] {
	display: block;
	margin: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
}


img[src*="#full"] {
	max-width: 100%;
	display: block;
	height: auto;
	margin: auto;
}


img[src*="#circle"] {
	border-radius: 50%;
}

.articlehead .title {
	font-size: 200%;

}
.articlehead .date {

	font-size: 120%;
}

.articlehead {
	padding-bottom: 0.5rem;
	margin-bottom: 2rem;
	margin-top: 1rem;
	border-bottom: 1px solid blue;
}

.content {
	padding-top: 1rem;
	width: clamp(480px, 90%, 1280px);
	margin: auto;
	
}

.content   a, a:visited {
	text-decoration: inherit;
    color: var(--link-color);
    transition: color 0.3s; 
}

.content  a:hover {
	color: #ff6200; 
}

.content img {
	max-width: 100%;
	display: block;
	height: auto;
	margin: auto;
	padding-bottom: 10px;
	padding-top: 10px;
}

.homepage-photo img {
	border: auto;
	filter: drop-shadow(0.0rem 0rem 0.4rem rgba(0,0,0,0.4));
	transition: filter 1s ease-in;
	object-fit: cover;

}

.homepage-photo a:hover {
	border: auto;
	filter: drop-shadow(0.0rem 0rem 0.45rem  rgba(0, 1, 1, 0.8));
	transition: filter 1s ease-out;
}

h1 {
    font-size: 120%;
    font-weight: 600;
}

h2 {
    font-size: 115%;
    font-weight: 600;
}

h3 {
    font-size: 110%;
    font-weight: 600;
}

h1,h2,h3{
    color: var(--headline-color);
}