up-start { perspective: 800px; display: flex; height: 30px; pointer-events: none; text-shadow: rgb(173, 173, 0) 2px 2px 0px; line-height: 30px; position: absolute;  }
html[lang|="he"] up-start {  top: 14px; right: 0px;}
html[lang|="en"] up-start {  top: 14px; left: 0px;}

ani-atarimnet { display: inline-block; justify-self: center; font-size: 60px; font-family: "Courier New"; color: var(--color); margin-inline-start: 35px; }
.shadow { text-shadow: var(--shadow) -2px 0px 1px, 
var(--shadow) -4px -1px 1px, 
var(--shadow) -6px -2px 1px, 
var(--shadow) -8px -3px 1px, 
var(--shadow) -10px -4px 1px, 
var(--shadow) -12px -5px 1px, 
var(--shadow) -14px -6px 1px, 
var(--shadow) -16px -7px 1px; }
.ani { animation-play-state: running; animation-name: atarimnet; animation-duration: 7s, 3.5s; animation-delay: 0s; animation-direction: alternate; animation-timing-function: ease; animation-composition: add; animation-iteration-count: infinite; }
@keyframes atarimnet { 
  0% { transform: perspective(350px) rotate3d(0, 1, 0, -36deg); }
  50% { transform: perspective(800px) rotate3d(0, 0, 0, 0deg); }
  100% { transform: perspective(350px) rotate3d(0, 1, 0, 36deg); }
}
up-end { display: block; background-image: radial-gradient(at 0% 0%, rgb(255, 255, 255) 7%, rgb(255, 255, 0) 10%, rgb(255, 0, 0) 12%, rgb(255, 255, 255) 13%, rgb(0, 0, 0) 26%); height: 300%; width: 100%; }
html[lang|="en"] up-end { transform: scaleX(-1); }
side-start { display: block; padding: 7px; }
side-start p { max-width: 100%; }
side-start a { font-style: oblique; text-shadow: rgb(0, 199, 0) 1px 1px 1px; }
side-start a:link { color: rgb(0, 148, 0); }
side-start a:visited { color: rgb(0, 148, 0); }
side-start a:hover { color: rgb(255, 0, 0); }
html[lang|="he"] side-start[lang|="en"] { display: none; }
side-box { display: flex; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-size: 14px; font-family: Arial; text-indent: 0px; margin: 12px; padding: 19px; border: 4px double rgb(0, 179, 0); border-radius: 7px; flex-direction: column; line-height: 18px; gap: 14px 0px; max-width: 280px; justify-self: center; }
side-title { display: block; font-size: 18px; font-weight: bold; text-shadow: rgb(122, 0, 0) 1px 1px 1px; }
html[lang|="en"] side-start[lang|="he"] { display: none; }
side-end { display: flex; padding: 7px; height: 100%; width: 100%; place-content: center; flex-flow: column wrap; }
side-end p { height: 80%; width: 40%; animation-name: mymove2; animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 10s; background-image: repeating-radial-gradient(circle at 0% 0%, rgb(255, 255, 255) 0%, rgb(0, 0, 255) 2%, rgb(0, 255, 0) 5%, rgb(255, 0, 0) 6%, rgb(0, 255, 255) 10%, rgb(255, 0, 255) 10%, rgb(255, 255, 0) 12%, rgb(0, 0, 0) 15%); border-radius: 50%; }
html[lang|="he"] side-end[lang|="en"] { display: none; }
html[lang|="en"] side-end[lang|="he"] { display: none; }
@media screen and (max-width: 1000px) {
ani-atarimnet { font-size: 50px; }
}
@media screen and (max-width: 850px) {
ani-atarimnet { font-size: 36px; }
}
@media screen and (max-width: 700px) {
ani-atarimnet { font-size: 30px; }
}
@media screen and (max-width: 650px) {
  up-start, up-end, side-start, side-end { display: none; }
}

@keyframes mymove2 { 
  0% { height: 20%; width: 80%; filter: grayscale(0%); }
  50% { height: 80%; width: 20%; filter: grayscale(50%); }
  99% { height: 20%; width: 80%; filter: grayscale(100%); }
}
@keyframes flipOutY { 
  0% { transform: perspective(200px); }
  20% { transform: perspective(180px) rotate3d(1, 0, 0, -15deg); }
  100% { transform: perspective(200px) rotate3d(1, 0, 0, 360deg); }
}
.flipOutY { animation-name: flipOutY; animation-play-state: running; animation-iteration-count: infinite; animation-delay: 0s; animation-duration: 5s; animation-direction: normal; animation-timing-function: ease-in-out; backface-visibility: visible; }