@media screen and (max-width:350px) {
    h1 {font-size: 16px;}
    h2 {font-size: 16px;}
}
@media screen and (min-width:350px) and (max-width:470px) {
    h1 {font-size: 18px;}
    h2 {font-size: 17px;}
}
@media screen and (min-width:470px) {
    h1 {font-size: 22px;}
    h2 {font-size: 20px;}
}

.content {margin: 0 20px 20px 20px; text-align: justify;}
h2 {margin: 10px 0}
p, li {margin-bottom: 5px;}
details {margin-bottom: 7px;}
img {height: 15px;}
ul {padding: 0 0 0 32px;}
p {margin-left: 20px;}

/* For animating the arrow on 
   click of details element */
details[open]>summary:before {
    transform: rotate(90deg);
}

/* Removing the default arrow */
summary {
    display: block;
    position: relative;
    left: 20px;
}

/* designing the arrow */
summary:before {
    content: '';
    border: 7px solid;
    border-color: transparent transparent transparent black;
    position: absolute;
    left: -20px;
    top: 2px;
    transition: all .4s;
}