body{
	height:200vh;
	background:skyblue;
}

#title {
	/*
	* Created with https://www.css-gradient.com
	* Gradient link: https://www.css-gradient.com/?c1=28cf29&c2=f4f936&gt=l&gd=dbr
	*/
	background: #28CF29;
	background: linear-gradient(135deg, #28CF29, #F4F936);
  color:black;
  margin:1 1 1 20px;
  font-size:40px;
  text-align:center;
}

#mobile{
  display:none;
}
#navitems{
  display:none;
}
#navitems a:hover {
	background:green;
  border: 5px white solid;
}

#navitems a:link {
	color:white;
}
#navitems a:visited {
	color:yellow;
}
#sub-title input:checked ~ #navitems{
	display:flex;
  justify-items:stretch;
  justify-content:center;
}
#header{
  position:sticky;
  top:0;
  background-color: #60bfcc;
	background: linear-gradient(0deg, rgba(96, 191, 204, 0) 0%, rgba(9, 173, 151, 1) 100%);
}
#sub-title{
  position:sticky;
  display:flex;
	top:28%;
  background:white;
  padding:8px;
  margin-bottom:24px;
  box-shadow:2px 2px 5px black;
  justify-items:stretch;
  justify-content:center;
	box-sizing:border-box;
}

#content{
  display:flex;
  flex-direction:column;
  align-items:center;
  /*
	* Created with https://www.css-gradient.com
	* Gradient link: https://www.css-gradient.com/?c1=fffc07&c2=999c15&gt=l&gd=dbb
	*/
	background: #FFFC07;
	background: linear-gradient(180deg, #FFFC07, #999C15);
}
#pinkbox{
  background:#f1bcce;
}
#blackbox{
  background:#555555;
  color:pink;
}
#seabox{
  background:#ededde;
}
#cooking{
  min-width:50%;
	/*
	* Created with https://www.css-gradient.com
	* Gradient link: https://www.css-gradient.com/?c1=28cf29&c2=f4f936&gt=l&gd=dbr
	*/
	background: #28CF29;
	background: linear-gradient(135deg, #28CF29, #F4F936);
}
#selectbox{
  left:0;
	display:flex;
  box-sizing:border-box;
  align-items:center;
  justify-content:center;
}
#pink,#black,#sea{
 /* display:none; */
}
#imagebox{
 	display:flex; 
  flex-direction:column;
 	justify-content:space-evenly;
  margin:15px;
 	width:100%;
  box-sizing:border-box;
}
#contact{
  flex-direction:column;
  align-items:flex-start;
  /*
	* Created with https://www.css-gradient.com
	* Gradient link: https://www.css-gradient.com/?c1=fffc07&c2=999c15&gt=l&gd=dbb
	*/
	background: #FFFC07;
	background: linear-gradient(180deg, #FFFC07, #999C15);
}
.img{
  height:100px;
	width:100px;
  box-shadow:4px 5px 2px skyblue;
  box-sizing:border-box;
}
.color{
  height:50px;
  width:50px;
  margin:5px;
  border:2px black solid;
}
.seg{
  background-color:white;
  padding:8px;
  margin-bottom:24px;
  box-shadow:2px 2px 5px black;
 	flex:1 2 calc(50%-10px);
  box-sizing:content-box;
}
.article{
	/*
	* Created with https://www.css-gradient.com
	* Gradient link: https://www.css-gradient.com/?c1=28cf29&c2=f4f936&gt=l&gd=dbr
	*/
	background: #28CF29;
	background: linear-gradient(135deg, #28CF29, #F4F936);
  display:flex;
  text-align:center;
  width:100%;
  padding:16px;
  margin:2px;
  box-sizing:border-box;
}
.aside{
	/*
	* Created with https://www.css-gradient.com
	* Gradient link: https://www.css-gradient.com/?c1=28cf29&c2=f4f936&gt=l&gd=dbr
	*/
  gap:1.5em;
	background: #28CF29;
	background: linear-gradient(135deg, #28CF29, #F4F936);
  display:flex;
  text-align:left;
  width:100%;
  padding:16px;
  margin:5px;
  box-sizing:border-box;
}
.link {
  display:flex;
  flex-basis:10px;
  padding:10px;
  margin:5px;
  height:20px;
  width:100px;
  text-decoration: none;
  text-align:center;
  background:#555555;
  color:pink;
  border: 2px black solid;
  text-transform:uppercase;
}

/* 
	Media Query 

	Recommended Breakpoints
	• Mobile ~ 576px
	• Tablet ~ 768px or 992px
	• Small Desktop/Laptop ~ 1200px
	• Large Desktop ~ 1400px
*/
@media screen and (width>=576px){
  body{
  	color:#555555;
 }
  #title{
   /*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=6be86c&c2=000000&gt=l&gd=dbb
*/
background: #6BE86C;
background: linear-gradient(180deg, #6BE86C, #000000);
    color:pink;
	}
#imagebox{
  flex-direction:row;
}
}
@media screen and (width>=768px){
	body{
  color:black;
  }
  #title{
    color:black;
    /*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=28cf29&c2=f4f936&gt=l&gd=dbr
*/
background: #28CF29;
background: linear-gradient(135deg, #28CF29, #F4F936);
  }
}