body {
   background-color: black;
    font-family: Verdana;
    font-size: 2.6dvh;
    line-height: 2.1;
    color: white;
    cursor: default;
    overflow-y: hidden;
    overflow-x: hidden;
    height:100%;
}

:root {
 --blackish:rgba(60,60,60,1.0);
 --greenish:#263e0f;
 --swhite:rgba(200,200,200,0.3);
 --borderR:5dvh;
}
html {
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

*{
  box-sizing: border-box;  
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.centerit{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#head{
    width: 25%;
    height: 25vh;
}
/*------------------
MAIN CONTAINER
------------------*/
.container{
    position: relative;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    background:black;
    width: 100%;
    height:100%;
}

.innerContainer{
    position: absolute;
    top: 1%;
    left: 50%;
    transform: translate(-50%, 0%);
    background:none;
    width: 98%;
    height:96%;
}

.heading{
    position: absolute;
    top: 1%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 98%;
    height:16%;
    background-image: url('../images/header.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    /*border:1px solid white;*/
}

.myName{
    position: absolute;
    top: 0%;
    left: 40%;
    transform: translate(-40%, 0%);
    background:none;
    width: 80%;
    height:80%;
    /*opacity:0.6;*/
    /*border:1px solid black;*/
    background-image: url('../images/me.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    /*background-color:white;*/
    z-index: 1200;
}

.thecircle{
    position: absolute;
    top: 2%;
    right: 1%;
    /*box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);*/
    border-radius: 50%;
    width:20dvh;
    height:20dvh;
    z-index: 1000;
    /*background-image: url('../images/hysteria.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;*/
}

.welcome{
    position: absolute;
    top: 1%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 98%;
    height:100%;
    color:white;
    font-size: 1.1rem;
    line-height: 1.4;
    text-align: center;
    overflow-y:scroll;
    overflow-x:hidden
    /*border:1px solid red;*/
}

.indexW{
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 98%;
    height:80%;
    background:none

    /*border:1px solid red;*/
}

.gridcontainer{
    position: absolute;
    top:0%;
    left:50%;
    transform: translate(-50%, 0%);

    display: grid;
    grid-template-columns: 1fr 1fr;
    color: #444;
    width:80%;
    height:10%;
    font-size: 1.2rem;
    line-height: 2.9;
    z-index: 2500;
    
}


.leftcolumn {
   
    color:black;
    text-align: center;
    background-color: antiquewhite;
    color:dodgerblue;
    /*border-top-left-radius: 2dvh;*/
    height:100%;
    width:100%;
    
    z-index: 2500;

}

.rightcolumn {
    
    color:black;
    text-align: center;
    background-color: antiquewhite;
    color:dodgerblue;
    /*border-top-right-radius: 2dvh;*/
    height:100%;
    width:100%;
    
    z-index: 2500;
    
}

.innerDex{
    position: absolute;
    top: 11%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 80%;
    height:88%;
    background:antiquewhite;
    border:2px solid black;
    overflow-y:scroll;
    overflow-x:hidden
    z-index: 2200;
}
.actualIndex{
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 88%;
    height:90%;
    background:darkblue;
    border-radius: 4dvh;
    z-index: 2800;

    /*border:1px solid white;*/
}

.mainindexItem{
    width:100%;
    height:8%;
    background:none;
    font-size: 3.2dvh;
    line-height: 1.2;
    border-bottom:1px solid black;
    border-right:1px solid black;
    color:black;
    padding-left:1dvh;
    text-align:left;
    font-family: Helvetica;
    cursor: pointer;
    z-index: 700;
}

.readerW{
    position: absolute;
    top: 1%;
    left: 50%;
    transform: translate(-50%, 0%);
    background:black;
    color:antiquewhite;
    font-size:1.3rem;
    width: 98%;
    height:98%;
    padding-left: 6dvh;
    padding-right: 6dvh;
    /*overflow-y:scroll;*/
    overflow-x:hidden;
    display:none;
}

.innerReader{
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translate(-50%, 0%);
    background:black;
    color:antiquewhite;
    font-size:20px;
    line-height: 1.7;
    width: 90%;
    height:800px;
    padding-top: 20px;
    /*padding-right: 6dvh;*/
    overflow-y:scroll;
    overflow-x:hidden;
    /*border:1px solid white;*/
}

.innerReader::-webkit-scrollbar {
  display: none;
}

.leftTurn{
    position: absolute;
    top: 0%;
    left: 0%;
    background:red;
    width:10%;
    height:98%;
    z-index: 9000;
}

.rightTurn{
    position: absolute;
    top: 0%;
    right: 0%;
    background:red;
    width:10%;
    height:98%;
    z-index: 9000;
}

.topOPage{
    position: fixed;
    top:0%;
    left:50%;
    transform: translate(-50%, 0%);
    width:100%;
    height:4%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
    background-color: black;
    border-bottom:1px solid white;
}

.hambooger{
     
    background:none;
    color:antiquewhite;
    font-size:1.3rem;
    width: 100%;
    height:100%;
    z-index: 9000;
   background-image: url("../images/ham.png"); 
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    /*border:2px solid white;*/
}

.homer{
    background:none;
    color:antiquewhite;
    font-size:1.3rem;
    width: 100%;
    height:100%;
    z-index: 9000;
   background-image: url("../images/home2.png"); 
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    /*border:2px solid white;*/
}

.imgclass{
    position: absolute;
    top:0%;
    left:50%;
    transform: translate(-50%, 0%);
    
}

@media only screen and (max-width: 460px)/*mobile*/
{
    .readerW{
        font-size:1.6rem;
        line-height: 1.3;
    }
    .innerReader{
        width: 80dvh;
        height:80dvh;
    }
    .mainindexItem{
        width:100%;
        height:12%;
        background:none;
        font-size: 4.2dvh;
        line-height: 1.2;

    }  
    .topOPage{
        height:10%;
    } 
}

@media only screen and (max-width: 1366px)/*bigger*/
{
    
}