/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light";
  -webkit-font-family: "HelveticaNeue-Light", "Helvetica Neue Light";
  -webkit-font-smoothing: antialiased;
}

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10%;
  margin-top: -5%;
}

.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-46.9%, 50%);
}

.heading {
  color: #fff;
  text-transform: uppercase;
    
}

.primary-heading {
  display: block;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 18px;
  animation: moveInLeft 1s ease-out;
}

.sub-heading {
  display: block;
  font-size: 50px;
  text-align: center;
  animation: moveInFlip 1s ease-out, floatingFox 4s 1s infinite;
  
}

.floating {
  display: block;
  animation: moveInFlip 1s ease-out, floatingFox 4s 1s infinite;
  animation-delay: 5s;
  padding-right: 55%;
  padding-top: 20%; 
}

.floating-2 {
  display: block;
  animation: moveInFlip 1s ease-out, floatingFox 4s 1s infinite;
  animation-delay: 5s;
  padding-left: 65%;
  padding-top: 40%; 
}

.floating-3 {
  display: block;
  animation: moveInFlip 1s ease-out, floatingFox 4s 1s infinite;
  animation-delay: 5s;
  padding-left: 5%;
  padding-top: 40%;
  
}

.floating-4 {
  display: block;
  animation: moveInFlip 1s ease-out, floatingFox 4s 1s infinite;
  animation-delay: 5s;
  padding-left: 40%;
  padding-top: 140%;
  
}

.logo {
  transform: rotate(-45deg);
  width: 100px;
}

.logo-2 {
  transform: rotate(-45deg);
  width: 200px;
}

#name {
  animation: moveInRight 1s ease-out;
  animation-duration: 5s;
  color: blueviolet;
  z-index: 20;
  top:190px;
  right:-15%;
  position: relative;
  font-family:'Codystar', cursive;
}
#port {
  animation: 5s ease 0s normal forwards 1 fadeIn;
  color: blueviolet;
  z-index: 20;
  top:190px;
  right:-15%;
  position: relative;
  font-family:'Satisfy', cursive;

}

@-webkit-keyframes fadeIn {
  0% { opacity:0; }
  80% { opacity:0; }
  100% { opacity:1; }
}

@keyframes fadeIn {
0% { opacity:0; }
80% { opacity:0; }
100% { opacity:1; }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@media screen and (max-width: 550px) {
  
    .text-container {
    transform: translate(-46.9%, 100%);
  }
  
  .primary-heading {
    font-size:18px;
  }
  .sub-heading {
    font-size:40px;
  }
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-650px) rotateX(90deg);;
    /* transform: rotateX(90deg); */
  }
  
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(650px) rotateX(90deg);;
    /* transform: rotateX(90deg); */
  }
  
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes moveInFlip {
  0% {
    opacity: 0;
    transform: rotateX(180deg);
  }
  
  100% {
    opacity: 1;
    transform: translate(0px);
  }
}

@keyframes reverseFlip {
  0% {
    opacity: 0;
    transform: rotateX(240deg);
  }
  
  100% {
    opacity: 1;
    transform: translate(0px);
  }
}

  @keyframes floatingFox {
    0% {
      transform: translate(0px);
    }
    50% {
      transform: translateY(5px);
    }
    100% {
      transform: translate(0px);
    }
  }

@media screen and (max-width: 455px) {
  
  .text-container {
    transform: translate(-46.9%, 100%);
  }
  
  .triangle {
    width: 65vh;
  }
  .primary-heading {
    text-align: center;
    font-size:16px;
    letter-spacing: 12px;
  }
  .sub-heading {
    font-size:30px;
  }
}

@media screen and (max-height: 550px) {
    .primary-heading {
    text-align: center;
    font-size:18px;
    letter-spacing: 12px;
  }
  .sub-heading {
    font-size: 35px;
  }
}

@media screen and (max-height: 400px) {
    .primary-heading {
    text-align: center;
    font-size:12px;
    letter-spacing: 12px;
  }
  .sub-heading {
    font-size: 25px;
  }
  
    .text-container {
    transform: translate(-46.9%, 80%);
  }
}
/* //////////////////////////// */

.tr {
  width: 40%;
  padding-bottom: 28.2842712474619%; /* = width / sqrt(2) */
  position: relative;
  overflow: hidden;
  animation: moveInFlip 1s ease-out;
  animation-duration: 5s;
}

.tr-light {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: linear-gradient(
  to right, 
  #e600e6,
  #6b26d3, 
  #1d2fd3
);
-webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
        transform-origin: 0 100%;
-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);
-webkit-transition: background-color .3s;
        transition: background-color .3s;
        z-index: 10;
}
/** hover effect **/
.tr-light:hover {
  background-image:linear-gradient(
      to right, 
      #1effe4,
      #f7ff1e
    );
}

/* --------- */
.tr2 {
  width: 40%;
  padding-bottom: 28.2842712474619%; /* = width / sqrt(2) */
  position: relative;
  overflow: hidden;
  animation: moveInLeft 1s ease-out;
  animation-duration: 5s;
}

.tr2-light {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: linear-gradient(
  to left,
  #fc14ab,
  #f06d06
);
-webkit-transform-origin: right top;
    -ms-transform-origin: right top;
        transform-origin: right top;
-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);
-webkit-transition: background-color .3s;
        transition: background-color .3s;
        z-index: 10;
}
/** hover effect **/
.tr2-light:hover {
  background-image:linear-gradient(
      to right, 
      #1effe4,
      #f7ff1e
    );
}

/* ----- */
.tr3 {
  width: 40%;
  padding-bottom: 28.2842712474619%; /* = width / sqrt(2) */
  position: relative;
  overflow: hidden;
  animation: moveInFlip 1s ease-out;
  animation-duration: 5s;
}

.tr3-light {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: linear-gradient(
  to right, 
  #6b26d3, 
  #1d2fd3,
  #10cee8,
  #f7ff1e
);
-webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
        transform-origin: right bottom;
-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);
-webkit-transition: background-color .3s;
        transition: background-color .3s;
        z-index: 10;
}


/** hover effect **/
.tr3-light:hover {
background-image:linear-gradient(
  to right, 
  #1effe4,
  #f7ff1e
);
}

/* ----- */
.tr4 {
  width: 20%;
  padding-bottom:40%; /* = width / sqrt(2) */
  position: relative;
  overflow: hidden;
  animation: reverseFlip 1s ease-out;
  animation-duration: 5s;
}

.tr4-light {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image:
linear-gradient(
  to right, 
  red, 
  #f06d06
);
-webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
        transform-origin: left bottom;
-webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
-webkit-transition: background-color .3s;
        transition: background-color .3s;
        z-index: 10;
}


/** hover effect **/
.tr4-light:hover {
  background-image:linear-gradient(
      to right, 
      #1effe4,
      #f7ff1e
    );
}

/* ----- */
.tr5 {
  width: 20%;
  padding-bottom:40%; /* = width / sqrt(2) */
  position: relative;
  overflow: hidden;
  animation: reverseFlip 1s ease-out;
  animation-duration: 5s;
}

.tr5-light {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image:
  linear-gradient(
    to right, 
    red, 
    #f06d06
  );
  -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: background-color .3s;
          transition: background-color .3s;
          z-index: 1;
  }


/* FOLLOWING JUST FOR THE DEMO */
html {display: table; width: 100%; height: 100%;}
body {display: table-cell;vertical-align: middle;text-align: center;font-family: 'Raleway', arial, sans-serif;letter-spacing: 0.12em;}
.tr {margin: 10% -2% auto 0;}
.tr2 {margin: 10% -24% auto 0}
.tr3 {margin: 20% -10% auto -24%}
.tr4 {margin: 5% -20% auto -24%}
.tr5 {margin: 5% -20% auto -24%}
strong {color: #FFA500;}
h1 {font-size: 2em;padding-bottom: 0;margin-bottom: 0; }


body #curtains {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
z-index: 4;
overflow: hidden;
}
body .curtain {
position: absolute;
height: 100%;
width: 200%;
background: #1d1d1d;
transition: left 500ms ease, right 500ms ease;
}
body .curtain.left-curtain {
transform: skew(-43deg);
left: -300%;
}
body .curtain.right-curtain {
transform: skew(-43deg);
right: -300%;
}
body::after {
position: absolute;
top: 8px;
left: 8px;
z-index: 10;
padding: 8px 12px;
background: rgba(29, 29, 29, 0.75);
border-radius: 30px;
content: "Go to Dark Theme";
font-size: 13px;
font-family: "Montserrat", sans-serif;
font-weight: 700;
text-transform: uppercase;
text-align: center;
transition: color 650ms ease, background 650ms ease;
transition-delay: 100ms;
color: #f6f6f6;
opacity: 0.75;
}
body.dark .curtain.left-curtain {
left: -150%;
}
body.dark .curtain.right-curtain {
right: calc(-150% + 1px);
}
body.dark .top {
opacity: 0;
}
body.dark .bottom {
opacity: 1;
}
body.dark::after {
content: "Go to Light Theme";
color: #1d1d1d;
background: rgba(246, 246, 246, 0.7);
}
.tr4-dark {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image:
linear-gradient(
  to right, 
  #15f5c5, 
  #6df4d6
);
-webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
        transform-origin: left bottom;
-webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
-webkit-transition: background-color .3s;
        transition: background-color .3s;
        z-index: 10;
}

.tr3-dark {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: linear-gradient(
    to left, 
    #6b26d3, 
    #150582
  );
  -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: background-color .3s;
          transition: background-color .3s;
          z-index: 10;
}

.tr2-dark {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: linear-gradient(
    to right,
    #15f5c5,
    #15dff5,
    #0683f0
  );
  -webkit-transform-origin: right top;
      -ms-transform-origin: right top;
          transform-origin: right top;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: background-color .3s;
          transition: background-color .3s;
          z-index: 10;
}

.tr-dark {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: linear-gradient(
  to left, 
  #0000ff,	
  #00bfff
);
-webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
        transform-origin: 0 100%;
-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);
-webkit-transition: background-color .3s;
        transition: background-color .3s;
        z-index: 10;
}

@media only screen and (max-width: 768px) {
/* For mobile phones: */
#name {
  animation: moveInRight 1s ease-out;
  animation-duration: 5s;
  font-size: 20px;
  color: blueviolet;
  z-index: 20;
  top:10px;
  right:-15%;
  position: relative;
  font-family:'Codystar', cursive;
}
#port {
  animation: 5s ease 0s normal forwards 1 fadeIn;
  font-size: 15px;
  color: blueviolet;
  z-index: 20;
  top:20px;
  right:-15%;
  position: relative;
  font-family:'Satisfy', cursive;
}

#feat {
  animation: 5s ease 0s normal forwards 1 fadeIn;
  font-size: 15px;
  color: blueviolet;
  z-index: 20;
  top:20px;
  right:-15%;
  position: relative;
  font-family:'Satisfy', cursive;
}

.container {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10%;
  margin-top: -5%;
}

.logo {
  transform: rotate(-45deg);
  width: 50px;
}

.logo-2 {
  transform: rotate(-45deg);
  width: 90px;
}
}