@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Pinyon+Script&display=swap');

body, html {
    --border-color: rgb(36, 41, 47);
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Cormorant", sans-serif;
    font-weight: 600;
    box-sizing: border-box;
    /* border: 5px solid var(--border-color); TODO: decide style & color */
	background-image: url('placeholder-bg.jpg');
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center 30%;
}

.container {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
	text-align: center;
}

.focus {
    font-size: 0.3in;
    font-family: "Cormorant", serif;
    margin: 0;
    text-transform: capitalize;
}

#placeholder-text {
    backdrop-filter: sepia(20%);
	font-size: 64px;
	margin: auto;
    color: white;
}