<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">button {
    --border: 3px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #23364b; /* the color */
    
    font-size: 15px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    font-family: Almarai;
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000c;
    clip-path: none;
    background-size: 0 0;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  textarea{
      direction:ltr;
      border: solid 0.1rem rgba(0, 0, 0, 0.54);
      border-radius: 0.4rem;
      font-family: Almarai;
      font-weight: normal;
      outline: none;
      transition: height 0.3s;
      box-sizing: border-box;
      width: calc(100% - 2.4rem);
      height: 15pc;
      background: transparent;
      resize: none;
      padding: 1.2rem;
    }
    
    textarea:focus {
      border: solid 0.2rem #2196f3;
      padding: 1.2rem;
    }
  
    input {
        font-weight: bold;
        width: 40%;
        height: 40px;
        padding: 5px 1%;
        border: 1px solid #ccc;
        -moz-border-radius: 27px;
        -webkit-border-radius: 27px;
        border-radius: 27px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        background-color: #fff;
        font-family: 'Almarai';
        font-size: 105%;
        letter-spacing: .8px;
    }

    
  #evennt{
    padding: 0 25%;
  }</pre></body></html>