/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
      margin: 0;
      height: 100vh; /* vh = viewport height (100% of the screen height) */
      
      /* 2. Turn the body into a flex container */
      display: flex;
      
      /* 3. Center vertically and horizontally */
      justify-content: center; /* Aligns horizontally */
      align-items: center;     /* Aligns vertically */
      
      background-color: #f5f5f5; /* Just for contrast */
      cursor: url('./imgs/ratita_50.png'), auto;
      overflow:hidden;
    }


    /* Simple list styling */
    #main_menu {
      margin: 0;
      padding: 0;
      list-style: none;
      text-align: center;
    }

    li {
      padding: 0.2rem 1rem;
    }

    li a {
      text-decoration: none;
      color: #333;
      font-family: "Beth Ellen";
      cursor: url('./imgs/ratita_rotada_50.png'), pointer;
      position: relative;
      font-size: 20px;
    }
    /*li a::after {
      content:'';
      position: relative;
      display:block;
      width: 0;
      height: 2px;
      background: #333;
      transition: width 0.2s ease-in;
      transform: rotate(-2deg);
      border-radius: 12px;
    }*/
    li a::after {
        content: attr(data-text);
        position: absolute;
        display: block;
        width: 0;
        transition: width 0.4s ease-in;
        top: 0;
        left: 0;
        overflow: hidden;
        color: #3949a4;
    }
    li a:hover::after, li a:active::after{
      width: 100%;  
    }
    #firma {
        position: fixed;
        bottom: 10px;
        left: 10px;
        font-family: 'Beth Ellen';
        font-size: 10px;
        transition: left 0.5s cubic-bezier(.86,0,.07,1), bottom 0.5s cubic-bezier(.65,.05,.36,1);
    }

    canvas {
      display: block;
      width: 100vw;
      height: 100vh;
      z-index:-1;
      position: absolute;
    }
/*
#faces img{
  width: 100%;
  position: absolute;
  left: 0;
}
.clip_left{
  clip-path: inset(0 50% 0 0);  
}
.clip_right{
  clip-path: inset(0 0 0 50%);  
}
.clip_both{
  clip-path: inset(0 50% 0 50%);  
}*/