body {
margin: 10px;

}
#images{
	
}
#imgs{
width: 300px;
height: 300px;
border:1px solid black;
	box-shadow:
    0 0 3px 2px #99ffcc,  
    0 0 6px 3px #aaff80,
    0 0 8px 5px #0ff; 
    border-radius: 5px;
}
#imgs:hover{
transform: scale(1.1);
}
#title{
text-align: center;
text-shadow: 2px solid gray;
font-size: 36px;
}
#title:hover{
transform: scale(1.1);
}
option{
padding: 20px;
}
article {
	font-family: 'Chakra Petch', sans-serif;
	font-weight: bold;
	letter-spacing: 3px;
	font-size: 32px;
  background: linear-gradient(
    to right, 
    hsl(98 100% 62%), 
    hsl(204 100% 59%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}


article:hover{
transform: scale(1.2);
color: #33ffd6;
}

.container{
color: black;
}
.text{
margin: 10px;
font-size: 1.5rem;
}
p,h6{
font-size: 1.25rem;
}
.btn{
width: 200px;
padding: 5px;
font-size: 26px;
font-weight: bold;
border-radius: 5%;
background: -webkit-gradient(to right,#a2ccb6 0%,#fceeb5 50%, #ee786e 100%);
background: linear-gradient(to right,#a2ccb6 0%,#fceeb5 50%,#ee786e 100%);
}
.btn:hover{
transform: scale(1.1);
}
a{
text-decoration: none;
color: black;
}
.sidepanel  {
width: 0;
position: fixed;
z-index: 1;
height: 400px;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidepanel a {
padding: 6px 6px 6px 28px;
text-decoration: none;
font-size: 22px;
color: #818181;
display: block;
transition: 0.3s;
height: auto;
}
.sidepanel a:hover {
color: #f1f1f1;
}
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color:#444;
}