@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Amiga Forever Pro";
  src: url("https://cdn.ghav.me/fonts/amiga4ever/amiga4ever_pro-webfont.eot");
  src: url("https://cdn.ghav.me/fonts/amiga4ever/amiga4ever_pro-webfont.woff") format("woff"),
       url("https://cdn.ghav.me/fonts/amiga4ever/amiga4ever_pro-webfont.woff2") format("woff2"),
       url("https://cdn.ghav.me/fonts/amiga4ever/amiga4ever_pro-webfont.svg#filename") format("svg");
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');

@layer components {
  .main {
    @apply overflow-x-hidden;
  }

  .sidebar {
    @apply fixed top-0 left-0 h-screen w-12 m-0 z-10 flex flex-col bg-nicegray-200 text-nicegray-900 shadow-lg shadow-shadowBlack
           dark:bg-nicegray-800 dark:text-white;
  }

  .sidebar-item {
    @apply relative flex items-center justify-center h-10 w-10 my-3 mx-auto text-nicegray-800 bg-nicegray-300 rounded-lg
           dark:bg-nicegray-700 dark:text-white
           hover:bg-orange-400 dark:hover:bg-fuchsia-600 hover:rounded-xl 
           transition-all duration-[400ms] ease-linear
           cursor-pointer; 
  }

  .dark-mode-toggle {
    @apply relative flex items-center justify-center h-6 w-6 my-3 mx-auto text-white bg-nicegray-700 rounded-lg
           dark:bg-nicegray-300 dark:text-nicegray-800
           hover:bg-fuchsia-600 dark:hover:bg-orange-400 hover:rounded-xl 
           transition-all duration-[400ms] ease-linear
           cursor-pointer; 
  }

  .sidebar-popup {
    @apply absolute w-auto min-w-max p-2 m-2 left-12 rounded-md shadow-md text-white bg-nicegray-900 text-xs font-bold
           transition-all duration-100 scale-0 origin-left;
  }

  .home-block {
    @apply h-screen w-screen bg-day bg-cover bg-right-bottom text-nicegray-900 
           dark:bg-night dark:text-white
           transition-all duration-[400ms] ease-linear;
  }

  .home-info {
    @apply container text-2xl mx-auto lg:pt-[26%] pt-[15%] 
        
  }

  .home-info h1 {
    @apply font-pixel text-white lg:text-5xl text-3xl text-stroke-2 text-stroke-black ml-12
  }
  .home-info h2 {
    @apply font-pixel text-white lg:text-3xl text-2xl text-stroke-2 text-stroke-black ml-12
  }

  .about-wave {
    @apply fill-[#f48045] 
           dark:fill-[#040a19]
           transition-all duration-[400ms] ease-linear;
  }

  .about-block {
    @apply w-screen bg-nicegray-100 font-noto
           dark:bg-nicegray-900
           transition-all duration-[400ms] ease-linear;
  }
  .about-content {
    @apply container text-nicegray-900 text-2xl mx-auto py-10 pl-12
           dark:text-white;
  }

  .skills-content {
    @apply container text-nicegray-900 mx-auto py-10 pl-12
           dark:text-white;
  }
  .skills-grid {
    @apply grid grid-cols-3 gap-4;
  }

  .skill-card {
    @apply text-center p-6 max-w-sm w-[24rem] bg-white rounded-lg border border-nicegray-200 shadow-md 
           dark:bg-nicegray-800 dark:border-nicegray-700;
  }
  .skill-card svg {
    @apply inline-block;
  }

  .skill-card h2 {
    @apply text-xl font-bold mt-6 mb-5
  }
  .skill-card h3 {
    @apply text-lg mt-6 mb-2
  }
  .skill-card p {
    @apply italic text-base
  }

  .skill-icon {
    @apply text-nicegray-800 inline-block m-1
           dark:text-white
           transition-all duration-[400ms] ease-linear
           cursor-pointer; 
  }
  .hover-green .skill-icon {
    @apply hover:text-[#56ab2f]
  }
  .hover-pink .skill-icon {
    @apply hover:text-[#bc4e9c]
  }
  .hover-blue .skill-icon {
    @apply hover:text-[#00d2ff]
  }
  .skill-popup-wrapper {
    @apply block fixed;
  }
  .skill-icon svg {
    @apply block;
  }
  .skill-popup {
    @apply absolute w-auto min-w-max p-2 mt-2 rounded-md shadow-md text-white bg-nicegray-900 text-xs font-bold z-10
           transition-all duration-100 scale-0 origin-top;
  }

  .portfolio-wave {
    @apply fill-nicegray-100 
           dark:fill-nicegray-900
           transition-all duration-[400ms] ease-linear;
  }

  .portfolio-block {
    @apply w-screen bg-gradient-to-b from-[#f48045] to-[#EC3962]
           dark:from-[#040a19] dark:to-[#6E536F]
           transition-all duration-[400ms] ease-linear;
           
  }
  .portfolio-content {
    @apply container mx-auto py-10 pl-12;
  }

  .project-card {
    @apply max-w-sm bg-white rounded-lg border border-nicegray-200 shadow-md shadow-shadowBlack
           dark:bg-nicegray-900 dark:border-nicegray-700
           transition-all duration-[400ms] ease-linear;
  }
  .project-card img {
    @apply rounded-t-lg;
  }
  .card-content {
    @apply px-5 py-2;
  }
  .card-content h5 {
    @apply mb-2 text-2xl font-bold tracking-tight text-nicegray-900 
           dark:text-white;
  }
  .card-content p {
    @apply mb-3 font-normal text-nicegray-700 
           dark:text-nicegray-400;
  }

  .contact-block {
    @apply w-screen bg-nicegray-100 text-nicegray-900
           dark:bg-nicegray-900 dark:text-white
           transition-all duration-[400ms] ease-linear;
  }
  .contact {
    @apply container mx-auto py-10 pl-12;
  }

  .contact h2 {
    @apply italic text-2xl mb-8 font-noto font-thin
  }

  .contact-wave {
    @apply fill-[#EC3962]
           dark:fill-[#6E536F];
  }

  .contact .button-inner {
    @apply bg-nicegray-100 text-nicegray-900
           dark:bg-nicegray-900 dark:text-white;
  }

  .wave {
    @apply block absolute w-full h-16 max-h-16 m-0 z-[5] left-0 float-left 
           rotate-180;
  }

  .element-open {
    @apply before:content-['<'] after:content-['>'] font-normal font-mono text-2xl;
  }

  .element-close {
    @apply before:content-['</'] after:content-['>'] font-normal font-mono text-2xl;
  }

  .element-indent {
    @apply ml-8 my-4 min-w-[384px];
  }

  .button {
    @apply relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-nicegray-900 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 
         hover:text-white focus:outline-none
           dark:text-white dark:focus:ring-purple-800
           transition-all duration-75 ease-linear;
  }
  .button-inner {
    @apply relative px-5 py-2.5 bg-white rounded-md
           dark:bg-nicegray-900 
           transition-all ease-in duration-[400ms];
  }
  .button-text {
    @apply relative z-[4] before:absolute before:z-[-1] before:px-[200%] before:py-0 before:bg-gradient-to-br before:from-purple-500 before:to-pink-500 before:top-[50%] before:left-[50%] before:translate-x-[-50%] before:translate-y-[-50%] before:rotate-[-45deg]
           transition-all ease-linear duration-75
           before:transition-all before:ease-linear before:duration-[400ms];
  }

  ul {
    @apply mx-auto;
  }
}

@layer utilities {
  .text-fill { -webkit-text-fill-color: #e0e0e0 }
  .text-fill-transparent { -webkit-text-fill-color: transparent }
  .text-fill-black { -webkit-text-fill-color: #000 }
  .text-fill-white { -webkit-text-fill-color: #fff }

  .text-stroke { -webkit-text-stroke-color: #e0e0e0 }
  .text-stroke-transparent { -webkit-text-stroke-color: transparent }
  .text-stroke-black { -webkit-text-stroke-color: #000 }
  .text-stroke-white { -webkit-text-stroke-color: #fff }

  .text-stroke { -webkit-text-stroke-width: 1px }
  .text-stroke-0 { -webkit-text-stroke-width: 0 }
  .text-stroke-2 { -webkit-text-stroke-width: 2px }
  .text-stroke-4 { -webkit-text-stroke-width: 4px }
  .text-stroke-8 { -webkit-text-stroke-width: 8px }

  .paint-fsm { paint-order: fill stroke markers }
  .paint-fms { paint-order: fill markers stroke }
  .paint-sfm { paint-order: stroke fill markers }
  .paint-smf { paint-order: stroke markers fill }
  .paint-mfs { paint-order: markers fill stroke }
  .paint-msf { paint-order: markers stroke fill }

  @media (min-width: 640px) {
    .sm\:text-fill { -webkit-text-fill-color: #e0e0e0 }
    .sm\:text-fill-transparent { -webkit-text-fill-color: transparent }
    .sm\:text-fill-black { -webkit-text-fill-color: #000 }
    .sm\:text-fill-white { -webkit-text-fill-color: #fff }

    .sm\:text-stroke { -webkit-text-stroke-color: #e0e0e0 }
    .sm\:text-stroke-transparent { -webkit-text-stroke-color: transparent }
    .sm\:text-stroke-black { -webkit-text-stroke-color: #000 }
    .sm\:text-stroke-white { -webkit-text-stroke-color: #fff }

    .sm\:text-stroke { -webkit-text-stroke-width: 1px }
    .sm\:text-stroke-0 { -webkit-text-stroke-width: 0 }
    .sm\:text-stroke-2 { -webkit-text-stroke-width: 2px }
    .sm\:text-stroke-4 { -webkit-text-stroke-width: 4px }
    .sm\:text-stroke-8 { -webkit-text-stroke-width: 8px }

    .sm\:paint-fsm { paint-order: fill stroke markers }
    .sm\:paint-fms { paint-order: fill markers stroke }
    .sm\:paint-sfm { paint-order: stroke fill markers }
    .sm\:paint-smf { paint-order: stroke markers fill }
    .sm\:paint-mfs { paint-order: markers fill stroke }
    .sm\:paint-msf { paint-order: markers stroke fill }
  }
}


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 *
 * 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
 * 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.
 *


 */
 /*
 .wave {
    display: block;
    width: 100%;
    height: 60px;
    max-height: 60px;
    margin: 0;
    z-index:5;
    position:absolute;
    left:0px;
    float:left;
    transform: rotate(180deg);
  }*/
 
.project-card img {
  clip-path: ellipse(100% 59% at 50% 40%);
}
  
.parallax > use {
  animation: move-forever1 10s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}