@charset "UTF-8";

/* CSS Document */

/* this is a comment */

/*
This is a multi-line comment
*/
*{box-sizing: border-box}
body
{
	background-color: aqua;
}



.sticky
{
	font-size:50px;
	background-color: burlywood;
	position: sticky;
	top:0;
	width:100%;
}
.sticky a
{
	color:brown;
}
.sticky a:hover
{
	color:blue;
}


h1 /* I Have A Webpage??? WOAH!!! */
{
	text-align:center; border-bottom: 6px solid black; font-size: 50px
}


h2 /* A Website All About ALEX WHITMORE */
{
	font-family:Impact, Haettenschweiler, 'Franklin Gothic Bold', 'Arial Black', 'sans-serif'; text-align: center
}

p /*Who is Alex Whitmore you may ask? Well, You're about to find out.*/
{
	color:#E71114; 
	text-align: center; 
	font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif';
}

.image /*Email and Image and Button*/
{
	text-align:center;
	
}

a /*My Email*/
{
	text-align: center;
}

.linear
{
	background:linear-gradient(darkred, tomato, yellow);
	padding:5px;
	width:25%;
	text-align:left;
	margin:auto;
}

.margin
{
	text-align: center;
	width: 50%;
	border:10px solid tomato;
	background-color: aquamarine;
	margin: 20px auto 20px auto;
}

.newspaper{
		column-count: 2;
		column-width: 80px;
	}

/*#content
{
	width:90%;
	background-color: lightblue;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size:40px;
	margin:auto;
	text-align: center;
}
@media screen and (max-width:800px)
{
	#content
	{
	width:50%;
	font-size:20px;	
	}
	
}*/

.sketches
{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 20px auto 20px auto;
} 
.sketches img
{
	width:210px;
	height:auto;
}


.container
{
  border:4px solid darkgreen;
  background-color:lightgreen;
  color:darkgreen;
  font-size:48px;
  text-align:center;
  padding:10px;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  align-content: space-evenly;
	
}
.item
{
  border:4px solid darkblue;
  background-color:white;
  color:darkblue;
  padding:10px;
  margin:10px;
  flex-basis:200px;
}

.container2
{
  	display:grid;
  	grid-template-columns: auto auto auto auto;
  	grid-gap:10px;
	column-gap: 20px;
  	justify-content: center;
	align-content: center;
	max-width: inherit;
	
	
  /* 
  the number of values you provide determines the number of columns 
  rows will wrap accordingly
  the value for each column determines its width
  use the auto keyword to fill the available space
  */
}
.item2
{
  background-color:lightgreen;
  border:2px solid darkgreen;
  padding:2vw;
  font-size:3vw;
  text-align:center;
}


/*#item
{
	flex-grow:1;
	flex-shrink:3;
}*/




.row
	{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

	}
.column {
  flex: 25%;
  max-width: 25%;
}

.column img {
  width: 100%;
	max-width: 100%;
	vertical-align: middle;
	padding: 5px;
}
	
.column3 {
  flex: 33%;
  max-width: 33%;
  padding:5px;
}

.column3 img {
  width: 100%;
	max-width: 100%;
	vertical-align: middle;
}
button
{
  margin-bottom:30px;
  background-color:lightblue;
  color:darkblue;
  border:0px;
  padding:10px;
  margin:10px;
  font-size:24px;
  cursor:pointer
}
button:hover
{
  background-color:darkblue;
  color:white;
}
#info
{
  display:none;
}


.detail{
	font-size:20px;
    background-color:yellow;
    padding: 20px;
    border: 4px solid red;
	display: none;
}
.hidden{
	display: none;
}




footer
{
    text-align: center;
}