/* here we add the styling for the perfect landing page 
our objectives :
1) button design 
2) hover effect
3) background for left and right
4) hovering over the left or right makes the div transition 
5) we will assign every value at the begining of the css
*/

/* about body */
html,body{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  font-family: Arial;
  overflow-x : hidden;
}

.split-pane {
  padding-top: 1em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 50%;
  min-height: 9em;
  font-size: 2em;
  color: white;
  font-family: 'Open Sans', sans-serif;
	font-weight:300;
;
}
/* about button */
.button{
    display : block;
  position: absolute;
  top: 80%;
  left :50%;
  width : 15rem;
  height : 6.5rem;
  border: white solid 4px;

  text-align : center;
  font-size: 39px;
  background-color : transparent;
  border-radius: 12px;
  color : white;
  padding-top :1.3rem;
  
  
  text-transform : uppercase;
  text-decoration: none;
  transform :  translateX(-50%);
  transform: translateY(-50%);
  transition-duration : 0.4s;
}

button {
  margin-top: 20px;
}

.split.left .button:hover{
  background-color: black;
  border : #f29155 solid 4px;
  color: white;
  }
.split.right .button:hover{
  background-color: black;
  border: lightgreen solid 4px;
  color: white;
}




.container{
  position : relative;
  left:0;
  top:0;
 width:100%;
	height: 100%;
  background-color : grey;
  
}


/* For spliting*/

.split.left{
    position:absolute;
  width:50%;
  height:100%;
  overflow:hidden;
  left:0;
  
 background : url("https://wallpaperaccess.com/full/643363.jpg") center center no-repeat ;
  background-size:cover;
  
}

.split.right{
    position:absolute;
  width:50%;
  height:100%;
  overflow:hidden;
 right:0;

  background : url("https://www.ecowatch.com/wp-content/uploads/2022/04/GettyImages-1318137351-scaled.jpg") center center no-repeat ;
  background-size:cover;
}

.grayscalefilter {
  filter: blur(0.09rem);
  filter: grayscale(100%);
  filter: drop-shadow(16px 16px 20px red) invert(75%) grayscale(100%);
}





/* now  we need "before" in spilt and transition  */
.split.right,.split.left,.split.left .button , .split.right .button{
  transition-duration: 1000ms ;
}

/*  to add transition of the split screen */
.hover-left .left{

  width:75%;
}
.hover-left .right{
 
  width :25%;
}

.hover-left .right:before{
  z-index : 2;
}


.hover-right .right{
  width:75%;
}
.hover-right .left{
  width:25%;
}
.hover-right .left:before{
  z-index: 2;
}


/* if we change the size of the webpage this will adjust the page according to it */

@media(max-width : 800px){
  h1{
    font-size : 3rem;
   }
  .button{
    width:12rem;
    height:6.5rem;
  }
}

@media(max-height :700px){
 
  .button{
    top:70%;
  }
}

@media(min-width: 500px) {
  .split-pane {
    padding-top: 2em;
    height: 100%;
  }
}
.split-pane > div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}
.split-pane > div .text-content {
  line-height: 1.6em;
  margin-bottom: 1em;
}
.split-pane > div .text-content .big {
  font-size: 2em;
}
.split-pane > div img {
  height: 1.3em;
}
@media (max-width: 500px) {
  .split-pane > div img {
    display:none;
  }
}
.split-pane button, .split-pane a.button {
  font-family: 'Open Sans', sans-serif;
	font-weight:800;
  background: none;
  border: 1px solid white;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 15em;
  padding: 0.7em;
  font-size: 0.5em;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  text-decoration: none;
  color: white;
  display: inline-block;
	cursor: pointer;
}
.split-pane button:hover, .split-pane a.button:hover {
  text-decoration: none;
  background-color: white;
  border-color: white;
	cursor: pointer;
}
.uiux-side.split-pane button:hover, .split-pane a.button:hover {
  color: black;
}
.frontend-side.split-pane button:hover, .split-pane a.button:hover {
  color: blue;
}

#split-pane-or {
  font-size: 2em;
  color: white;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media (max-width: 925px) {
  #split-pane-or {
    top:15%;
  }
}
#split-pane-or > div img {
  height: 2.5em;
}
@media (max-width: 500px) {
  #split-pane-or {
    position: absolute;
    top: 50px;
  }
  #split-pane-or > div img {
    height:2em;
  }
}
@media(min-width: 500px) {
  #split-pane-or {
    font-size: 3em;
  }
}
.big {
  font-size: 2em;
}

#slogan {
  position: absolute;
  width: 100%;
  z-index: 100;
  text-align: center;
  vertical-align: baseline;
  top: 0.5em;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.4em;
}
@media(min-width: 500px) {
  #slogan {
    top: 5%;
    font-size: 1.8em;
  }
}
#slogan img {
  height: 0.7em;
}
.bold {
	text-transform:uppercase;
  filter: blur(0);
}
.big {
	font-weight:800;
}