/* сброс стилей браузера */
* {
  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 {
    background-attachment: fixed;
    background-color: white; /*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;
}

p4 {
        font-size: 3.5em;
        color: white;
}

p1 {
        font-size: 3em;
        color: white;
}

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;*/
}

.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: 30px auto;
}



.Categorii videocontent {
    
    /*border-radius: 8px;*/
    border: inset 0px white ;
    /*top: 10px;
    right:10px;*/
    background-color: black;
    display: inline-block;
    width: 300px;
    height: 260px;
    margin: 10px;
    left: 10px;
    position: relative;
}

.Categorii figure videocontent iframe {
    position: relative;
    /*border: inset 4px white;
    border-radius: 8px;*/
    top: 30px;
    bottom: 0px;
    right:0px;
   /* background-color: yello;*/
}

.Categorii figure img {
        position: absolute;
        margin: 10px 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 {
        border: inset 4px lightgrey;
        box-shadow: 0 0 4px 4px hsla(10,5%,17%,.85);
}

.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;
}