*{
    box-sizing: border-box;
}
/*SHOTHANDBackground-position and for the  No repeats instead of USING Background-image: url()*/
html,body {cursor: pointer; padding: 0;margin: 0; min-height: 100vh; width: 100%; background: url(./PIC/JPP.jpg) no-repeat center center fixed; background-size: cover;
}

/**/
.NavLeft{position: fixed; top: 0;left: 0;right: 0;  width: 100%; height: 80px;  background-color:#1F51FF; text-align:right; 
border:5px solid white; }

.Login{position: absolute; width: 180px; height:40px; border-radius: 99999px; left: 10%;top: 50%; transform: translate(-50%, -50%); border:5px solid  rgb(6, 104, 224) ; box-shadow: inset; background: peachpuff;    cursor: pointer;
}

.NavTittle{position: absolute; left: 70%; top: -15px; width: 50%; height: 5px; transform: translate(-50%, -50%); margin:0px; font-size: small; padding:0%;}

.Log{display: none; background-image: url(./PIC/JP.png); position: fixed; top: 0; left: 0;  width: 100%; height: 100%;
 background-size: cover; background-position: center;background-repeat: no-repeat; z-index: 1000;
}

.LogBox{ position: absolute; width: 30%; height: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background:  url(./PIC/japan1.jpg) center center no-repeat fixed; background-size: cover;  padding: 0%; border-radius: 7%; border: 10px solid black; text-align: center; align-items: center; color: aliceblue; opacity: 0.90;}


.Pic{position: absolute;  left: 50%; top: 35%; transform: translate(-50%, -50%); width: 180px; height: 90px; border-radius: 50%; align-items: center; padding: 5px; }

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

.Close{float: right; width: 10%; cursor: pointer; font-size: x-large; color: red; border-radius: 50%;}

 /* portrait-only styles  */ 
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) {.Login{position: absolute; width: 180px; height:40px; border-radius: 99999px; left: 25%;top: 50%; transform: translate(-50%, -50%); border:5px solid  rgb(6, 104, 224) ; box-shadow: inset; background: peachpuff;    cursor: pointer;} .LogBox{width: 70%; height:60%; } .NavTittle{position: absolute; left: 70%; top: 10px; width: 50%; height: 1px; transform: translate(-50%, -50%); margin:px; font-size: small; 
}

}
  /* Landscape-only styles */ 
@media (min-width: 320px) and (max-width: 768px) and (orientation: landscape) { .Login{position: absolute; width: 180px; height:40px; border-radius: 99999px; left: 15%;top: 50%; transform: translate(-50%, -50%); border:5px solid  rgb(6, 104, 224) ; box-shadow: inset; background: peachpuff;    cursor: pointer;}.LogBox{width: 70%; height:95%; } .NavTittle{position: absolute; left: 70%; top: 10px; width: 50%; height:1px; transform: translate(-50%, -50%); margin:px; font-size: small; 
}
 
}