/* сброс стилей браузера */
* {
  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;
} 
/* конец кода сброса стилей браузера */

html, body {
    width: 100%;
    height: 100%;
    background-color: black;
}

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;
    left: 0;
    right: 0;
    padding: 10px;
    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);

    /*margin: 20px auto;
    width: 50%;
    text-align: center;*/
}

.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%));
    
    box-shadow: 0 0 10px 20px hsla(10,5%,17%,.5);
    max-width: 1024px;
    margin: 30px auto;
}

.imageparent{
    background-color: black;
    display:flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    
}

.imagechild {
    background-position:center;
    margin: auto auto;
    width: 100%;
}

.imagechild img{
    background-position:center;
    margin: auto auto;
    width: 100%;
}
.Categorii {
    /*border-radius: 4px;
    border: inset 3px grey ;*/
    background-color: black ;
    /*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: 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;
}