/* Reset some default spacing */
body {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-weight: bold;   /* makes text bold */
    text-align: center;  /* centers all text in the body */
    font-size: 22px;  /* makes all body text bigger */
    background-color: #FFA6A6;  /* your new main background color */
    line-height: 1.8;  /* makes text more spaced out */
}

/* NAVBAR */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #EB4C4C;
    overflow: hidden;

    display: flex;            /* use flexbox */
    justify-content: center;  /* centers the buttons horizontally */
}

.navbar a {
    float: none;  /* remove left float */
    display: inline-block;  /* keeps them inline */
    color: #FFEDC7;
    padding: 14px 20px;
    text-decoration: none;
}

/* Hover effect */
.navbar a:hover {
    background-color: #FF7070;
}

/* PAGE CONTENT */
.content {
    margin-top: 60px;  /* prevents content from hiding under navbar */
    padding: 20px;
    background-color: transparent; /* removes the colored bar */
    border: none;                  /* removes the border */
    color: #EB4C4C;     /* makes paragraph text the same color as your headings */
    font-size: 22px;    /* optional: adjust size */
    font-weight: bold;  /* optional: matches body style */
}

/* Headings */
h1 {
    font-size: 60px;
    color: #FFEDC7;
    text-shadow: 5px 5px 0 #EB4C4C; /* x-offset, y-offset, blur-radius, color */
}

h2 {
    font-size: 36px;
    color: #FFEDC7
}

 /* Custom link color */
a {
    color: #EB4C4C;       /* your desired link color */
    text-decoration: none; /* remove underline */
}

a:hover {
    color: #FFEDC7;       /* color when hovering */
    text-decoration: underline; /* optional underline on hover */
}