@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

:root {
  --text-main: #444;
  --bg-main: #f8f8f8;
  --brand-primary: #F4A261;
  --text-light: #ffffff;
  --bg-white: #ffffff;
  --link-hover-bg: #ff7f50;
  --link-hover-text: #ffffff;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #444;
    background-color: #f8f8f8;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.hero {
    background-color: #F4A261;
    color: white;
    padding: 20px 0;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.list {
    padding: 20px 0;
    background-color: white;
}

.list ul {
    list-style: none;
	list-style-type: none;
    padding: 0;
}

.list li {
	list-style: none;
    margin-bottom: 10px;
}

.list a {
    color: #F4A261;
    text-decoration: none;
    font-weight: bold;
}

.contact {
    background-color: #F4A261;
    color: white;
    padding: 20px 0;
}

.contact p {
    margin-bottom: 10px;
}

a[href^="mailto"], a.external-link {
    font-family: 'Roboto Mono', monospace; /* This is a common fixed-width font */
    text-decoration: none;
    font-size: 0.9em; /* Adjust as needed */
    color: #444
}

a[href^="mailto"]:hover, a.external-link:hover {
    background-color: #ff7f50; /* Change this to the color you want when the link is hovered over */
    color: white; /* Change the text color on hover */
}