@charset "utf-8";
/* CSS Document */
html, body {
	max-width: 100vw;
}
body {
	color: #7079d3;
	font: bold;
	font-size: 1.5em;
}
a {
	color: #558d02;
}
form {
	width: 50vw;
	margin: 0 auto;
}
.img {
	float: left;
	vertical-align: middle;
}
.centered {
	display: block;
	width: 10vw;
	margin: 0 auto;
}
.compact_table {
	font-size: .75em;
	max-width: 100vw;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(auto, 12em));
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;
  font-size: 12px;
  border: 3px solid green;
  white-space: nowrap;
}

#backgroundVideo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
}
#plant_label {
	display: flex;
	align-items: center;
	overflow: auto;
}
#existing_plants {
	display: inline-block;
	width: auto;
	margin: 0 auto;
	padding: 1em;
}


fieldset {
	background-color: rgba(9,9,103,0.54);
}
#fertilizer {
	margin-top: 1em;
}
.remove_entry_button:hover {
	background-color: rgba(255,0,4,0.60);
}
.fert {
	margin-top: 1em;
	border-style: solid;
	border-color: darkgreen;
}
.fert:hover {
	background-color: rgba(32,192,65,0.50);
	border-style: inset;
}
.ipm {
	margin-top: 1em;
	border-style: solid;
	border-color: darkred;
}
.ipm:hover {
	background-color: rgba(91,3,4,0.48);
	border-style: inset;
}


@-webkit-keyframes bounce {
        0% {
    transform: scale(1,1) translate(0px, 0px);
  }
  
  30%{
    transform: scale(1,0.8) translate(0px, 10px); 
  }

  75%{
    transform: scale(1,1.1) translate(0px, -25px); 
  }
  
 100% {
    transform: scale(1,1) translate(0px, 0px);
  }
}

.bounce {
	-webkit-animation: bounce 1s infinite;
}

@media (min-aspect-ratio: 16/9) {
    #backgroundVideo {
        width:100%;
        height: auto;
    }
}
@media (max-aspect-ratio: 16/9) {
    #backgroundVideo { 
        width:auto;
        height: 100%;
    }
}

@media print {
	#print_button {
		display: none;
	}
}
@media only screen and (max-width: 700px) {
	#backgroundVideo {
		display: none;
	}
	body {
		width: auto;
		max-width: 100vw;
		background: url("../images/background.png");
		background-attachment: fixed;
		background-repeat: repeat;
	}
	/*html, body {
		overflow-x: hidden;
	}
	body {
		position: relative;
	}*/
	form {
		width: 100vw;
	}
}