/*********************************************************************

Theme Name: from an other to the other
Version: 1.0
Author: Xuan Ye
Author URI: https://a.pureapparat.us/
Description: https://app.pureapparat.us/fromanothertotheother.com/
Copyright (c) Xuan Ye

*********************************************************************/

*{
    font-family: sans-serif;
    font-weight: 300;
    letter-spacing: 0.1px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


p{
  margin-bottom: 1rem;
}


a{
   cursor: crosshair;
   color: white;
}

a:hover, a:focus, a.hover {
  background: repeating-linear-gradient(to right, #efefef, #ccc 20px, #a2a2a2 40px, #999 60px, #737373 80px, #c3c3c3 100px, #efefef 120px);
  background-size: 120px 100%;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-animation: rainbow 500ms infinite linear;
  animation: rainbow 500ms infinite linear;
}

#info{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}

#info > p{
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#info:hover .imprint{
  left: 0;
}

.imprint{
  position: absolute;
  top: 0;
  bottom: 0;
  left: -500px;
  width: 500px;
  background: black;
  color: white;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  padding: 2rem;
  font-size: 1rem;
  line-height: 1.2rem;
  overflow-y: scroll;
}


hr{
  margin-bottom: 2rem;
  border: 1px dotted white;
}

#the-other{
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.an-other{
  max-width: 61.8%;
  flex: 1;
  font-size: 1.2rem;
  line-height: 1.5rem;
}

/* wp overwrite */

.wp-block-image{
  margin: 0;
  text-align: center;
}


.wp-block-image img{
	height:auto;
}

@media only screen and (max-width: 500px) {
  .imprint{
    left: -250px;
    width: 250px;
  }

  #the-other{
    display: block;
  }

  .an-other{
    max-width: 100%;
    padding: 2rem 2rem 2rem 3rem;
  }

  .wp-block-image{
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 4rem);
  }

}