/* Ran Yang 2020 Developed and Designed
HTML5 CSS 3 with Grid layout
*/

/*FONT SETTINGS*/
@import url(http://fonts.googleapis.com/css?family=Codystar|Amatic+SC|Bellefair|Cuprum|Patrick+Hand+SC&display=swap);
/*
font-family: 'Codystar', cursive;			HEADER
font-family: 'Amatic SC', cursive; 			menu footer
font-family: 'Patrick Hand SC', cursive;	subtitle menu link
----------------------------------------------------------------------
font-family: 'Bellefair', serif;			main lighter
font-family: 'Cuprum', sans-serif;			a little dark.. maybe
=======================================================================
*/

/*OVERALL WRAPPER SETTINGS*/
* {
	margin: 0;
	padding: 0;
	font-size: 20px;
}
a{
	text-decoration: none;
}
.duffyhug {
	min-height: 100vh;
	background-color: hsla(295,6%,95%,0.9);
}
html {
  scroll-behavior: smooth;
}

/*MOBILE CLICK SHOW MENU CLICK AGAIN HIDE MENU - NO HOVER */
.dropduffy{
	font-size: 1.5rem;
    position: relative;
	top: auto;
	font-family: 'Patrick Hand SC', cursive;
	margin: none;
}
.dropduffybar{
	color: hsla(209,100%,95%,1.00);
	background-color: hsla(206,48%,49%,0.0);
    padding: 0.1rem 1rem 0.1rem 1rem;
    border: none;   
	display: block;
	text-align: left;
	font-size: 5rem;
}
.dropduffybar:hover, .dropduffybar:focus {
    color: hsla(5,46%,59%,1.00);
}
.dropduffymenu{
	background-color: hsla(203,35%,39%,0.6);
    display: none;
    position: absolute;
    overflow: hidden;
	min-width: 50vw;
    list-style-type: none;
    padding-left: 0.1rem;
	border-bottom-right-radius: .6rem;
	border-top-right-radius: .6rem;
	box-shadow: 0.1rem 0.2rem 0.1rem hsla(203,35%,9%,1); 
	z-index: 1000;
}
.dropduffymenu a{
	color: hsla(209,100%,95%,0.8);
    padding: 0.8rem 1rem;
    display: block;
	text-align: left;
	font-family: 'Patrick Hand SC', cursive;
	font-size: 1.3rem;
}
.dropduffymenu a:hover{
	background-color: hsla(203,35%,19%,0.8);
	color: hsla(5,46%,59%,1.00);
	list-style-type: none;
	letter-spacing: 3px;
	transition: all .3s;
}
.show {
	display:block;
}

/*HEADER AREA*/
.duffyhead {
	background: url("../../Pics/RRTexture-1.jpg") center;
	background-size: cover;
/*	max-height: 60vh;*/
	height:auto;
}
.duffyhead2 {
	background: url("../../Pics/RRTexture-11.jpg") center;
	background-size: cover;
/*	max-height: 60vh;*/
	height:auto;
}
.duffyhead3 {
	background: url("../../Pics/RRTexture-6.jpg") center;
	background-size: cover;
/*	max-height: 60vh;*/
	height:auto;
}
.duffycrown h1 {
    padding: 1rem;
	font-family: 'Codystar', cursive;
	text-align: center;
}
.duffycrown h1 a{
	color: hsla(210,50%,92%,1.00);
	background-color: hsla(203,35%,19%,0.8);
	font-size: 3rem;
	border-radius: 0.6rem;
	box-shadow: 0.1rem 0.2rem 0.1rem hsla(203,35%,9%,1);
	padding: 0.2rem 0.75rem;
}
.duffycrown article p{
	font-family: 'Patrick Hand SC', cursive;
	text-align: center;
	padding: 1rem;
}
.duffycrown article p a{
	background-color: hsla(203,35%,19%,0.8);
	color: hsla(210,50%,80%,1.00);
	font-size: 1.1rem;
	padding: 0.2rem 0.5rem;
}
.duffycrown p a:hover{
	color: hsla(5,46%,59%,1.00);
	letter-spacing: 5px;
	transition: all .3s;
}



/*MAIN CONTENTS*/
/*style sheets for electrons 252*/
.electronics{
	background: linear-gradient(to bottom,hsla(1,96%,42%,0.9), hsla(328,69%,49%,0.7) 100%);
	border-radius: .3rem;
}
.duffyled {
	padding:1rem;
}
.duffyled h1 {
	color: hsla(192,66%,24%,1.00);
	padding: 3rem 1rem;
	font-size: 3rem;
	font-family: 'Amatic SC', cursive;
}
.duffyled h4 {
	color: hsla(37,90%,57%,1.00);
	padding: .5rem;
	font-size: 1.2rem;
	font-family: 'Amatic SC', cursive;
}
.duffyled ul{
	display: grid;
	grid-template-rows: repeat(auto-fit, minmax(10px, 1fr));
	grid-gap: 1rem;
}
.duffyled li{
	border-radius: .3rem;
	list-style: none;
	box-shadow: 0.2rem 0.2rem 0.5rem hsla(203,25%,9%,1);

}
.redled {
	background-color:hsla(1,97%,54%,1.00);
}
.orangeled{
	background-color: hsla(36,89%,56%,1.00)
}
.yellowled{
	background-color: hsla(60,74%,61%,1.00)
}
.greenled{
	background-color: hsla(114,54%,38%,1.00);
}
.blueled {
	background-color: hsla(192,68%,43%,1.00);
}
.violetled {
	background-color: hsla(322,87%,42%,1.00);
}
.uvled {
	background-color: hsla(0,5%,5%,1.0);
}
.duffyled p{
	font-size: 1rem;
	line-height: 1.5;
	padding: 0.5rem .75rem;
	color: hsla(94,67%,92%,1.00);
	font-family: 'Cuprum', sans-serif;
}
.duffyled p a{
	font-size: 1.3rem;
	color: hsla(328,69%,85%,1.00);
}
.duffyled p a:hover{
	color: hsla(328,69%,95%,1.00);
	letter-spacing: 10px;
	transition: all .3s;
}

/*duffyrainbow*/
.duffyrainbow {
	padding:1rem;
}
.duffyrainbow h3 {
	color: hsla(192,66%,94%,1.00);
	padding: .5rem;
	font-size: 2rem;
	font-family: 'Amatic SC', cursive;
}
.duffyrainbow h4 {
	color: hsla(37,90%,97%,1.00);
	padding: .5rem;
	font-size: 1.3rem;
	font-family: 'Amatic SC', cursive;
}
.duffyrainbow ul{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	grid-template-rows: auto;
	grid-gap: 1rem;
}
.duffyrainbow li{
	border-radius: .3rem;
	list-style: none;
	box-shadow: 0.2rem 0.2rem 0.5rem hsla(203,25%,9%,1);

}
.duffyrainbow p{
	font-size: 1.0rem;
	line-height: 1.5;
	padding: 1rem .75rem;
	color: hsla(94,67%,92%,1.00);
	font-family: 'Bellefair', serif;
}
.duffyrainbow p a{
	color: hsla(328,69%,95%,1.00);
}
.duffyrainbow p a:hover{
	color: hsla(7,89%,87%,1.00);
	transition: all .3s;
}
	
}
/*style sheets for electrons 351 471*/

.duffy{
	padding: 1rem;
	
}
.duffy figure {
  	max-height: 260px;
  	overflow: hidden;
	border-radius: .2rem;
  	position: relative;
}
.duffy img {
  	width: 100%;
	transition: transform 800ms ease-out;
}
.duffy img:hover{
	transform: scale(1.25);
}

.duffy figcaption {
	position: absolute;
	top: 0;	 
	background-color: hsla(356,13%,20%,0.8);
	width: 100%;
	padding-top: 0rem;
	margin-top: 0rem;
}
.duffy h3 {
	color: hsla(5,45%,67%,1.00);
	padding: .5rem;
	font-size: 2rem;
	font-family: 'Amatic SC', cursive;
}
.duffy h4 {
	color: hsla(5,45%,47%,1.00);
	padding: .5rem;
	font-size: 1.2rem;
	font-family: 'Amatic SC', cursive;
}
.duffy ul{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	grid-gap: 1rem;
}
.duffy li{
	background-color: hsla(212,96%,88%,0.2);
	border-radius: .2rem;
	list-style: none;
	box-shadow: 0.2rem 0.2rem 0.5rem hsla(203,35%,9%,1);

}
.duffy p{
	font-size: 1.5rem;
	line-height: 1.5;
	padding: 1rem .75rem;
	color: hsla(344,56%,66%,1.00);
	font-family: 'Bellefair', serif;
}
.duffy h3 a{
	font-size: 3rem;
	color: hsla(5,45%,67%,1.00);
}
.duffy h3 a:hover{
	color: hsla(5,45%,87%,1.00);
}
.duffy p a{
	color: hsla(344,56%,66%,1.00);
}
.duffy p a:hover{
	color: hsla(344,56%,86%,1.00);
}

/*DuffyFinal*/
.duffyFinal .Projects h2{
    background: linear-gradient(to top,hsla(151,36%,65%,0.8), hsla(240,73%,9%,0.8) 100%);
	border-top-left-radius: 0.2rem;
	border-top-right-radius: 0.2rem;
}
.duffyFinal{
	padding: 0rem 0rem;
	background-color: hsla(212,96%,88%,0.2);
	border-radius: .2rem;
	list-style: none;
	box-shadow: 0.2rem 0.2rem 0.5rem hsla(203,35%,9%,1);
	margin:0.75rem;
}
.duffyFinal h2 {
	color: hsla(5,45%,47%,1.00);
	padding: 1rem;
	font-size: 5rem;
	font-family: 'Amatic SC', cursive;
}
.duffyFinal h3 {
	color: hsla(5,45%,47%,1.00);
	padding: 1rem;
	font-size: 3rem;
	font-family: 'Amatic SC', cursive;
}
.duffyFinal h4 {
	color: hsla(5,45%,47%,1.00);
	padding: 1rem;
	font-size: 2rem;
	font-family: 'Amatic SC', cursive;
}
.duffyFinal h5 {
	color: hsla(238,77%,14%,1.00);
	padding: 1rem;
	font-size: 1.0rem;
	font-family: 'Patrick Hand SC', cursive;
	letter-spacing: 2px;
}
.duffyFinal ul{
	display: grid;
	grid-template-rows: repeat(auto-fit, minmax(600px, 1fr));
	grid-gap: 1rem;
}
.duffyFinal li{
	background-color: hsla(212,96%,88%,0.2);
	border-radius: .2rem;
	list-style: none;
	box-shadow: 0.2rem 0.2rem 0.5rem hsla(203,35%,9%,1);
}
.duffyFinal p{
	font-size: 1.3rem;
	line-height: 1.5;
	padding: 1rem .75rem;
	color: hsla(344,56%,26%,1.00);
	font-family: 'Bellefair', serif;
}
.duffyFinal h4 a{
	color: hsla(209,26%,16%,1.00);
	font-size: 2rem;
}
.duffyFinal h4 a:hover{
	color: hsla(31,35%,72%,1.00);
}
.duffyFinal h3 a{
	color: hsla(189,12%,35%,1.00);
	font-size: 3rem;
}
.duffyFinal h3 a:hover{
	color: hsla(31,35%,72%,1.00);
}
.duffyFinal p a{
	color: hsla(344,56%,46%,1.00);
	font-size: 1.3rem;
}
.duffyFinal p a:hover{
	color: hsla(31,35%,72%,1.00);
}
/*Duffybare*/
.duffybare{
	font-size: 1rem;
	line-height: 1.5;
	padding: 1rem .75rem;
	color: hsla(32,94%,14%,1.00);
	font-family: 'Bellefair', serif;
}
.duffybare h3 {
	color: hsla(5,46%,69%,1.00);
	padding: 1rem;
	font-size: 1.5rem;
	font-family: 'Amatic SC', cursive;
}
.duffybare ul{
	display: grid;
	grid-template-rows: repeat(auto-fit, minmax(340px, 1fr));
	grid-gap: 1rem;
}
.duffybare li{
	background-color: hsla(212,96%,88%,0.6);
	border-radius: .2rem;
	list-style: none;
	box-shadow: 0.2rem 0.2rem 0.5rem hsla(203,35%,9%,1);
}
.duffybare p{
	font-size: 1rem;
	line-height: 1.5;
	padding: 1rem .75rem;
	color: hsla(344,56%,86%,1.00);
	font-family: 'Bellefair', serif;
}
.duffybare p a{
	text-decoration: none;
	color: hsla(32,94%,64%,1.00);
}
.duffybare p a:hover{
	color: hsla(32,94%,34%,1.00);
}

/*duffyvillain*/
.duffyvillain{
	font-size: 1rem;
	line-height: 1.5;
	padding: 1rem .75rem;
	font-family: 'Bellefair', serif;
}
.duffyvillain h2 {
	color: hsla(205,34%,18%,1.00);
	padding: .5rem;
	font-size: 3rem;
	font-family: 'Amatic SC', cursive;

}
.duffyvillain h3 {
	color: hsla(205,34%,18%,1.00);
	padding: .5rem;
	font-size: 1.5rem;
	font-family: 'Amatic SC', cursive;
}
.duffyvillain ul{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
/*	grid-template-rows: auto;*/
	grid-row-gap: 1rem;
	grid-column-gap: 1rem;
}
.duffyvillain li{
	border-radius: .2rem;
	list-style: none;
	padding: 0.2rem;
}
.duffyvillain p{
	font-size: 1.3rem;
	line-height: 1.5;
	padding: 1rem .75rem;
	color: hsla(344,56%,46%,1.00);
	font-family: 'Bellefair', serif;
}
.duffyvillain p a{
	font-size: 1.3rem;
	color: hsla(32,94%,34%,1.00);
}
.duffyvillain p a:hover{
	color: hsla(32,94%,64%,1.00);
}
.duffyvillain figure {
  	max-height: 562px;
  	overflow: hidden;
	border-radius: 0.2rem;
  	position: relative;
}
.duffyvillain img {
  	width: 100%;	
	transition: transform 800ms ease-out;
}
.duffyvillain img:hover{
	transform: scale(2.0);
}

.duffyvillain figcaption {
	position: absolute;
	bottom: 0;	 
	background-color: hsla(48,9%,89%,0.8);
	width: 100%;
	padding-top: 0rem;
	margin-top: 0rem;
}
.darthvader{
	background-color: hsla(202,30%,80%,0.8);
	border-radius: .2rem;
	box-shadow: 0.2rem 0.2rem 0.5rem hsla(203,35%,9%,1);
}
.Riddler{
	background-color: hsla(0,35%,81%,0.8);
	border-radius: .2rem;
	box-shadow: 0.2rem 0.2rem 0.5rem hsla(0,35%,21%,1);
}
.Thanos {
	background-color: hsla(75,78%,90%,0.8);
	border-radius: .2rem;
	box-shadow: 0.2rem 0.2rem 0.5rem hsla(75,78%,11%,1);
}
.Voldemore {
	background-color: hsla(274,45%,90%,0.8);
	border-radius: .2rem;
	box-shadow: 0.2rem 0.2rem 0.5rem hsla(274,48%,11%,1);
}
.videolaryn {
	background-color: hsla(189,35%,66%,0.80);
	border-radius: .2rem;
	box-shadow: 0.2rem 0.2rem 0.5rem hsla(189,35%,6%,1);
}
.heatdetector {
	background-color: hsla(40,37%,46%,0.8);
	border-radius: .2rem;
	box-shadow: 0.2rem 0.2rem 0.5rem hsla(12,91%,16%,1);	
}
.biggerscreen {
	background-color: hsla(197,71%,15%,0.8);
	border-radius: .2rem;
	box-shadow: 0.2rem 0.2rem 0.5rem hsla(168,74%,9%,1);	
}
/*duffyrescue*/
.duffyrescue{
	font-size: 1rem;
	line-height: 1.5;
	padding: 1rem .75rem;
	font-family: 'Bellefair', serif;
}
.duffyrescue h2 {
	color: hsla(205,34%,78%,1.00);
	padding: 1rem;
	font-size: 3.5rem;
	font-family: 'Amatic SC', cursive;
}
.duffyrescue h3 {
	color: hsla(205,34%,78%,1.00);
	padding: 1rem;
	font-size: 1.5rem;
	font-family: 'Cuprum', sans-serif;
}
.duffyrescue h4 {
	color: hsla(194,55%,65%,1.00);
	padding: 1rem;
	font-size: 2rem;
	font-family:'Cuprum', sans-serif;
}

.duffyrescue ul{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
/*	grid-template-rows: auto;*/
	grid-row-gap: 1rem;
	grid-column-gap: 1rem;
}
.duffyrescue li{
	border-radius: .2rem;
	list-style: none;
	padding: 0rem;
}
.duffyrescue p{
	font-size: 1rem;
	line-height: 1.5;
	padding: 1rem .75rem;
	color: hsla(189,35%,92%,1.0);
	font-family: 'Bellefair', serif;
}
.duffyrescue p a{
	color: hsla(32,94%,54%,1.00);
}
.duffyrescue p a:hover{
	color: hsla(32,94%,84%,1.00);
}
.duffyrescue figure {
  	max-height: 1280px;
  	overflow: hidden;
	border-radius: 0.2rem;
  	position: relative;
}
.duffyrescue img {
  	width: 100%;	
	transition: transform 800ms ease-out;
}
.duffyrescue img:hover{
	transform: scale(2.0);
}

.duffyrescue figcaption {
	position: absolute;
	bottom: 0;	 
	background-color: hsla(189,35%,16%,0.70);
	width: 100%;
	padding: 1rem 1rem 1rem 1rem;
	margin-bottom: 0rem;
}
.larynintro {
	background-color: hsla(189,35%,6%,0.70);
	padding: 1rem;
	color: hsla(189,35%,86%,1.0);
}
.larynintro p{
	padding: 1rem;
}
/*FOOTER MENU*/
.duffypaw{
	background-color: hsla(203,35%,19%,1);
	padding: .3rem;
	text-align: center;
	font-size: .5rem;
	font-family: 'Patrick Hand SC', cursive;
	padding-bottom: 5rem;
}
.duffypaw ul{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	grid-gap: 1rem;
}
.duffypaw li{
	list-style: none;	
	
}
.duffypaw a {
  	color: hsla(212,96%,88%,1.0);
	font-size: 1.3rem;
  	margin: 0rem;
  	border-radius: .25rem;
  	transition: all .3s;
	text-align: center;
}
.duffypaw a:hover{
	color: hsla(210,50%,17%,1.00);
	background-color: hsla(212,96%,88%,0.8);
	letter-spacing: 2px;
	transition: all .3s;
	padding: 0 0.3rem;
}