@tailwind base;
@tailwind components;
@tailwind utilities;





 
body {
	background: url(../images/background3.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
/*
@media screen and (min-width:600px){
.wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	grid-auto-rows: auto;
  }
}
  .header {
	grid-column: 1 / 4;
	grid-row: 1;
	position: relative;
  }
@media screen and (min-width: 600px){
  .aboutme {
	grid-column: 1/3;
	grid-row: 2;
  }
}
  .pets {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 50%;
	grid-column: 3/4;
	grid-row: auto;
	align-content: center;
	gap: .5rem;
  }
  @media screen and (min-width:600px){ 
	  .works {
	grid-column: 1/3;
	grid-row: 3;
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	justify-content: center;
}
  }
.contact {
	grid-column: 3;
	grid-row: 4;
	justify-content: center;
}

.footer {
	grid-column: 1 /3;
	grid-row: 6;
}
 */

/* secondary classes in order of appearence */

/* name */
/* pic of me */
/* .header img {
	width: 4rem;
	height: auto;
	position: absolute;
	left: 20rem;
	top: 1rem;
} */
/* open eyes */
/* .header p{
	font-size: 1.2rem;
	display: absolute;
	top: 4rem;	
}


nav{
	position: absolute;
	right: 10%;
	bottom: 5%;
	font-size: 1.5rem;
}

a{
	text-shadow: 2px 2px 5px #00829d;
	transition: transform .3s ease;
	color: #3f5512;
}

a:hover{
	font-size: 1.3rem;
}

h2{
	font-size: 3rem;
	display: block;
	color: #b84d01;
	
}

@media screen and (min-width:600px){
	
	.pets img {
		max-width:4rem;
		height: auto;
		flex: 1;
	}
}

.pets img:nth-child(2) {
	align-self: center;
}




h3{
	font-size: 2rem;
	color: #ba8114;
}

article:first-child{
	flex:1 0 100%;
}
article img:first-child{
	width: 100%;
	height: auto;
}

article:first-child{
	grid-row: span 2/auto;
}



article {
	flex: 0 .5rem 50%;
	grid-row: 1;
} */

/* headers font*/
/* h2, h3, h4, h5, h6 {
	font-family: Verdana,Geneva,sans-serif;
}

h1{
	font-size: 4rem;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	color: #2e5e48;
}

#about{
	color: white;
	font-weight: bold;
	font-size: 2rem;
}

#pets{
	border-radius: 1px, 2px, white;
} */