@import url('https://fonts.googleapis.com/css2?family=Gveret+Levin&family=Handjet:wght,ELSH@100..900,2&family=IBM+Plex+Sans+Hebrew:wght@100;200;300;400;500;600;700&display=swap');

body {background-image: url("./b1.png"); font-family: "IBM Plex Sans Hebrew", sans-serif;
      position: relative; margin:0; padding:0; display: flex; justify-content: center;}

.border {/*border: 2px dashed black;*/
         border-top-style: none; border-bottom-style: none;
         width: 600px; }

.header {background-color: black;
         height: 60px; width: 600px;
         box-sizing: border-box; justify-content: left; display: flex;}

.header img {object-fit: cover; width: 55px; height: 45px; padding: 10px; margin-top: -15px;}

.header a {font-family: "Handjet"; color: white; 
           font-size: 35px; padding: 10px 0px; margin: 0; text-decoration: none; margin: 0px 6px;

           &.grow {
        transition: all .2s ease-in-out;

        &:hover {
          transform: scale(1.1);
        }
      }
          }
           
.header a:hover {
  text-decoration: none;
  color: white;}

.header a:active {
  text-decoration: none;}

.p {background-color: white;
     width: 600px; position: relative;
     padding: 10px; margin-left: 0;
     box-sizing: border-box; min-height: 700px;}

.m { width: 205px;
     box-sizing: border-box; position: sticky; top: 0;}

.m iframe {border: none; width: 200px; height: 500px;
           position: sticky; top: 0; box-sizing: border-box;}

.f { position: relative; padding: 10px;
     box-sizing: border-box; background-color: white;}

.f a {font-family: "Handjet"; color: #5f5f5f; padding: 5px 5px;}

.f button {border: 2px solid black; border-radius: 5px; padding: 5px;
           font-family: "IBM Plex Sans Hebrew", sans-serif;}

h2 {color: #75696a;
     font-family: "Handjet"; font-weight: 400; font-size: 30px; 
     justify-content: center; display: flex; margin:0; padding:3px 0px;}

p {margin:0; padding: 5px 8px;}

a {color: gray;}

a:link {
  text-decoration: none;}

a:visited {
  text-decoration: none;}

a:hover {
  text-decoration: underline;
  color: black;}

a:active {
  text-decoration: none;}

.box{
  color: #75696a;
  font-family: "Gveret Levin"; font-size: 28px; 
  position: relative;
  top: 0; left: 0;
  right: 0; bottom: 0;
  display: flex; 
  justify-content: center;
  align-items: center;
}
.box span{
  padding: 0px 10px;
  position: relative;
  top: 0px;
  display: inline-block;
  animation: bounce 0.5s ease infinite alternate;
}

@keyframes bounce{
  100%{
    top: -5px;
  }
}
.box span:nth-child(2){
  animation-delay:0.1s;
}
.box span:nth-child(3){
  animation-delay:0.2s;
}
.box span:nth-child(4){
  animation-delay:0.3s;
}

.marquee {
  direction: ltr; display: flex;
  block-size: var(--marquee-item-height);
  padding-block: 5px;
  position: relative;
  overflow-x: hidden;
}

.marquee--8 {
  --marquee-item-width: 88px;
  --marquee-item-height: 42px;
  --marquee-duration: 36s;
  --marquee-items: 8;
}

.marquee__item {
  --marquee-item-offset: max(
    calc(var(--marquee-item-width) * var(--marquee-items)),
    calc(100% + var(--marquee-item-width))
  );
  --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);
  position: absolute;
  inset-inline-start: var(--marquee-item-offset);
  transform: translateX(-50%);
  animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
}
.marquee--8 .marquee__item:nth-of-type(1) {
  --marquee-item-index: 1;
}
.marquee--8 .marquee__item:nth-of-type(2) {
  --marquee-item-index: 2;
}
.marquee--8 .marquee__item:nth-of-type(3) {
  --marquee-item-index: 3;
}
.marquee--8 .marquee__item:nth-of-type(4) {
  --marquee-item-index: 4;
}
.marquee--8 .marquee__item:nth-of-type(5) {
  --marquee-item-index: 5;
}
.marquee--8 .marquee__item:nth-of-type(6) {
  --marquee-item-index: 6;
}
.marquee--8 .marquee__item:nth-of-type(7) {
  --marquee-item-index: 7;
}
.marquee--8 .marquee__item:nth-of-type(8) {
  --marquee-item-index: 8;
}
@keyframes go {
  to {
    inset-inline-start: calc(var(--marquee-item-width) * -1);
  }
}
.marquee:hover .marquee__item {
  animation-play-state: paused;
}

.tabs {
	display: flex;
	flex-wrap: wrap;
}
.tabs label {
	order: 1; font-family: "Handjet"; font-size: 20px;
	display: block;
	padding: 10px;
	cursor: pointer;
  background-color: #fff;
  transition: background ease 0.2s;
  border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.tabs .tab {
  background-color: #fff;
  border-radius: 10px; border-top-right-radius: 0;
  border: 5px solid #d0d2d3;
  order: 99;
  flex-grow: 1;
	width: 100%;
	display: none;
  padding: 10px;
}
.tabs input[type="radio"] {
	display: none;
}
.tabs input[type="radio"]:checked + label {
	background: #d0d2d3;
}
.tabs input[type="radio"]:checked + label + .tab {
	display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}