﻿/* ============================================================
   BASE GENERALE SITO AKASHA
   ============================================================ */

html {
 margin: 0;
 padding: 0;
 min-height: 100%;
 width: 100%;
 background-color: #d12a18;
}

body {
 margin: 0;
 padding: 0;
 min-height: 100%;
 width: 100%;
 font-family: "Montserrat", Arial, sans-serif;
 color: #fff5d7;
 background: transparent;
 overflow-x: hidden;
 position: relative;
 z-index: 0;
}

* {
 box-sizing: border-box;
}

a {
 transition: all .25s ease;
}

img {
 max-width: 100%;
 height: auto;
}

/*h1, h2, h3, h4 {
 font-family: "Playfair Display", Georgia, serif;
 font-weight: 600;
}*/

/* ============================================================
   TITOLI PRINCIPALI
   ============================================================ */

h1 {
 font-family: "Playfair Display", Georgia, serif;
 font-weight: 700;
 font-size: clamp(2.4rem, 5vw, 3.8rem);
 color: #fff1ad;
 text-align: center;
 letter-spacing: .5px;
 text-transform: none;
 text-shadow: 0 0 25px rgba(255, 241, 173, .65), 2px 2px 5px rgba(0,0,0,.45);
 margin: 0 0 30px 0;
}

h2 {
 font-family: "Playfair Display", Georgia, serif;
 font-weight: 600;
}

h3 {
 font-family: "Playfair Display", Georgia, serif;
 font-weight: 600;
}


p, a, li, span, button, input, textarea, label {
 font-family: "Montserrat", Arial, sans-serif;
}


/* ============================================================
   SFONDO STELLATO GENERALE
   ============================================================ */

body::before {
 content: "";
 position: fixed;
 inset: 0;
 z-index: -1;
 background-image: radial-gradient(2px 2px at 20px 30px, #ffffff, transparent), radial-gradient(3px 3px at 50px 80px, #fff1ad, transparent), radial-gradient(2px 2px at 80px 120px, #ffffff, transparent), radial-gradient(3px 3px at 130px 40px, #ffffff, transparent), radial-gradient(2.5px 2.5px at 170px 180px, #fff1ad, transparent), radial-gradient(2px 2px at 210px 100px, #ffffff, transparent), radial-gradient(3px 3px at 240px 260px, #ffffff, transparent), radial-gradient(2px 2px at 280px 30px, #fff1ad, transparent);
 background-size: 300px 300px;
 animation: twinkle-1 4s infinite ease-in-out;
}

body::after {
 content: "";
 position: fixed;
 inset: 0;
 z-index: -1;
 background-image: radial-gradient(2.5px 2.5px at 40px 200px, #ffffff, transparent), radial-gradient(3.5px 3.5px at 110px 320px, #fff1ad, transparent), radial-gradient(2px 2px at 190px 20px, #ffffff, transparent), radial-gradient(3px 3px at 260px 140px, #ffffff, transparent), radial-gradient(2px 2px at 30px 380px, #fff1ad, transparent), radial-gradient(3.5px 3.5px at 150px 230px, #ffffff, transparent), radial-gradient(2px 2px at 220px 350px, #ffffff, transparent), radial-gradient(3px 3px at 290px 90px, #fff1ad, transparent);
 background-size: 350px 350px;
 animation: twinkle-2 6s infinite ease-in-out;
 animation-delay: 1.5s;
}

@keyframes twinkle-1 {
 0%, 100% {
  opacity: .3;
 }

 50% {
  opacity: 1;
 }
}

@keyframes twinkle-2 {
 0%, 100% {
  opacity: .2;
 }

 50% {
  opacity: .9;
 }
}


/* ============================================================
   MILESTONE 6 - ACCESSIBILITA E COMPORTAMENTO GLOBALE
   ============================================================ */
.skip-link-akasha {
 position: fixed;
 top: 12px;
 left: 12px;
 z-index: 10000;
 padding: 12px 18px;
 border: 2px solid #6f1720;
 border-radius: 10px;
 background: #fff8e6;
 color: #6f1720;
 font-weight: 800;
 text-decoration: none;
 transform: translateY(-160%);
 transition: transform .2s ease;
}

.skip-link-akasha:focus {
 transform: translateY(0);
 outline: 3px solid #fff1ad;
 outline-offset: 3px;
}

:focus-visible {
 outline: 3px solid #fff1ad;
 outline-offset: 4px;
}

button,
input,
select,
textarea {
 font: inherit;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
 min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
 }
}
