@charset "utf-8";
/* CSS Document */

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;  
  width: 100%;
  display: grid;
  place-items: center;
    
}

#background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

#background-video2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  display: none;
}

.circle-container  {
    position:fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.button {
  margin: 0;
  padding: 0;
  position: absolute;
  display: grid;
  place-items: center;
  width: 9vw;
  height: 9vw;
  border-radius: 50%;
  cursor: pointer;
  overflow:hidden;
  backdrop-filter: invert(100%);
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: 0.5;
  z-index: -1;
  mix-blend-mode: difference;
}

.button img {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width:80%; 
  height:80%;
  object-fit: cover;
}

#centerball { transform: translate(0em, 6.6em) ;}
    #deg0   { transform: translate(9em, 4em); } /* 12em = half the width of the wrapper */
    #deg180 { transform: translate(-9em,4em); }
    #deg225 { transform: rotate(225deg) translate(12em, -10em) rotate(-225deg); }
    #deg315 { transform: rotate(315deg) translate(12em, 10em) rotate(-315deg); }


@media screen and (max-device-width: 840px)
              and (min-device-width: 360px) {
  /* CSS for screens that are 840 pixels or less will be put in this section */

    #background-video2 {display:block;}
    #background-video {display:none;}
    
    .button {
  margin: 0;
  padding: 0;
  position: absolute;
  display: grid;
  place-items: center;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  cursor: pointer;
  overflow:hidden;
  backdrop-filter: invert(100%);
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: 0.5;
  z-index: -1;
  mix-blend-mode: difference;
}

.button img {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center; 
  width:50%; 
  height:50%;
  object-fit: cover;
}

 #centerball { transform: translate(0em, 8em) ;} 
    #deg0   { transform: translate(9em, 5em); } /* 12em = half the width of the wrapper */
    #deg180 { transform: translate(-9em,5em); }
  #deg225 { transform: rotate(225deg) translate(6em, -2em) rotate(-225deg); }
  #deg315 { transform: rotate(315deg) translate(6em, 2em) rotate(-315deg); }
}

@media screen and (max-device-width: 1920px)
              and (min-device-width: 841px) {
  /* CSS for screens that are 1920 to 840 pixels will be put in this section */

    
.button {
  margin: 0;
  padding: 0;
  position: absolute;
  display: grid;
  place-items: center;
  width: 7vw;
  height: 7vw;
  border-radius: 50%;
  cursor: pointer;
  overflow:hidden;
  backdrop-filter: invert(100%);
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: 0.5;
  z-index: -1;
  mix-blend-mode: difference;
}

.button img {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center; 
  width:50%; 
  height:50%;
  object-fit: cover;
}

#centerball { transform: translate(0em, 7.6em); }
    #deg0   { transform: translate(11.3em, 5em); } /* 12em = half the width of the wrapper */
    #deg180 { transform: translate(-11.3em,5em); }
    #deg225 { transform: rotate(225deg) translate(14em, -14em) rotate(-225deg); }
    #deg315 { transform: rotate(315deg) translate(14em, 14em) rotate(-315deg); }
}