/*
 * 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
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * 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.
 *



 */

/* newsletter */
.success-light {
   color: rgb(78, 118, 17) !important;
 }
 .error-light {
   color: #991f1f !important;
 }
 .warning-light {
   color: rgb(126, 126, 20) !important;
 }
/* must be added first, then base, components and utilities */
@import "partials/widget/_prayer.tailwind.css";
@import "partials/widget/_wrapper.tailwind.css";

@import "partials/_admin_nav.tailwind.css";
@import "partials/_hijri.tailwind.css";
@import "partials/_table.tailwind.css";
@import "partials/_definition.tailwind.css";
@import "partials/_privacy.tailwind.css";

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

@layer components {  
  html, footer {
    @apply bg-slate-100/40;
  }
  
  header h1 {
    @apply text-sblue;
  }
  header nav a {
    @apply text-sblue px-4 hover:underline;
  }
  header .pressed {
    @apply text-spink underline;
  }
  
  p {
    @apply mb-4;
  }
  
  .preview {
    @apply mb-2 p-5 mx-auto;
  }
  .preview div h2 {
    @apply text-center text-2xl mb-2 font-medium;
  }
  .preview div div:nth-of-type(1) h2 {
    @apply text-sblue;
  }
  .preview  div div:nth-of-type(2) h2 {
    @apply text-spink;  
  }
  .preview div div:nth-of-type(3) h2 {
    color: #52A196;
  }
  .preview > div:first-child {
    @apply flex flex-col items-center md:flex-row md:justify-center mb-10 md:space-x-10;  
  }
  .preview > div:first-child > img:last-child {
    @apply md:block hidden;
  }
  
  section {
    @apply overflow-auto;
  } 
  .section-wrapper, .footnote {
    @apply container mx-auto max-w-4xl;
  }
  .section-wrapper {
    @apply flex flex-col mx-auto md:justify-between px-8 py-10;
  }
  .footnote {
    @apply text-xs !mb-3 px-8;
  }
  
  .section-wrapper .text {
    @apply flex-1 text-base;
  }
  .section-wrapper img {
    @apply mx-auto; 
  }
  section:nth-child(odd) .section-wrapper {
    @apply md:flex-row;
  }
  
  section:nth-child(even) .section-wrapper {
    @apply md:flex-row-reverse;
  }
  
  section:nth-child(odd) .section-wrapper .text {
    @apply md:mr-20;
  }
  section:nth-child(even) .section-wrapper .text {
    @apply md:ml-20;
  }
}
#moon-img {
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0;
  height: 400px;
  width: 400px;
} 

#moon-img img {
  width: 100%;
  height: 100%;
}

#moon {
  margin: 0;
  padding: 0;
  animation: self-orbit 4s linear infinite;
}

#moon-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 24px;
  width: 24px;
  margin-top: -12px;
  margin-left: -12px;
  animation: orbit 4s linear infinite;
}

#shadow {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 50%;
  background-color: #332d3d;
  z-index: 99;
  opacity: 0.8;
}

@keyframes self-orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(80px) rotate(0deg);
  }
  to {
    transform: rotate(-360deg) translateX(80px) rotate(360deg);
  }
}

.preview > img {
	width: 763;
	height: 680;
}

.app-links img {
	height: 60px;
}