/* Layout */

		input[type=text], input[type=number] {
			width: 200px;
			box-sizing: border-box;
			border: 2px solid #ccc;
			border-radius: 4px;
			font-size: 11px;
			background-color: white;
			background-image: url('searchicon.png');
			background-position: 10px 10px;
			background-repeat: no-repeat;
			padding: 12px 20px 12px 40px;
		}

		header .overlay {
			width: 100%;
			height: 100%;
			padding: 50px;
			color: #FFF;
			text-shadow: 1px 1px 1px #333;
			background-image: linear-gradient(135deg, #9f05ff69 10%, #fd5e086b 100%);

		}


		h3,
		p {
			font-family: 'Open Sans', sans-serif;
			margin-bottom: 30px;
		}



		body {
			margin: 0;
			font-family: Arial, Helvetica, sans-serif;
            background-color: #3a3b3c;
		}

		header {
			background: url('https://ocdn.eu/images/pulscms/YmQ7MDA_/69a69ff5d10804f3cb12cb227c7a8455.jpg');
			text-align: center;
			width: 100%;
			height: auto;
			background-size: cover;
			background-attachment: fixed;
			position: relative;
			overflow: hidden;
			border-radius: 0 0 85% 85% / 30%;
		}

		.topnav {
			overflow: hidden;
			background-color: #333;
		}

		.topnav a {
			float: left;
			color: #f2f2f2;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
			font-size: 17px;
		}

		.topnav a:hover {
			background-color: #ddd;
			color: black;
		}

		.topnav a.active {
			background-color: #04AA6D;
			color: white;
		}


		body {
			min-width: 630px;
		}

		#container {
			padding-left: 200px;
			padding-right: 190px;
		}

		#container .column {
			position: relative;
			float: left;
		}

		#center {
			padding: 10px 20px;
			width: 100%;
		}

		#left {
			width: 180px;
			padding: 0 10px;
			right: 240px;
			margin-left: -100%;
		}

		#right {
			width: 130px;
			padding: 0 10px;
			margin-right: -100%;
		}

		#footer {
			clear: both;
		}

		/* Left design */
		* html #left {
			left: 150px;
		}

		/* make columns same height */
		#container {
			overflow: hidden;
		}

		#container .column {
			padding-bottom: 1001em;
			margin-bottom: -1000em;
		}

		/* Footer */

		.footer {
			display: flex;
			flex-flow: row wrap;
			padding: 30px 30px 20px 30px;
			color: #f0e7e7;
			background-color: rgb(36, 32, 32);
			border-top: 1px solid #e5e5e5;
		}

		.footer>* {
			flex: 1 100%;
		}

		.footer__addr {
			margin-right: 1.25em;
			margin-bottom: 2em;
		}

		.footer__logo {
			font-family: 'Pacifico', cursive;
			font-weight: 400;
			text-transform: lowercase;
			font-size: 1.5rem;
		}

		.footer__addr h2 {
			margin-top: 1.3em;
			font-size: 15px;
			font-weight: 400;
		}

		.nav__title {
			font-weight: 400;
			font-size: 15px;
		}

		.footer address {
			font-style: normal;
			color: #999;
		}

		.footer__btn {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 36px;
			max-width: max-content;
			background-color: rgba(255, 255, 255, 0.07);
			border-radius: 100px;
			color: #ffffff;
			line-height: 0;
			margin: 0.6em 0;
			font-size: 1rem;
			padding: 0 1.3em;
		}

		.footer ul {
			list-style: none;
			padding-left: 0;
		}

		.footer li {
			line-height: 2em;
		}

		.footer a {
			text-decoration: none;
		}

		.footer__nav {
			display: flex;
			flex-flow: row wrap;
		}

		.footer__nav>* {
			flex: 1 50%;
			margin-right: 1.25em;
		}

		.nav__ul a {
			color: #999;
		}

		.nav__ul--extra {
			column-count: 2;
			column-gap: 1.25em;
		}

		.legal {
			display: flex;
			flex-wrap: wrap;
			color: #999;
		}

		.legal__links {
			display: flex;
			align-items: center;
		}

		.heart {
			color: #ffffff;
		}

		@media screen and (min-width: 24.375em) {
			.legal .legal__links {
				margin-left: auto;
			}
		}

		@media screen and (min-width: 40.375em) {
			.footer__nav>* {
				flex: 1;
			}

			.nav__item--extra {
				flex-grow: 2;
			}

			.footer__addr {
				flex: 1 0px;
			}

			.footer__nav {
				flex: 2 0px;
			}
		}

		/* Aesthetics */
		body {
			margin: 0;
			padding: 0;
			font-family: Sans-serif;
			line-height: 1.5em;
		}

		p {
			color: #555;
		}

		nav ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

		nav ul a {
			color: darkgreen;
			text-decoration: none;
		}

		#header,
		#footer {
			font-size: large;
			padding: 3.0em;
			background-image: url("images/footer.jpg");
		}

		#left {
			background: #DAE9BC;
		}

		#right {
			background: #F7FDEB;
		}

		#center {
			background-image: url("images/center.jpg");
		}

		#container .column {
			padding-top: 1em;
		}



		.card {
			box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
			transition: 0.3s;
			border-radius: 5px; /* 5px rounded corners */
			width: 20%;
			height: 20%;
  			margin: 10px;
  			text-align: center;
  			font-size: 10px;
		  }
		  
		  /* On mouse-over, add a deeper shadow */
		  .card:hover {
			box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
		  }
		  
		  /* Add some padding inside the card container */
		  .container {
			padding: 2px 16px;
		  }

          button{
			border: solid 1px;
			border-color: darkcyan;
			background-color: #04AA6D;
			color: white;
			width: 200px;
			height: 40px;
			margin-top: 8px;
			margin-left: 2px;
			border-radius: 5px;
            transition-duration: 0.4s;
		  }

          button:hover {
            background-color: white; /* Green */
            color: black;
          }

          .adminDiv{
            border: solid 1px;
            width: 500px;
            margin: auto;
            text-align: center;
            height: 100%;
            background-color: white;
            padding-top: 40px;
            border-radius: 5px;
          }

          .pf {
            display: flex;
            justify-content: center;
            
            padding-top: 40px;
            border: solid 1px;
            border-radius: 5px;
          }