.notebook-container
{
    position: relative;
    width:360px;
    height: 640px;
}

.notebook
{
    position: absolute;
    left: 0;
    top: 0;
    width:360px;
    height: 640px;
    perspective: 640px;
    
}

.notebook-cover
{
    position: absolute;
    
    left:0;
    width:102%;
    height: 100%;
    
    transition: transform 0.8s;
    transform-style: preserve-3d;
    transform-origin: center left;
    background-color: blue;

}

.notebook-cover-backside
{
    width:100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    opacity: 0.95;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    transition: transform 0.75s;
}

.notebook-cover-html
{
    width:90%;
    height: 100%;
    
    margin-left: 32px;

}

.notebook-page
{
    position: absolute;
    
    left:0;
    width:100%;
    height: 100%;
    
    transition: transform 0.8s;
    transform-style: preserve-3d;
    transform-origin: center left;
    background-image: repeating-linear-gradient(0deg, white, white 20px, #0000ffd9 20px, #0000ffd9 21px, white 21px);
    opacity: 0.95;
    
    mix-blend-mode: normal;
}



.notebook-page-backside
{
    width:100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    background-image: repeating-linear-gradient(0deg, white, white 20px, #0000ffd9 20px, #0000ffd9 21px, white 21px);
    opacity: 0.8;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

.notebook-page-html
{
    display: flex;
    flex-direction: column;
    margin-left: 32px;
}

.notebook-page-main-html
{
    min-height: 580px;
    max-height: 640px;
}

.notebook-page-footer-html
{
    display: grid;
    grid-template-columns: 80px 100px 80px;
    height: 60px;
    align-items: center;
    justify-content: space-between;
}
.notebook-page-footer-html-left
{
    text-align: left;
}
.notebook-page-footer-html-middle
{
    text-align: center;
}
.notebook-page-footer-html-right
{
    text-align: right;
}
.notebook-hinge
{
    position: absolute;
    left: -27px;
}

.notebook-hinge-right-side
{
    position: absolute;
    left:22px;
    width: 22px;
    background-color: black;
    height: 15px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.notebook-hinge-left-side
{
    position: absolute;
    left:0;
    width: 22px;
    height: 15px;
    background-color: black;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}


.notebook-hole
{
    width:15px;
    height: 15px;
    border-radius: 50%;
    background-color: gray;
    position: absolute;
    z-index: 100px;
}

@media (max-width: 380px){
	.notebook-container
	{
		width: 306px;
		height:544px;
	}

    .notebook-page-main-html
{
    min-height: 480px;
    max-height: 640px;
}

	.notebook
	{
		width: 306px;
		height:544px;
	}
}