:root {
    --fran-green: #21412A;
    --fran-brown: #C1986C;
    --fran-teal: #267D71;
    --fran-blue: #07647D;
    --fran-gold: #F5AF50;
    --fran-tan: #FDF0DF;
    --fran-red: #8B3A19;
}
/* the actual brand teal is  #349789, but it was darkened to allow versatality */



html {
	scroll-behavior: smooth;
}

p {
    font-family: 'Montserrat';
    line-height: 1.5em;
}

button {
	outline: none;
	border: none;
	border-radius: 25px;
	background-color: transparent;
}

button a {
	border-radius: 30px;
	font-family: 'Montserrat';
}

a {
	color: #8b3a19;
	text-decoration: underline;
    font-family: 'Montserrat';
}

a:hover {
	text-decoration: none;
}


.root-lowercase-btn {
    color: var(--root-lowercase-btn-color);
    --root-lowercase-btn-color: #2b2b2b;
    font-size: 1em;
    font-family: 'Montserrat';
    background-color: var(--root-lowercase-btn-background-color);
    --root-lowercase-btn-background-color: #fbb555;
    border: 1px solid transparent;
		border-color: var(--root-lowercase-btn-border-color);
    --root-lowercase-btn-border-color: transparent;
    padding: .75em 1em;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s;

    display: block;
    width: fit-content;
    margin: 10px auto;
}

.root-lowercase-btn:hover {
    background-color: var(--root-lowercase-btn-background-color-hover);
    --root-lowercase-btn-background-color-hover: #21412a;
    color: var(--root-lowercase-btn-color-hover);
    --root-lowercase-btn-color-hover: white;
    box-shadow: 0 0 5px #fbb5555c;
}

.root-h2 {
    text-align: center;
    color: #8b3a19;
    font-size: 1.7em;
    line-height: 1.2em;
    font-family: 'Montserrat';
    font-weight: bold;
    margin-bottom: 1em;
}

.root-h3 {
    color: #21412a;
    font-size: 1.5em;
    line-height: 1.2em;
    font-family: 'Montserrat';
    font-weight: bold;
    margin-bottom: 1em;
}