#Doc {
    margin-top: 5%;
    margin-right: 4%;
    margin-left: 4%;
    font-size: 1.5rem;
}


@media screen and (prefers-color-scheme: light) {

}

#Doc a {
    color: white;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(194,164,170,1) 12%, rgba(103,10,29,1) 100%);
}

#Doc a::before {
    content: "☔";
    color: black;
}

h1 {
    font-family: 'Trebuchet MS', sans-serif;
}

h2 {
    font-family: Garamond, serif;
}

h2::before{
    content:"✪ ";
}


p {
    text-align: justify;

}

ol {
    padding: 5%;
    margin: 2%;
    border: grey 0.05rem solid;
    text-align: justify;
}

#reflectText {
    transform: rotateX(180deg) translateY(1em);
    mask-image: linear-gradient(transparent 50%, white 90%);
    margin-bottom: -8.5%;
}

#HeaderUnderLine {
    position: relative;
    margin-left: -5%;
    margin-bottom: -2%;
}

.LeftDiv {
    position: relative;
    display: flex;
    margin-top: -1%;
}

 /* Screenshot div */

.CenterDiv {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.FixSizeImage {
    width: 32vw;
    height: 18vw;
    object-fit: contain;
    border: 5px solid white;
    border-radius: 30px;
}

.FixSizeImage:hover {
    cursor: pointer;
}

.FixSizeVideo {
    width: 32vw;
    height: 18vw;
    object-fit: contain;
    border: 5px solid white;
    border-radius: 30px;
}

.FixSizeVideo:hover {
    cursor: pointer;
}



.CornerImage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39.6vw;
    height: 24vw;
    background: url("../../img/CornerImage.svg") no-repeat center;
    background-size: contain;
}


.Highlight {
    display: inline-block;
    color: blanchedalmond;
    background: radial-gradient(ellipse at left,#171717, #383838);
    padding: 0.5%;
}

.Lowlight {
    display: inline-block;
    /*background: rgba(25, 25, 28, 0.05);*/
    color: blanchedalmond;
    background: radial-gradient(ellipse at left,#171717, #383838);
    padding: 0.2%;
    padding-left:0.5%;
    padding-right:0.5%;
    border: #dbd3c4 0.2rem solid;
    border-radius: 4px;
}

.BoxLabel {
    display: inline-flex;
    width: 10%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: black;
    color: white;
    font-size: 0.5em;
    font-weight: bold;
    padding: 0.5%;
    margin: 0.5%;
    border: 1px solid black;
    box-shadow: 2px 2px hsl(0, 0%, 0%, 0.64);
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

.BoxLabel[data-colour="def"] {
    /*background: green;*/
    background: linear-gradient(to right, hsl(130, 94%, 25%), hsl(134, 91%, 34%));
}

.BoxLabel[data-colour="note"] {
    /*background: hsl(53, 62%, 50%);*/
    background: linear-gradient(to right, hsl(53, 62%, 50%), hsl(55, 83%, 63%));
}

.BoxLabel[data-colour="warning"] {
    background: hsl(0, 57%, 57%);
}

.BoxLabel[data-colour="howto"] {
    background: hsl(328, 97%, 33%);
}

.BoxLabel[data-colour="error"] {
    background: darkred;
}

.ChangeLog {
    list-style-type: '🖇 ';
    li:nth-child(odd) {
        background: linear-gradient(90deg, rgb(231, 231, 231) 0%, rgba(250,250,250,0) 75%);
        padding: 0.2%;
        border: 1px solid white;
    }
    li:nth-child(even) {
        padding: 0.2%;
    }
    li:hover{
        color: white;
        background: linear-gradient(180deg, rgb(65, 2, 18) 0%, rgb(120, 4, 34) var(--angle));
        /*background: radial-gradient(circle, rgb(210, 165, 165) 0%, rgb(120, 4, 34) var(--angle));*/
        animation: 2s rotate alternate infinite ease-out;
    }
}

@keyframes rotate {
    to {
        --angle: 70%;
    }
}
@property --angle {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: false;
}