@font-face {
    font-family: sofia;
    src: url(/styles/fonts/SofiaSansCondensed-Regular.ttf);
}
@font-face {
	font-family: robotoCondensed;
	src: url("fonts/RobotoCondensed-Regular.ttf");
}
@font-face {
	font-family: roboto;
	src: url("fonts/Roboto-Regular.ttf");
}
html, body {
    height: 100%;
    margin: 0;
}
body {
    background-color: darkolivegreen;    
    display: flex;
    flex-direction: column;
    align-items: center;
}
main {
    width: 100vw;
    background-color: darkkhaki;
    display: flex;
    flex-direction: row;
}
.menu-class {
    background-color: khaki;
    color: darkolivegreen;
    border-radius: 4px;
    width: 28vw;
    padding: 2vw;
    font-family: roboto;
    height: 92vh;
    overflow-y: scroll;
}
.title-txt-class {
    text-align: center;
    font-family: robotoCondensed;
    color: darkslategray;
}
.txt-pic-class {
    width: 70vw;
    height: 92vh;    
    overflow-y: scroll;
}
.txt-class, .comm-class {
    color: darkslategray;
    padding: 2vw;
    text-align: justify;
    text-indent: 4vw;
    font-family: robotoCondensed;
}
h1 {
    font-family: sofia;  
}
.item-content:hover {
    cursor: pointer;
    background-color: yellow;
    color: green;
}
.pic-class {
    text-align: center;
}
img {
    border-radius: 4px;
    width: 60vw;
}
.menu-class::-webkit-scrollbar {
    width: 0;
}
.txt-pic-class::-webkit-scrollbar {
    width: 0;
}
header, footer {
    width: 100vw;
    height: 4vh;
    color: dimgray;
    background-color: goldenrod;
    text-align: center;
    font-family: sofia;
}
@media (min-width: 560px) {
    main {
        width: 800px;
    }
    .menu-class {
        width: 250px;
        margin: 10px;
        padding: 10px;
    }
    .txt-class {
        text-indent: 2vw;
    }
    header, footer {
    width: 800px;
    }
    img {
        width: 400px;
    }

}