h1 {
    color: red;
}

.special {
    color: orange;
    font-weight: bold;
}

li em {
    color: rebeccapurple;
}

h1+p {
    font-size: 200%;
}

a:link {
    color: pink;
}

a:visited {
    color: green;
}

a:hover {
    text-decoration: none;
}

h1+p .special {
    color: yellow;
    background-color: black;
    padding: 5px;
}

.outer {
    border: 5px solid black;
}

.box1 {
    padding: 10px;
    width: calc(85% - 100px);
    background-color: rebeccapurple;
    color: white;
}

.box2 {
    margin: 30px;
    width: 100px;
    height: 100px;
    background-color: rebeccapurple;
    transform: rotate(0.8turn);
}

#firefox-logo {
    transform: skew(-30deg, 20deg);
}

#back {
    /* width: 300px; */
    height: 200px;
    background-image: url("/images/css-mdn/css-styling-basics/lizard.webp");
}

#box3 {
    margin: 10px;
    width: 100px;
    height: 100px;
    background-color: rgb(255, 100, 70);
}

#box4 {
    margin: 10px;
    width: 100px;
    height: 100px;
    background-color: hsl(45deg 70% 50%);
}

#orient {
    width: 100px;
    height: 100px;
    margin: 10px;
}


@media (orientation: landscape) {
    #orient {
        background-color: green;
    }
}

@media (orientation: portrait) {
    #orient {
        background-color: orange;
    }
}

#short1 {
    margin: 10px;
    width: 200px;
    height: 100px;
    border: 5px dashed brown;
}

#short2 {
    margin: 10px;
    width: 200px;
    height: 100px;
    border: 5px solid;   
    border-color: green red orange blue;
}