.body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
.topnav {
    overflow: hidden;
    background-color: #333;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    margin-left: 100px;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: #04AA6D;
    color: white;
  }


.Home
{
    padding: 3px 35px;
    text-decoration: none;
    border-style: solid;
}

.Home:hover
{
opacity: 0.5;
background-color: #00ffff;

}


.About
{ 
 padding: 3px 34px;
 text-decoration: none;
 border-style: solid;

 }




.About:hover
{

background-color: blue;
}


.Achievements
{
   padding: 3px 27px;
   text-decoration: none;
   border-style: solid;


}

.Achievements:hover
{
opacity: 0.5;
background-color: blueviolet;
}

.Projects
{
   padding: 3px 28px;
   text-decoration: none;
   border-style: solid;

}

.Projects:hover
{
opacity: 1px;
background-color: chartreuse;
}


.Dashboard
{
  padding: 3px 19px;
  text-decoration: none;
  border-style: solid;
}


.Dashboard:hover
{
opacity: 0.5;
background-color: coral;
}

.Chatroom
{
    padding: 3px 21px;
    text-decoration: none;
    border-style: solid;
}


.Chatroom:hover
{
opacity: 0.5;
background-color: darkorange;
}

.Contact
{
    padding: 3px 28px;
    text-decoration: none;
     border-style: solid;
}

.Contact:hover
{
opacity: 0.5;
background-color: forestgreen;
}

.Pagedetails
{

 position: absolute;
 top: .2%;
 margin-left: 100%;
 transform: translateX(-50%);
 transform: translateY(1%);
 background-image:url(Background.jpg);
 background-size: cover;
 background-size: no-repeat;
 margin-top: -20px;
 width: 1200px;
 height: 1500px;
 border-style: solid;
border-color: black;
border-width: 5px;

}

.Pagedetails1
{

 position: absolute;
 top: .2%;
 margin-left: 100%;
 transform: translateX(-50%);
 transform: translateY(1%);
 background-image:url(japanese.png);
 background-size: cover;
 background-size: no-repeat;
 margin-top: -20px;
 width: 1200px;
 height: 1500px;
 border-style: solid;
border-color: black;
border-width: 5px;

}

.Pagedetails2
{

 position: absolute;
 top: .2%;
 margin-left: 100%;
 transform: translateX(-50%);
 transform: translateY(1%);
 background-image:url(PhotoA.gif);
 background-size: cover;
 background-size: no-repeat;
 margin-top: -20px;
 width: 1200px;
 height: 1500px;
 border-style: solid;
border-color: black;
border-width: 5px;

}

.Pagedetails3
{

 position: absolute;
 top: .2%;
 margin-left: 100%;
 transform: translateX(-50%);
 transform: translateY(1%);
 background-image:url(SCHOOL_ANIME.jpg);
 background-size: cover;
 background-size: no-repeat;
 margin-top: -20px;
 width: 1200px;
 height: 1500px;
 border-style: solid;
border-color: black;
border-width: 5px;

}

.Pagedetails4
{

 position: absolute;
 top: .2%;
 margin-left: 100%;
 transform: translateX(-50%);
 transform: translateY(1%);
 background-image:url(GARDEN.jpg);
 background-size: cover;
 background-size: no-repeat;
 margin-top: -20px;
 width: 1200px;
 height: 1500px;
 border-style: solid;
border-color: black;
border-width: 5px;

}

.Pagedetails5
{

 position: absolute;
 top: .2%;
 margin-left: 100%;
 transform: translateX(-50%);
 transform: translateY(1%);
 background-image:url(AnimeP.gif);
 background-size: cover;
 background-size: no-repeat;
 margin-top: -20px;
 width: 1200px;
 height: 1500px;
 border-style: solid;
border-color: black;
border-width: 5px;

}

.Pagedetails6
{

 position: absolute;
 top: .2%;
 margin-left: 100%;
 transform: translateX(-50%);
 transform: translateY(1%);
 background-image:url(ANIME.jpg);
 background-size: cover;
 background-size: no-repeat;
 margin-top: -20px;
 width: 1200px;
 height: 1500px;
 border-style: solid;
border-color: black;
border-width: 5px;

}

.Homepage
{
 text-align: center;
}


.Picture1
{
text-align: center;
margin-left: -40px;
border-color: black ;
border-style: solid;
width: 100%;
}
Picture
{
 display:inline;
 grid-template-rows: repeat(4,1fr) ;
 margin: 5px;
 padding: 5px;

}

.Photo1
{
width: 250px;
height: 200px;
margin: 5px;
padding: 10px;
margin-left: -10%;
}

.Photo2
{
    width: 250px;
    height: 200px;
    margin: 5px;
    padding: 10px;
}

.Photo3
{
    width: 250px;
    height: 200px;
    margin: 5px;
padding: 10px;
}
.Photo4
{
    width: 250px;
    height: 200px;
    margin: 5px;
    padding: 10px;
}

.VIdeo1
{
text-align: center;
margin-left: -40px;
border-color: black ;
border-style: solid;
width: 100%;
}
.VIdeo
{
 display:inline;
 grid-template-rows: repeat(3,1fr) ;
 margin: 1px;
 padding: 0.1px;
}

.video1
{
width: 250px;
height: 200px;
}

.video2
{
    width: 250px;
    height: 200px;
}

.video3
{
    width: 250px;
    height: 200px;
}


.Music1
{
text-align: center;
margin-left: -40px;
border-color: black ;
border-style: solid;
width: 100%;
}
.Music
{
 display:inline;
 grid-template-rows: repeat(3,1fr) ;
 margin: 1px;
 padding: 0.1px;
}

.music1
{
width: 250px;
height: 200px;
}

.music2
{
    width: 250px;
    height: 200px;
}

.music3
{
    width: 250px;
    height: 200px;
}