body 
{
    
    background-color: #3b9b2a;
    background-image: linear-gradient(315deg, #216a14df 0%, #388141 74%);
    font-family:'Times New Roman', Times, serif;  
}
.current-page{

  font-weight: 900;
  background-color: rgb(227, 184, 198);
}

img
{
width: 100% ;
 height: auto;
 max-width: 600px;

 



}



.caption {

line-height: 1.3rem;

letter-spacing: .02rem;
color: whitesmoke;
width: 95%;
text-align: left;
position:absolute;

 
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */




/* Safari and Chrome */
-webkit-transform: scale(1, 2);
/* Firefox */
-moz-transform: scale(1, 2);
/* IE 9+ */
-ms-transform: scale(1, 2);
/* Opera */
-o-transform: scale(1,2);
font-size: 1rem;
padding-top: -1rem;
transform-origin: top left;



}

.caption2 {


    font-size: 1rem;
    
    color: green;
    vertical-align: top;
    width: 95%;
    text-align: left;
    text-align: top;
    line-height: 2.61rem;
    position: relative;
    top: 0px;
    word-spacing: .07rem;
    visibility: hidden;
   
    

    
   
    


}



.caption_container{


max-width: 500px;
width: 98%;
position: relative;

}


.nunmber {
  color: whitesmoke;

  margin: 1rem;

  line-height: 1.3rem;

letter-spacing: .02rem;
}


.circular_image {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  
  -khtml-border-radius: 50%;


  overflow: hidden;
  background-color: blue;
  display:flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  transform: translateZ(0); 
 


}
 





.pagination-top-container{

position:fixed;
margin-top: 0rem;
width: 6rem;
height:70%; 
z-index: 2;
margin-left: -1rem;
color: whitesmoke;




}
.pagination-top {

  display: flex;
  justify-content: space-between;
  color: whitesmoke;
 
  line-height: -4rem;
  writing-mode: vertical-rl;
  transform: scale(5, 1.6);
  height: 6000%;
/* Safari and Chrome */
-webkit-transform: scale(1, 1.6);
/* Firefox */
-moz-transform: scale(1, 1.6);
/* IE 9+ */
-ms-transform: scale(1, 1.6);
/* Opera */
-o-transform: scale(1,1.6);
font-size: 1rem;
padding-top: -1rem;
transform-origin: top left;


}

.pagination-top span{

  color: whitesmoke;
  
  display: block;
  
  text-align: left;
  padding: 1rem 1rem;
  text-decoration: none;
  
  
  
 
  
}

.pagination span{
  color: whitesmoke;
  color:#d8d8d8;
  margin-top: 4rem;
  text-align: center;
  font-size: 1rem;
  font-style: oblique;
  
  
}






.more
{
 


height: 4rem;
  width: 85%;

margin-bottom: 5rem;
font-size: 2rem;
border-radius: 8rem; 
border-color:#FF00FF;
margin-left: 2rem;
margin-top:4rem;

color:whitesmoke;
filter: drop-shadow(30px 10px 4px #4444dd);
background-color: rgb(226, 145, 172);
font-style: oblique;
opacity: .8;
-webkit-appearance: none !important;


  
 
  
}

.more:hover {


  border-color: rgb(246, 191, 209);
  opacity: 1;
  
  
  }



.projects {
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style:none;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1rem;
    
}
    


    .projects img{
width: 100%;
    }

.main {
    
   position: absolute;
    margin-bottom: 10rem;
    margin-left: 0rem;
    overflow-x: hidden;
    flex-grow: 3;

    
}

.main h1{
    
    margin-bottom: 1.5rem;
    
}

}
.header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: -1rem;
  margin-left: -1rem;
  margin-bottom: 2rem;
}

.logo {
    color:whitesmoke;
    
    display:flex;
    justify-content: top;
 
  align-items: top left;

  cursor: pointer;
    font-size: 1.2rem;
    
    text-decoration: none;
    line-height: 1rem;
      

  margin-right: 0rem;
  margin-left: 0rem;
  margin-bottom: 6rem;

  
    
 /* overflow-wrap: break-word; */

     
  transform: scale(1, 7);
  /* Safari and Chrome */
  -webkit-transform: scale(1, 7);
  /* Firefox */
  -moz-transform: scale(1, 7);
  /* IE 9+ */
  -ms-transform: scale(1, 7);
  /* Opera */
  -o-transform: scale(1,7);
  transform-origin: top left;
  /* filter: drop-shadow(.1rem .1rem .1rem black);*/
 
    
}







.text {
 font size: 20rem;
 word-spacing: .5rem;
  
 width: 85%;
 line-height: 1em;
 position: absolute;
 
 
 -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
 

     color:whitesmoke;
transform: scale(1, 4);
/* Safari and Chrome */
-webkit-transform: scale(1, 4);
/* Firefox */
-moz-transform: scale(1, 4);
/* IE 9+ */
-ms-transform: scale(1, 4);
/* Opera */
-o-transform: scale(1,4);
transform-origin: top;
  
  
}

.text2 {
  font-size: 1.49rem;
  line-height: 2.69em;
  word-spacing: 1.39rem;
  color: green;
  display: inline-block;
  margin-top: .78rem;
  letter-spacing: -.4rem;
 visibility: hidden;
  


  width: 100%;

  margin-bottom: 10rem;
  
  
 
  
}

.text_container {



}


.menu {
 
    display:flex;
   margin-top: 1.5rem;
       color:whitesmoke;
  transform: scale(1, 2);
  /* Safari and Chrome */
  -webkit-transform: scale(1, 2);
  /* Firefox */
  -moz-transform: scale(1, 2);
  /* IE 9+ */
  -ms-transform: scale(1, 2);
  /* Opera */
  -o-transform: scale(1,2);
  position:fixed;
  background-color: blue;
  
    
    
}
.logo-spacer {

  padding-top: 0rem;
}

.menu-crop {

  height: 50px;

}
}
a:link{
    
    color:whitesmoke;
    text-decoration: none;
    
    
}

a:visited {
  color: whitesmoke;
  text-decoration: none;
  
}



a:active {
  color:whitesmoke;
  text-decoration: none;

}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  
}

li {
  float: left;
  text-decoration: none;
}

li a {
  display: block;
  color: whitesmoke;
  text-align: left;
  padding: 1rem 1rem;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:link {

  text-decoration: none;
  color: whitesmoke;
}
li a:hover {
  background-color: rgb(222, 154, 177);
  text-decoration: none;
  
}

li a:active {
 
  text-decoration: none;
  color: whitesmoke;
}

li a:focus {
 
  background-color: rgb(246, 191, 209);
  color: whitesmoke;
  letter-spacing: .4rem;
  text-decoration: none;
}

.bubble {

  margin-top: -.3rem;
  max-width: 600px;
  
  background-color:rgb(246, 191, 209);
  
}

.bubble:hover{
  background-color: black;
 
 }

.right {
  --_p: 100%;
  border-bottom-right-radius: 0 0;
  place-self: end;
}

.myvideo{
  

  margin-top:2rem;
  margin-bottom:2rem;
  margin-left:2rem;
  martin-right: 2rem;
  width: calc( 95% - 3.4rem);
  height: 300px;
  max-width: 600px; 
  
}


  


/* below are bits which link two scroll bars*/
.wrapper1,
.wrapper2 {
  width: 300px;
  border: none 0px RED;
  overflow-y: scroll;
  overflow-x: hidden;
}

.wrapper1 {
  height: 20px;
}

.wrapper2 {
  height: 200px;
}

.div1 {
  width: 1000px;
  height: 20px;
}

.div2 {
  width: 1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}