@tailwind base;

body {
    font-family: Rubik, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
}

button {
    @apply p-2 text-sm bg-blue-600 text-white border-2 border-blue-600 rounded shadow
}

strong {
    @apply text-black font-extrabold
}

li {
    padding: 0.2rem;
}

.animated-bg {
	background: linear-gradient(-45deg, rgb(168, 199, 245), #fff);
	background-size: 400% 400%;
    animation: bg-gradient 5s ease infinite;
}

.animated-bg2 {
	background: linear-gradient(-45deg, #fff, #ddd, #eee);
	background-size: 400% 400%;
    animation: bg-gradient 5s ease infinite;
}

@keyframes bg-gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.panel {
    @apply flex flex-col justify-center items-center pt-16 pb-16 max-w-screen-lg m-auto
}

.logo {
    filter: grayscale(100%);
    @apply p-4 opacity-50
}

i.contact {
    @apply p-1 text-lg
}

.blink {
  animation: blinker 0.4s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@tailwind components;

@tailwind utilities;

@responsive {
    .text-shadow {
      text-shadow: 0 2px 4px rgba(0,0,0,0.10);
    }

    .text-shadow-md {
      text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
    }

    .text-shadow-lg {
      text-shadow: 0 15px 30px rgba(0,0,0,0.11), 0 5px 15px rgba(0,0,0,0.08);
    }

    .text-shadow-white {
      text-shadow: 0 15px 30px rgba(255,255,255,0.11), 0 5px 15px rgba(255,255,255,0.08);
    }

    .text-shadow-none {
      text-shadow: none;
    }
  }
