body{max-height:100vh;
	 background:#000;
	 background-image: url("../img/herobk.png");
 	 background-attachment:fixed;}

hr {background:#fff;
	height:4px;
	width:80%;
	margin:0 auto;
	border-radius:5px;}

section,
.footer-up
	{width:90%;}

section,
.works-slogan,
.contact-item, 
.platform,
.gig,
.hero img,
.banner,
.gig img,
.contact-item img,
footer,
.footer-up
	{margin:0 auto;}

p, span,
h1, h2, h3,
a, li,
.sites > div > p
	{color:#fff;}

h1, h2, h3,
a, a:hover, a:after,
.sites > div > p,
.sites div
	{text-align:center;}

section,
.works-slogan,
.gig p,
footer,
li,
h3,
.contact-item p
	{font-size:28px;}

.copyright, .gig p
	{text-align:center;}

.works-slogan, .gig
	{padding-top:40px;}

.works,
.ux,
.validation,
.warranty,
.platform
	{padding-top:60px;
	 padding-bottom:60px;}

.contact
{padding-top:60px;}
#intro
	{padding-top:40px;
	 padding-bottom:40px;}
section,

.contact-item p
	{text-align:left;}

.sites div p, .old-link
	{line-height:1.3;}

#intro p, .contact-item p, .tools
	{margin-bottom:16px;}

.contact-item p
	{font-size:24px;}

h2	{font-size:32px;}

.highlight
	{background:#555;
     border-radius:2px;}
.darklight
	{color:#aaa;
	 font-style: italic;}

/*hero*/

.hero
	{padding-top:40px;
	 height:100vh;
	 display:flex;
	 flex-direction:column;
	 align-items:center;}

.hero img
	{width:180px;
     height:180px;}

.hero h1
	{font-size:32px;
	 line-height:1.5;
	 margin:28px;
	 text-align:left;}

.hero a
	{display:inline-block;
	 font-size:26px;
	 padding:5px;
	 border-radius:5px;
	 transform: translateY(60px);
	 background:#fff;
	 color:#000;}
.hero a:hover
	{margin-top:1px;}

/*intro*/
#intro h2
    {padding-bottom:40px;}

/*works*/
 
.works-slogan
    {padding-bottom:40px;}

.works p, h3
	{margin-bottom:20px;}
.works p:nth-child(4)
	{margin-bottom:40px;}
.works p:nth-child(5)
	{margin-bottom:60px;}

.brief
	{margin:0 0 1em 1em;
     list-style:disclosure-closed;}

.sites
	{display:grid;
	 gap:40px;}

.banner
	{border-radius:10px;
	 max-width:100%;
	 aspect-ratio:2/1;
	 margin-bottom:16px;}

.old-link
	{font-size:22px;}

.newtab
	{width:24px;
	 aspect-ratio:1/1;
	 display:inline;}

.old-link img
	{width:20px;}

/*validation*/

.validation p, .validation h2
	{margin-bottom:40px;}

.validation h3
	{display:inline-block;}
.validation summary
	{text-align:center;}

/*platform*/

.gig
	{display:grid;
	 width:100%;
	 gap:40px;}
.gig
	{padding-bottom:40px;}

.platform img, .contact-item img
	{aspect-ratio:1/1;
	 margin-bottom:5px}

.platform img
	{width:100px;
	 border-radius:10px;
	 margin-bottom:16px;}

.platform p:nth-child(1), .platform p:nth-child(3)
	{text-align:left;
	 margin-top:20px;}

/*warranty*/


.warranty h2, .hosting-offer, .warranty p
	{margin-bottom:32px;}

ul
	{margin:0.5em 0 1em 1.5em;}
	
li
	{margin-bottom:0.3em;}

/*contact*/

.contact-item
	{display:grid;
	 padding-top:40px;}

.contact-item img
	{height:30%;}

/*footer*/

.footer-up p
	{margin-bottom:40px;}
.copyright
	{padding:60px 0px 5px 0px;}
.validation img, footer img, .brief img
	{aspect-ratio:1/1;
	 display:inline;}

.validation img, .brief img, footer img
	{width:24px;}

.business-img
	{transform: translateX(8px);}

@media (min-width: 576px) {}
@media (min-width: 768px) {

hr {width:70%;}
section,
.footer-up
	{width:70%;}

.hero
	{padding-top:120px;}

.hero h1
	{margin-top:40px;}

.hero a
	{transform: translateY(120px);}

.sites
	{grid:repeat(2,1fr)/repeat(2,1fr);}

.sites div p
	{height:2.2em;}

.gig
	{grid-template-columns:1fr 1fr;}

.contact
    {padding-bottom:60px;}

.contact-item
	{grid-template-columns:repeat(3,1fr);
	 gap:40px;}

.contact-item img
	{height:20%;}

.business-img
	{transform: translateX(12px);}
}		 
@media (min-width: 992px) {

hr {width:60%;}
section,
.footer-up
	{width:60%;}

.sites div p
	{height:auto;}
.contact
    {padding-bottom:0px;}
	
.contact-item img
	{height:30%;}

}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}