:root {
    --background: #F8F1E7;
    --surface: #FFF8ED;
    --secondary: #EADCC8;

    --gold: #C9A227;
    --gold-light: #D8B76A;

    --text: #3B2A20;
    --text-muted: #6B5A4A;

    --border: #D9C39A;
}

html, body {
	background-color: var(--secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 20 20'%3E%3Cg %3E%3Cpolygon fill='%23F8F1E7' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%23F8F1E7' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E");
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	width: 100%;

    display: flex;
    flex-direction: column;
}

.page {
    flex: 1;
    display: flex;
    justify-content: center;
}

.index-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: var(--secondary);
    border: 5px solid var(--border);
    border-radius: 30px;
    width: 90%;
}
.index-main .header {

}
.index-main .bottom {
    display: flex;
    flex-direction: row;
}
.index-main .header h1 {
    color: var(--text);
    font-size: 40px;
}
.index-main .photo-container {
    height: 500px;
    width: 500px;
    margin: 20px;
}
.index-main .photo-container img {
    width: 100%;
    height: 100%;
}
/* #region navbar */

.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    background-color: var(--secondary);
    border-bottom: 5px solid var(--border);

    margin-top: 0;
    width: 100%;
    height: 60px;
    margin-bottom: 50px;
}
.navbar .left {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    padding-left: 15px;
}
.navbar .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 100%;
}
.navbar .right div {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
}
.navbar .right a {
    text-decoration: none;
    font-size: 30px;
    color: var(--text);
}
/* #endregion */