welcome.css
3689490fd199dev

welcome.css
View Options


			.div{
			margin-block-end: 5rem;
			}
			.flex-container{
			display: flex;
			height: 60rem; /* Or whatever */
			flex-direction: column;

			}
			.flex-item {
			/* border-style: solid; */
			margin: 1rem;
			padding: 2rem;
			cursor: pointer;
			display: block;
			background: whitesmoke;
			box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.10);
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			padding: 30px;
			text-align: center;
			-webkit-transition: all 0.3s ease 0s;
			-moz-transition: all 0.3s ease 0s;
			-o-transition: all 0.3s ease 0s;
			transition: all 0.3s ease 0s;
			position: relative;
			margin-bottom: 30px;
			}

			/* .flex-item:hover {
			background-color: #3771C8 ;
			} */

			h2{
			font-family: 'Quicksand', sans-serif;
			}
			p {
			text-align: left;
			font-family: 'Quicksand', sans-serif;
			}
			/* IPAD Portrait */
			@media only screen
			and (min-device-width: 768px)
			and (max-device-width: 1024px)
			and (orientation: portrait)
			and (-webkit-min-device-pixel-ratio: 1) {

			.flex-container{
			padding-top: 3rem;
			margin: 1rem;
			display: flex; /* or inline-flex */
			height: 40rem; /* Or whatever */
			width: 42rem;
			flex-direction: column;
			align-items: stretch;
			justify-content: space-around;

			}

			.flex-item {

			margin: 1rem;
			padding: 2rem;
			}
			}
			/* Desktop */
			@media only screen and (min-width: 1024px) {
			.flex-container{
			height: 25rem; /* Or whatever */
			display: flex; /* or inline-flex */
			flex-direction: row;
			align-items: stretch;

			}
			.flex-item {
			width: 45rem;
			margin: 2rem;
			padding: 2rem;
			}
			}