/* .cray.tab.active {
    background-image:url("/assets/images/tutorials/crayred.png");
    margin-top:10;
} */




.cray.tab {
    height:23px;
    background-color: #909090;
    width:max-content;
    padding: 0 10px;
    background-image: none;
    border: 2px solid #3E3E3E;
    position:relative;
    margin-right:56px;
}
.cray.tab::after {
    content: "";
    position: absolute;
    top:-2px;
    width:56px;
    height:27px;
    background-image:url("/assets/images/tutorials/cray.png");
    background-repeat:no-repeat;
    right: -56px;
    
}
:not(.cray).tab {
    margin-top:24px;
}

h1, h2, h3, h4, h5, h6 {
    margin:0;
}

.codeblock {
    background-color: #a3a3a3;
    border-radius: 10px;
    overflow: auto;
    padding:5px;
}


a.btn {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-decoration: none;
    color: initial;
    font-family: Comic Sans MS;
    font-size: 20px;
    background-color: #a3a3a3;
    border-radius: 10px;
    padding: 5px;
    border: 1px solid #000000;
}
.tooltip {
    z-index: 1;
    position: absolute;
    background: #b2c2c4;
    border-radius:4px;
    padding: 6px 12px;
    font-family: arial;
    font-size: 12px;
    min-width:100px;
    max-width:300px;
    border: solid 2px white;
    opacity: 90%;
}

.tooltip::before {
    content: "";
    position: absolute;
    rotate: 45deg;
    top: calc(100% - 2px);
    left: 5px;
    width:5px;
    height:5px;
    background-color:  #b2c2c4;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    
}

/* ouuter */
.hvr.hovered {
    background-color: #b4bad1;
    border-radius:4px;
}

[matched].hovered.opener+span {
    background-color: #a6b0d8;
    border-radius:4px;
}

:not(pre) > code {
    background-color: #a3a3a3;
    border-radius: 10px;
    padding: 0 5px;
    border: 1px solid #000000;
}