Explain "document.styleSheets[0].cssRules[0].style;"

Can anyone explain the block of code:

document.styleSheets[0].cssRules[0].style;

It will be good, if you use the below code as an example to explain:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:'Times New Roman', Times, serif;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body{
    background-color: rgb(216, 54, 54);
}
.wrapper {
    width: 400px;
    position: absolute;
    transform: translate(50%,50%);
    bottom: 50%;
    right: 50%;
    /* animation: fadeIn 2s ease-in; */
}

i just want to understand the code, I found it on net.

>Solution :

• document is your document object from which you can reach your stylesheets
• document.styleSheets is a read-only property that returns a StyleSheetList. See https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets
• document.styleSheets[0] extracts the first stylesheet from the stylesheetlist
• document.styleSheets[0].cssRules is a CSSRuleList read-only property, see https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/cssRules
• document.styleSheets[0].cssRules[0] is the first CSSRule object in the CSSRuleList
• document.styleSheets[0].cssRules[0].style is the style of the given CSSRule object

You can explore this as per the snippet below:

console.log(document.styleSheets[0].cssRules[0].style);

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:'Times New Roman', Times, serif;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body{
    background-color: rgb(216, 54, 54);
}
.wrapper {
    width: 400px;
    position: absolute;
    transform: translate(50%,50%);
    bottom: 50%;
    right: 50%;
    /* animation: fadeIn 2s ease-in; */
}