/* сброс стилей браузера */
* {
  box-sizing: border-box; 
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol { 
	padding-left: 1.4em;
	list-style: decimal;
}
ul {
	padding-left: 1.4em;
	list-style: square;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
/* конец кода сброса стилей браузера */

body {
    background: url("images/Фон8.png") no-repeat fixed center;
    background-color: black;
    background-size: 100% 100%;
    
    
    /*background-attachment: fixed;
    background-color: black; /*hsl(180,70%,70%);*/
    /*background-image: grey; *//*linear-gradient(45deg, hsl(10,99%,50%) , yellow 40%, white 70%, hsl(180,40%,1%));*/
}

h1 {
        font-size: 2em;
        color: lightgrey;
}

h2 {
        font-size: 4em;
        color: white;
}

p2 {
        font-size: 1.5em;
        color: hsl(0,1%,75%);
}

p3 {
        font-size: 3.5em;
        color: hsl(0,1%,75%);
}

header {
    top: 0;
    background-color: black;
    /*background-image: url(images/карбон2.png);linear-gradient(to top, hsl(18,10%,9%), grey 5%, white 40%, white 60%, hsl(18,40%,9%));
    color: white;
    text-align: center;
    text-shadow: 4px 4px 6px rgba(0,0,0,.75);*/
    height:80px;
    width: 100%;
    display:flex;
    
}

.ikon {
    color: grey;
    height:80px;
    width: 80px;
    margin: 0 10px;
}

.CategoriiInfo {
    border-radius: 4px;
    border: inset 3px grey ;
    background-color: hsl(180,10%,70%);
    background-image: linear-gradient(135deg, hsl(18,40%,5%) 5%, hsl(18,40%,5%));
    background-position: center;
    box-shadow: 0 0 10px 20px hsla(10,5%,17%,.5);
    max-width: 1024px;
    margin: 30px auto;
}

.Categorii {
    /*border-radius: 4px;
    border: inset 3px grey ;
    background-color: hsl(180,10%,70%);
    background-image: linear-gradient(135deg, hsl(18,40%,9%) 5%, white 60%, hsl(18,40%,9%));*/
    background-position: center;
    /*box-shadow: 0 0 10px 20px hsla(10,5%,17%,.5);*/
    max-width: 1024px;
    margin: 90px auto ;
    
}

.Categorii figure {
    /*border-radius: 24px;/*8*/
    /*border: inset 8px grey ;
    border-left: inset 2px black ;
    border-right: inset 2px black ;
    border-bottom: inset 2px black ;
    border-right-color: green;
    /*background-image: linear-gradient(90deg, white 5%, black 45%, black
    60%, black);*/
    background:  url(images/кнопки/КнопкаДвигатель.png) no-repeat center; /*url(images/металл5.png);*/
    background-size: 95% 95%;
    display: inline-block;
    width: 300px;
    height: 300px;
    margin: 10px;
    left: 8px;
    position: relative;
   /* background-color: black;*/
    /*box-shadow: 0 0 20px 8px hsla(10,5%,17%,.5),10px 0 24px 4px hsla(10,5%,17%,.8);*/
}



.Categorii figure img {
        position: absolute;
        margin: 12px auto;
        top: 10px;
        right: 20px;
        /*background-color: hsl(48,99%,50%);*/
        
}

.Categorii figcaption {
        
        position: absolute;
        margin: 0px auto;
        top: 0px;
        right: 0px;
        opacity: 0;
	    transition: opacity 0.55s ease-out;
}

.Categorii figure:hover figcaption {
	opacity: 1;
}

.Categorii figure:active {
    background:  url(images/кнопки/КДвигательНажата.png) no-repeat center; /*url(images/металл5.png);*/
    background-size: 95% 95%;
    display: inline-block;
    width: 300px;
    height: 300px;
    margin: 10px;
    left: 8px;
    position: relative;
}

.Categorii figure:hover html {
    background-image: linear-gradient(90deg, hsl(10,99%,50%) , yellow 40%, white 70%, hsl(180,40%,1%));
}

footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px;
        background-color: black;
        color: white;
}