/* ************************************************************************ */
/*  */
/* ************************************************************************ */
header {
    margin: 0px;
    background-color: #23bef7;
}

.header-container {
    display: flex;
    padding: 20px;
}

h1 {
    font-family: "Mulish";
    font-size: 40px;
    margin: 0 auto;
    color: white;

}

/* Need to set the body's margin to 0 so the container centers correctly */
body {
    /* Adding the gradient background */
    background: linear-gradient(-45deg, #23bef7, #ee7752);
	background-size: 200% 200%;
	animation: gradient 5s ease infinite;
	height: 100vh;
    margin: 0;
}

p {
  font-family: "Ovo";
  font-size: 25px;
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 0 auto;
  margin-top: 20px;

}

label {
  font-family: "Ovo";
  font-size: 20px;
  display: flex;
  /* align-items: center; */
  padding: 5px;
  /* margin: 0 auto; */
}

/* Input Box CSS Styling */
input {
    padding: 10px 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rbga(79, 70, 229, 0.2);
    outline: none;
}


/* ************************************************************************ */
/* For the gradient animated background */
/* ************************************************************************ */
@keyframes gradient {
    0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* ************************************************************************ */
/* Font pairing for the cards */
/* ************************************************************************ */
.ovo-regular {
    font-family: "Ovo", serif;
    font-weight: 400;
  font-style: normal;
}

.mulish {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}


/* ************************************************************************ */
/* Creating a fancy button */
/* ************************************************************************ */
button {
  font-family: "DM Serif Display", serif;
  font-size: 25px;
  display: flex;
  align-items: center;

  /* This helped put the buttons on the right side and had them floating in line with the other buttons beneath them */
  padding: 5px;
  margin: 10px;
  
  color: #090909;
  font-size: 18px;
  border-radius: 0.5em;
  background: #e8e8e8;
  cursor: pointer;
  border: 1px solid #e8e8e8;
  transition: all 0.3s;
  box-shadow: 1px 1px 2px #c5c5c5, -1px -1px 2px #ffffff;
}

button:active {
  color: #666;
  box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
}

#create_button {
    /* This fits the button space around it to fit the text and float in the center of the div */
    margin: 0 auto;
}


/* ************************************************** */
/* Containers Section Div */
/* ************************************************** */
.main_card_container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}

.main_entry_div {
    display: flex;
    background-color:rgb(173, 172, 172);
    width: 300px;
    height: 400px;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;
    border-radius: 12px;

    font-size: 20px;
    margin: 10px;
    padding: 10px;
    font-family: "mulish";

}

.container {
    display: grid;
    /* display: flex; */
    align-items: left;
}


/* ************************************************** */
/* Media Query to change the container flex direction */
/* ************************************************** */
@media screen and (min-width: 750px) {
    .main_card_container {
        flex-direction: row;
    }
}


    /* ************************************************************************ */