/* !---- main ----! */
body{
    font-family: Arial;
    padding: 0;
    background: url('/img/gif/back/back1.gif');
    font-size: 16px;
    display: block;
}
h1,
h2,
h3,
p,
li{
    margin: 0;
    padding: 0;
}
h1{
    font-size: 1.75em;
}
h2{
    font-size: 1.25em;
}
p, th, td{
    font-size: .78125em;
}
figcaption{
    font-size: 0.85em;
}
ul, ol{
    margin: 0;
    overflow: hidden;
}
a{
    text-decoration: none;
    color: var(--blue);
}
a:hover{
    text-decoration: underline;
    color: var(--violet);
}
hr{
    border: 0.5px solid black;
    margin: 0;
    display: block;
}
/* !---- classes ----! */
/* wrapper */
.wrapper{
    width: 950px;
    height: 750px;   
    border-radius: 5px;
    background: radial-gradient(#ffffff, #91f0f0);
    border: 2.5px solid #171717;
    font-family: Arial;
    overflow: hidden;
    padding: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.content{
    border: 5px ridge #d3d3d3;
    float: right;
    width: 735px;
    height: 740px;
    color: black;
}
.navbar{
    margin-top: 5px;
    width: 190px;
    border: 5px ridge #d3d3d3;
    background: white;
    text-transform: capitalize;
    height: 536px;
}
.logo{
    border: 5px ridge #d3d3d3;
    width: 190px;
}
.navitems{
    padding: 5px;
    font-size: 12.5px;
}
.navbar>.navheader:first-child{
    font-size: 15px;
    font-weight: bold;
    padding: 5px;
    color: white;
    text-align: left;
    border-top: 0;
    border-bottom: 2.5px solid black;
}
.navbar>.navheader{
    font-size: 15px;
    font-weight: bold;
    padding: 5px;
    color: white;
    text-align: left;
    border-top: 2.5px solid black;
    border-bottom: 2.5px solid black;
}
.heading{
    border-bottom: 1px solid black;
    margin-bottom: 2.5px;
}
.verse{
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 4.5px;
    border: 2.5px dashed black;
    background: var(--gray);
    font-size: .78125em;
    overflow: hidden;
}