:root {
  --text-color:#383838;
  --light-color:hsl(210, 55%, 49%);
  --alt-color:hsl(210, 55%, 22%);
  --cta-color:hsl(345, 91%, 57%);
  --ring-play:hsl(0, 0%, 63%);
  --shadow-color:rgba(0, 0, 0, 0.18);
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Epilogue';
  box-sizing: border-box;
  font-weight: 300;
  font-size: .9rem;
  /* padding: 1rem 1rem; */
  /* margin: 0 auto; */
  /* width: clamp(380px, 96vw, 1000px); */
  text-shadow: none !important;
  color: var(--text-color);
}
h1 {
  font-weight: 900;
  font-size: 3rem;
}
h2 {
  margin-top: 1rem;
  padding-top: 4rem;
}
p {
  line-height: 1.3rem;
  text-align: justify;
}
a {
  cursor: pointer;
  text-decoration: none !important;
}
button {
  text-decoration: none;
  border: none;
  padding: .4rem 2rem;
  font-size: .8rem;
  background-color: var(--cta-color);
  color: white;
  border-radius: .15rem;
  transition: all 50ms ease-in-out;
  box-shadow: var(--shadow-color) .6rem .6rem .7rem;
  cursor: pointer;
  user-select:none;
}
button:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-color) .8rem .8rem 1rem;
}
button:active {
  transform: scale(0.95);
}



/* ////////////////////////////////////    NAV   PARENT   RIGHT    LEFT //////////////////////////// */

/* ///////////////////////////////////PARENT + CONTAINER GRID ETC.........../////////////////////////// */
nav {
  position: fixed;
  top:0;
  background-color: white;
  width: 100vw;
  padding: .8rem;
  z-index: 10;
}
nav a {
  cursor: pointer;
}
.parent {
  width:100vw;
  display: grid;
  grid-template-columns: auto 1fr auto ;
  grid-template-rows: auto 1fr 0px;
  height: 100%;
}
.container {
  grid-column: 2 / 3;
  overflow:scroll;
  scroll-behavior: smooth;
  padding: 1rem;
  text-align: center;
}

.left {
  grid-column: 1/2;
}
.right {
  grid-column: 3 / 4;
}
.left, .right {
    min-height: 400px;
}
iframe {
  border: none;
}






.wrap {
  /* display: flex;
  justify-content: center;
  gap:2rem; */
  text-align: center;
  margin:auto;
  z-index: 20 !important;
  background: white;
  /* padding: 1.2rem .4rem 1rem .4rem; */
  /* box-shadow: 10px 10px 20px 0px var(--shadow-color); */
  border-radius: 6px;
  text-shadow: none !important;
  color: rgba(0, 0, 0, 0.8);
  width:fit-content;
}

@keyframes spin {
  to {transform: rotate(.5turn);}
}
@keyframes bg {
  50% {background: #2CBB32;}
}
/*#DC3545*/


.cache {
  opacity: 0;
  transition: all 500ms ease-in-out;
}

.center {
  text-align: center;
}

/* The animation code */
@keyframes cligno {
  0%   {opacity:1;}
  100% {opacity:0;}
}


.abcr {
  fill: #d00000;
  fill-opacity: 0;
  z-index: 15;
}

rect.abcr._28_  {
  display:none !important;
}

.nomNote {
  font-style: italic;
  font-weight: bold;
}

.cont {
  text-align: center;
  position: relative;
  width:300px;
  left: calc(50% - 150px);
  /* background-color: pink; */

  border: solid black 2px;
}

/*#target {
  background-color: pink !important;
}*/

/* #target rect {
  position: relative;
  margin:auto 0;
} */


#target svg {
position: relative;
width:300px;
height:200px;
}
.music {
  position: relative;
  translate:0 -80px;
}

#target svg:first-child:first-child .music > text.f2_1 {
  display:none;
}
#target svg:first-child:first-child .music:first-child > g {
  display:none;
}
#target svg:first-child:first-child .music > g > text {
  display:none !important;
  content: none;
  opacity: 0 !important;
}


.hide {
  display: none !important;
}

.signal {
  position: absolute;
  top: 70%;
  font-size: 3rem;
  z-index: 2;
}
.boop {
  animation: .5s clignote linear 2 forwards;
}
@keyframes clignote {
  0% {
    opacity: 0%;
  }
  30% {
    opacity: 1;
    rotate: 32deg;
  }
  40% {
    opacity: 0.5;
  }
  70% {
    opacity: 1;
    rotate: -80deg;
  }
  100% {
    opacity: 0;
    rotate:0;
  }
}

.keys{
position: relative;
display: block;
padding: 0 ;
/*width: 800px ;*/
height: 200px;
/*bottom: 54px ;
top: 0 ;*/
text-align: center;
margin-left: auto;
margin-right: auto;
/*background-color: orange !important;*/
/*opacity:0.9 ;*/
z-index:2 ;
}
.bet>path:hover{
  cursor: pointer;
}

.bet>path:hover {
  stroke : black !important;
  stroke-width:4px !important;
}

@media screen and (max-width: 920px) {
  
    .parent {
      grid-template-rows: 1fr 0px;
      gap: 0;
      padding:0;
    }
   
  
    .left, .right {
      display:none;
    }
  }