:root {
--text: #fff0f0;
--background: #1c1204;
--primary: #f09009;
--secondary: #3b0202;
--accent: #00A36C;
--link-accent: #55e7b6;
--link-accent2: #2f8e6e;
font-family: 'Noto Sans', sans-serif;
}

/* Path: style.css */
body {
background-color: var(--background);
color: var(--text);
margin: 0 auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

header {
    font-size: 2em; /* This will make the text in the header larger */
    color: var(--primary); /* This will change the text color in the header to the text color defined in your CSS variables */
    background-color: var(--secondary); /* This will change the background color of the header to the secondary color defined in your CSS variables */
    border-radius: 15px; /* This will round the corners of the header */
    margin-bottom: 20px; /* This will add space below the header */
}

.Intro {
    color: var(--text); /* This will change the color of the header text to the primary color defined in your CSS variables */
    font-size: larger;
    font-style: bold;
}

.Content{
    background-color: var(--secondary); /* This will change the background color of the content to the secondary color defined in your CSS variables */
    border-radius: 15px; /* This will round the corners of the content */
    padding: 20px;
    margin: 20px;
    border-top: 4px solid var(--primary); /* This will add a border to the top of the content */
    box-shadow: 0px 10px 15px rgba(0,0,0,0.2);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

button{

    background-color: var(--accent); /* This will change the background color of the paragraph to the primary color defined in your CSS variables */
    border: none; /* This will remove the default button border */
    color: var(--text);
    padding: 16px 38px; /* This will add space around the text */
    text-align: center; /* This will center the text */
    text-decoration: none; /* This will remove the default text decoration */
    display: inline-block;
    font-size: 16px;
    border-radius: 12px;
    margin: 4px 2px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover{
    background-color: var(--link-accent); /* This will change the color of the link text to the secondary color defined in your CSS variables */
    transition: background-color 0s;
}

button:active{
    background-color: var(--primary); /* This will change the color of the link text to the secondary color defined in your CSS variables */
    transition: background-color 0.3s step-start;
}
button:visited{
    color: var(--primary); /* This will change the color of the link text to the secondary color defined in your CSS variables */
}