/*
 * --------------------------------------------------------------------
 * File: \public\css\font-color.css
 * Created: Wednesday, 25th September 2024 1:35:49 pm
 * Modified: Wednesday, 25th September 2024 1:35:49 pm
 * Author: Mohamed Kamil Bin Mansor
 * 
 * Copyright (c) 2024 - System Consultancy Services Sdn. Bhd.
 * --------------------------------------------------------------------
 */

/* Tutorial on https://fossheim.io/writing/posts/css-text-gradient. */

.sub-iocc {
    font-size: 20px;
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text {
    /* Fallback: Set a background color. */
    background-color: #c8ca42;
    
    
    /* Create the gradient. */
     background-image: linear-gradient(
          45deg,
          /* #6DC3FF 16.666%,  */
          #E16541 16.666%, 
          #E16541 33.333%, 
          #F18F43 33.333%, 
          #F18F43 50%, 
          #8B9862 50%, 
          #8B9862 66.666%, 
          /* #476098 66.666%, 
          #476098 83.333%,  */
          #A7489B 83.333%);
    
    /* Set the background size and repeat properties. */
    background-size: 100%;
    background-repeat: repeat;
  
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    
    /* Animate the text when loading the element. */
      /* This animates it on page load and when hovering out. */
      animation: rainbow-text-simple-animation-rev 0.75s ease forwards;
  
  }
  
  .gradient-text:hover{
      animation: rainbow-text-simple-animation 0.5s ease-in forwards;
  }
  
  
  /* Move the background and make it smaller. */
  /* Animation shown when entering the page and after the hover animation. */
  @keyframes rainbow-text-simple-animation-rev {
      0% {
          background-size: 650%;
      }
      40% {
          background-size: 650%;
      }
      100% {
          background-size: 100%;
      }
  }
  
  /* Move the background and make it larger. */
  /* Animation shown when hovering over the text. */
  @keyframes rainbow-text-simple-animation {
      0% {
          background-size: 100%;
      }
      80% {
          background-size: 650%;
      }
      100% {
          background-size: 650%;
      }
  }
  
  /* Style the rest of the page. */
  body {
    background-color: #fdf1f0;
  }
  
  header {
    margin-top: 1em;
    margin-top: calc(50vh - 3em);
  }
  
  h1 {
    /* font-family: "Archivo Black", sans-serif; */
    font-family: "Michroma";
    font-weight: normal;
    font-size: 75px;
    text-align: center;
    margin-bottom: 0;
    margin-bottom: -0.25em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    width: 605px;
  }