body {
    font-family: 'Trebuchet MS', sans-serif;
    background-color: #f0f0f0;
    display: grid;
    grid-template-rows: 1fr 9fr;
}

button {
	border: 2px solid black;
	border-radius: 5px;
	padding: 0.2rem 0.2rem;
}

nav {
    grid-row: 1;
    grid-column:1;

    ul {
        list-style: none;
        width: 90%;
    }

    li {
			  display: flex;
				align-items: center;
				justify-content: space-between;
        width: 100%;
        max-width: 100%;
        border:1px solid black;
        background: white;
        padding: 1vh 1vw;
        text-wrap: wrap;
    }

		li.blank {
			border: none;
			background-color: #f0f0f0;
			justify-content: flex-end;
		}

    li:not(.blank):hover {
        background: #c0c0b0;
    }

		.btn-edit-guest {
			z-index: 2;
		}

		#btn-add-guest {
			float: right;
		}

}

.left-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100vh;
    grid-row: 1;
    grid-column: 2;
}

#card-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    [contenteditable] {
        border: 1px solid #ccc;
    }
}

.card-form {
    margin: 20px;
    min-width: 500px;

    .form-buttons {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: baseline;
        margin: 10px;
    }

		.form-buttons > button {
			margin: 0px 5px;
		}

    .form-group {
        margin: 10px;
        width: auto;
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-template-rows: 1fr;
        grid-template-areas: "label input"
				                     ".     feedback";

        & label {
            grid-area: label;
            text-align: right;
            padding-right: 10px;
        }

        & input,
        & textarea {
            grid-area: input;
        }
    }
}

.card-display {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-size: 18px;
    font-family: 'Garamond', Times, serif;

    .card-page {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr 2fr 1fr;
        width: 300px;
        height: 400px;
        padding: 40px;
    }

    .page-one {
        background: rgb(240, 240, 240);
        background: linear-gradient(270deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 20%);

        grid-template-areas:
            "delete"
            "title"
            "subtitle"
            ".";

        .title {
            grid-area: title;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            justify-self: center;
            align-self: center;
            font-family: "Lucida Handwriting", cursive;
        }

        .subtitle {
            grid-area: subtitle;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            justify-self: center;
            align-self: start;
        }

        .delete-btn {
            grid-area: delete;
            justify-self: center;
            align-self: start;
        }
    }

    .page-two {
        background: rgb(230, 230, 230);
        background: linear-gradient(90deg, rgba(230, 230, 230, 1) 0%, rgba(255, 255, 255, 1) 5%);

        grid-template-areas:
            "to"
            "message"
            "message"
            "from";

        .to {
            grid-area: to;
            justify-self: start;
            align-self: start;
        }

        .message {
            grid-area: message;
            white-space: pre-wrap;
        }

        .from {
            grid-area: from;
            justify-self: end;
            align-self: end;
        }
    }
}

form .invalid-feedback {
	color: red;
	font-size: 0.8em;
	grid-area: feedback;
	visibility: hidden;
}

form .invalid {
	border-color: red;
	outline: none;
}

form .invalid ~ .invalid-feedback {
	visibility: visible;
}