/*
Theme Name: Twenty Twenty Child
Theme URI: http://example.com/twenty-twenty-child/
Description: Twenty Twenty Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentytwenty
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout,
accessibility-ready
Text Domain: twenty-twenty-child
*/
/* note to student - you must change the names above to whatever theme you are
using.
In this case, wherever Twenty Fifteen Child or twentyfifteen shows up it should be
changed to the name of your theme.
And, make sure to put -child for your child theme to work.
The CSS styling below simply enlarges your font (text) by 200%. This can be used to
test if your child is working.
You can find more ways to edit CSS at https://www.w3schools.com/css/default.asp /* Base styles */

body {
  background-color: #f5efe0;
  color: #000000;
  font-family: 'Playfair Display', serif;
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

/* Header and navigation */
.site-header {
  background-color: #490000;
  padding: 20px 0;
}

.main-navigation a {
  color: #f5efe0;
  text-decoration: none;
  font-weight: bold;
  margin: 0 15px;
}

.main-navigation a:hover {
  color: #ffd6c0; /* Lighter hover color for links */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #490000;
  font-family: 'Quentin Serif', serif;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Footer */
footer {
  background-color: #490000;
  color: #f5efe0;
  text-align: center;
  padding: 30px 20px;
  font-size: 0.9rem;
  margin-top: 40px;
}

footer a {
  color: #ffd6c0;
  text-decoration: underline;
}

footer a:hover {
  color: #f5efe0;
}

/* Buttons */
button, .button {
  background-color: #490000;
  color: #f5efe0;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover, .button:hover {
  background-color: #7a1f1f; /* Slightly lighter maroon */
}

/* Portfolio item cards */
.portfolio-item {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.doto-text {
  font-family: "Doto", sans-serif;
  font-weight: 400; /* Normal weight */
  font-style: normal;
  font-optical-sizing: auto;
}