* {
  box-sizing: border-box;
  margin:0;
  padding:0;
  scroll-margin-top: 5rem;
}

:root {
  --unit:min(1.6vw, 3vh);
}

@font-face {
  font-family: 'hfs';
  src: url('font.otf') format('opentype');
}

@keyframes glow {
  0%    { text-shadow:-3px 2px 0 rgb(255,153,25), 0 1px 0 rgba(56,199,181), 2px 0 0 rgba(253,75,67), -2px -1px 0 rgba(32,110,7); }
  25%   { text-shadow:1px -1px 0 rgb(255,153,25), -3px -1px 0 rgba(56,199,181), 1px 2px 0 rgba(253,75,67), -3px 0 0 rgba(32,110,7); }
  50%   { text-shadow:-1px -1px 0 rgb(255,153,25), 1px 2px 0 rgba(56,199,181), 3px -1px 0 rgba(253,75,67), -4px 1px 0 rgba(32,110,7); }
  75%  { text-shadow:-1px -2px 0 rgb(255,153,25), -2px 1px 0 rgba(56,199,181), -1px 1px 0 rgba(253,75,67), 2px 0 0 rgba(32,110,7); }
  100%    { text-shadow:-3px 2px 0 rgb(255,153,25), 0 1px 0 rgba(56,199,181), 2px 0 0 rgba(253,75,67), -2px -1px 0 rgba(32,110,7); }
}

@keyframes box-glow {
  0%    { box-shadow:-6px 4px 0 rgb(255,153,25), 0 2px 0 rgba(56,199,181), 4px 0 0 rgba(253,75,67), -4px -4px 0 rgba(32,110,7); }
  25%   { box-shadow:2px -2px 0 rgb(255,153,25), -6px -2px 0 rgba(56,199,181), 2px 4px 0 rgba(253,75,67), -6px 0 0 rgba(32,110,7); }
  50%   { box-shadow:-2px -2px 0 rgb(255,153,25), 2px 4px 0 rgba(56,199,181), 6px -2px 0 rgba(253,75,67), -4px 2px 0 rgba(32,110,7); }
  75%  { box-shadow:-2px -4px 0 rgb(255,153,25), -4px 2px 0 rgba(56,199,181), -2px 2px 0 rgba(253,75,67), 4px 0 0 rgba(32,110,7); }
  100%    { box-shadow:-6px 4px 0 rgb(255,153,25), 0 2px 0 rgba(56,199,181), 4px 0 0 rgba(253,75,67), -4px -2px 0 rgba(32,110,7); }
}

@keyframes pan {
  0%    { background-position:50% 50%; }
  25%    { background-position:100% 30%; }
  50%    { background-position:20% 30%; }
  100%    { background-position:60% 80%; }
}

html {
  scroll-behavior: smooth;
}

body {
  padding:0;
  margin:0;
  width:100%;
  height:fit-content;
  color:rgba(255,255,255,1);
  font-family:Century Gothic, Helvetica, sans-serif;
  font-size:1rem;
  line-height: 100%;
  justify-content: space-around;
  background-color:rgb(255,255,255);
  flex-direction:column;
}

h1, h2, h3, h4 {
  font-family:hfs, Helvetica, sans-serif;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

h1, h2 {
  text-transform: uppercase;
  animation-name: glow;
}



header {
  display:flex;
  background-image:url("http://www.hafafasha.com/img/slider/2.jpg");
  background-position:50% 50%;
  background-size:150vmax auto;
  background-repeat:no-repeat;
  width:100%;
  height:calc(40vh - 3rem);
  animation-name: pan;
  animation-duration: 100s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  z-index:1;
  background-attachment:fixed;
}

header h1 {
  display:flex;
  width:100%;
  height:calc(40vh - 3rem);
  align-items:center;
  margin:0;
  justify-content:center;
  background:rgba(0,0,0,0.7);
  animation-name: glow;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  font-size:min(10vw, 18vh);
  background-image:url("http://www.hafafasha.com/img/logo.png");
  background-repeat:no-repeat;
  background-size:18vmin auto;
  background-position:calc(50% - min(30vw, 60vh) ) 50%;
  padding-left:20vmin;
   z-index:1;
}

hr {
  z-index:3;
  position:relative;
  display:block;
  height:1.5rem;
  background-color:rgb(56,199,181);
  box-sizing:border-box;
  border-style:solid;
  margin-top:0rem;
  margin-bottom:2.5rem;
}

hr.hr1 {
  border-color:rgb(81,239,201) rgb(81,239,201)  rgb(253,215,200) rgb(32,183,70);
  border-width: 0.5rem 0 0.3rem 0;
  box-shadow:
    0 -0.3rem 0 rgb(32,183,70),
    0 -0.8rem 0 rgb(32,110,7),
    0 -1rem 0 rgb(7,85,5),
    0 -1.7rem 0 rgb(7,42,13),
    0 0.6rem 0 rgb(253,74,67),
    0 1.3rem 0 rgb(255,153,25),
    0 1.65rem 0 rgb(255,235,132),
    0 1.9rem 0 rgb(255,250,219)
   ;
  transform:rotate(-1deg);
}



#znajdz {
  background:rgba(255,255,255,1);
  overflow:hidden;
  height:fit-content;
  color:rgba(34,34,34,1);
  padding-top:1rem;
  background-image:url("http://www.hafafasha.com/img/bg/onas.jpg");
  background-size:auto 100%;
  background-repeat:no-repeat;
  background-position: right;
  padding-bottom:2rem;
}

#znajdz h2 {
  text-align:center;
  margin-top:0rem;
  margin-bottom:4rem;
  font-size:2rem;
  transform:rotate(-1deg);
  position:relative;
  z-index:4;
}

#znajdz article {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:5rem;
}

#znajdz p {
  width:calc(40 * var(--unit));
  max-width:90vw;
  font-size:calc(1 * var(--unit));
  text-shadow:1px 2px 2px rgb(255,255,255)
}




#znajdz ul {
  display:flex;
  width:100%;
  align-items:center;
  justify-content: space-around;
  list-style-type:none;
}

#znajdz img {
  height:10vw;
  filter:brightness(50%);
  transition:0.2s;
  opacity:0.6;
}

#znajdz a:hover img {
  filter:brightness(100%) drop-shadow(0 0 0.5rem rgba(0,0,0,0.5));
  opacity:1;
  
}


@media (orientation: portrait) {
  #znajdz ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
  }
  
  #znajdz li {
    display:flex;
    align-items: center;
    justify-content: center;
    padding:1rem 0;
  }
  
  #znajdz img {
    height:auto;
    width:20vw;
    filter:brightness(50%);
    transition:0.2s;
    opacity:0.6;
  }
}

#facebook {
  width:90%;
  display:flex;
  margin:0 10%;
  align-items:center;
  justify-content: center;
}

.fb-container {
  width: 500px;
  margin: 0 auto;
}

fb-page {
  margin:0 auto;
}