html {
    background-color:#b2b2a2;
    color:white;

}

header {
    background-color: #b2b2a2;
    height: 80px;
    display: inherit;
    justify-content: space-between;
    align-items:center;
    padding: 0 20px;
}

.brand h1 {
    margin:0px;
    padding-top: 30px;
    font-size:24px;
}

.dropdown {
    position: static;
    float:right;
}

.dropdown-icon {
    margin: -37px 15px;
    height: 80px;
    cursor: pointer;
    display:flex-end;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 5px;
    top: 110px;
    background-color: #b2b2a2;
    min-width: 50px;
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    z-index: 1;
    padding: 30px;
    text-align: right;
}

.dropdown-content a {
    display: block;
    color: rgb(215, 122, 122);
    font-size:14px;
    font-weight:500;
    padding: 55px 0;
    text-align:center;
    text-decoration:none;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.poetrylist {
    padding: 360px 150px 60px 20px;
    text-align:left;
}

.poetrylist ul, a, li {
    display:contents;
    list-style-type:none;
    text-decoration:none;
    font-size:42px;
}

.poetrylist a {
    text-decoration:none;
    color:#6d7973;
    font-size:30px;
}

.poetrylist li{
    word-wrap:break-word;
    padding-inline: 20px;
}


@media (max-width:900px) {
    .dropdown:hover .dropdown-content {
        display:table-column;
        font-size:14px;
        padding: 30px;
    }
    .poetrylist li {
        display:block;
        flex-wrap:nowrap;
        padding: 2px 0px 0px 2px;
        margin-top: 30;
        text-align:left;
        font-size: 12px;
        font-weight:600;
        kerning: 1.5px;
    }
}

@media (max-width:500px) {
    .dropdown-content a {
        display: block;
        color: rgb(215, 122, 122);
        font-size:16px;
        font-weight:700;
        padding: 40px 22px 0px 0px;
        text-align:center;
        text-decoration:none;
    }
    .dropdown:hover .dropdown-content {
        display:table-column;
        font-size:12px;
        font-weight:400;
        padding: 0px;
    }
    .poetrylist {
        margin-bottom: ;
        padding-top:185px;
    }
    .poetrylist li {
        display:block;
        flex-wrap:nowrap;
        padding: 0px 0px 10px 0px;
        text-align:left;
        font-size: 18px;
        font-weight:600;
        letter-spacing: 0.6px;
    }
.poetrylist a {
    display:flex;
    flex-wrap: wrap;
    font-size:22px;
    padding:0 0 0 0;
}
sup {
    font-size:12px;
}
}

transform:skew(30deg,30deg);

transform:skewX(30deg);

transform:skewY(30deg);

scale(2,2)

transform:


transform: matrix(0.866,0.7,-0.8,0.866,0,0);