html{
    background-color:#DEDFD9;
    color:#080808;
}
input:focus, textarea:focus, select:focus {
    outline: none;
}

input {
    outline: none;
}

summary{
    width:100%;
    list-style-image: url(icon.svg);
    right: 0;
    outline: none;
}
summary:hover{
    background-color:#cccccc;
    outline: none;
}
summary:active{
    outline:none;
    animation: appears 0.5s linear;
}

details{
    width:100%;
    right: 0;
}

img{
    width:100%;
}

details summary::-webkit-details-marker {
    color: black;
    content: “\25B7”; 
}

/* CLASS/ID */
.bigtitle{
    font-size: 1.6rem;
    line-height: 1.4rem;
    font-family:'helvetica', serif;
    font-weight:bold;
    text-transform: uppercase;
    padding: 5px 0 5px 0;
    animation: appears 0.5s linear;
    border-bottom: 1px solid black;
    width: 100%;
    right:0;
}

.des{
    font-family: 'Libre Baskerville';
    font-size: 1.6rem;
    line-height: 2rem;
    padding:1rem;
    animation: appears 0.5s linear;
}
.content{
    display: block;
    margin-left: 8em;
    right: 0px;
}

.section{
    text-transform: uppercase;
    display:inline-block;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
    font-size: 1.6rem;
    line-height: 1.8rem;
    animation: appears 0.5s linear;
    padding: 5px 0 5px 0;
    border-bottom: 1px solid black;
}

.insection{
    animation: appears 0.5s linear;
    right:0;
}

#grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    padding:0;
}

.grid{
    display:grid;
    grid-template-columns: 240px 1fr;
}

.container{
    display:inline-block;
    padding: 1rem;
}

.title{
    top:0;
    font-size: 1.6rem;
    line-height: 1.8rem;
    font-style: italic;
    font-family:'helvetica', serif;
    font-weight:bold;
    text-transform: uppercase;
    margin-bottom:0;
}
.subtitle{
    top:0;
    font-size: 1.4rem;
    line-height: 2rem;
    font-family: 'Libre Baskerville';
    font-weight:normal;
    margin-bottom:0;
}
.text{
    font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
    font-size: 1.6rem;
    line-height: 2rem;
}

/* ANIMATION */

@keyframes appears{
    0%{
        opacity:0;
        transform:translateY(10px);
    }
    100%{
        opacity:1;
        transform:translateY(0px);
    }
}

/* BG COLOR */

#class{
    background-color:#BA5555;
}
#bookone{
    background-color:#CEB652;
   
}
#booktwo{
    background-color:#71A545;
}
#designer{
    background-color: #5E8ABE;
} 

#place{
    background-color:#111111;
    color:white;
}

/* RESPONSIVE */

@media only screen and (max-width: 720px) {
    .content{
        margin-left:0;
        width: 100%;
        right:0;
    }
    .des{
        margin-left: 0;
    }
    .section{
        width: 100%;
        margin-left: 0;
    }
    .insection{
        width: 100%;
        margin-left: 0;
    }
    .grid{
        display:inline-block;
    }
    #grid{
        display:inline-block;
    }
    .container{
        display:block;
        margin:auto;
        padding:2rem;
    }
    .img{
        width:100%;
    }

}