@font-face {
    font-family: "myFont";
    src: url(Montserrat-Regular.ttf) format("truetype");
}
html{
    font-family:"myFont", sans-serif;
}
/*Applied changes to the body of the html document.*/
body{
    /*Apply Green Color to background of document.*/
    color: white;
}
@counter-style fallback-example{
    system:fixed;
    symbols: "\24B6" "\24B7" "\24B8";
    fallback: upper-alpha;
}
/*Universal Selector*/
*{
    background-color: purple;
}
/*Changes made to the header Visualy.*/
h1{
    color: rgb(0,0,0); 
    background-color: #8ACE00;
    border: 5px red;
    padding: 0.1cm;
    text-align: center;
    text-decoration: underline;
}
/*Element List*/
p, summary{
    font-family: "myFont", sans-serif; 
    border: 2px solid black;
    border-style: dashed;
}

ul:hover{
    border: 1px solid red;
    border-radius: 100px;
    color: Black; 
}

/*element selector*/
span{
    background-color: rgb(250 0 0 /50%);
}

video{
    max-width: 500px;
    max-height: 500px;
    margin: 0px;
    padding-bottom: 2pc;
    padding-top: 1mm;
    padding-left: 1in;
}
audio{
    position:static;
}

ol{
    position:relative;
    top: -20px;
    left:20px;
    display: flex;
    flex-direction: column-reverse;
}

button:hover{
    color: #8ACE00;
}
/*Attribute Selector*/
li[class="a"]{
    color: Red;
}
li[class="b"]{
    color: Purple;
}

/*Combinators*/
ol > li{
    background-color: #8ACE00;
}
body p strong{
    background-color: #8ACE00;
}
h1 ~ h2{
    background-color:Grey;

}
h3 + details{
    font-size: 125%;
}
div.borderbox{
    border-top-width: 20px; 
    border-top-style: groove;
    color:#8ACE00;
}
/*Id Selectors*/
#goal{
    color: black; 
}

/*Class Selectors*/
.box{
    width: 500px;
    height: 500px;
    padding: 1cm 1cm 0.5cm 2cm;
    border: 5px solid #8ACE00; 
    display: inline-block
}

.borderbox{
    border-top-width: 4px; 
    border-top-style: groove;
    border-top-color: black;
}
.disa{
    display: inline-block;
    margin: 20px;
}
.disb{
    display: block; 
    margin: 20px;
}
.container{
    display: inline;
}
.selected:active{
    color: purple;
    box-shadow: 2px 2px 5px red;
}

.GridDisplay{
    display: grid;
    grid-template-columns: 2fr 2fr; 
    grid-template-rows: 1fr 1fr 1fr;
    list-style: fallback-example; 
    /*Nested*/
    .first{
        color:Green;
    }
}
@media (50em >= width >= 30em) {
    button:hover{
        color:aquamarine;
    }
}

ol:has(.b){
    background-color: grey;
}