@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@100..900&display=swap');

button svg {height:.7em;}

/*

body {font-family: 'Rubik', sans-serif; font-size: 1.3em; background-color: #ccc; padding: 0; margin: 0; }
button {border:0 none; background:inherit; font-size:1em;}
a {transition: 0.3s;}

textarea {width:450px; height:300px; font-family: Tahoma; font-size: 1em;}
a.btn {text-decoration:none;}

#lcontrols {
	font-size: 1em; background:linear-gradient(240deg, #c6ffdd, #fbd786, #f7797d) #39CCCC; color: #000; box-shadow:0 0 5px #777;
	position: fixed; top: 0; right:0; height:100%; width:20%; padding: 0; z-index:5;
}
#lcontrols #logo {width:120px; padding:20px; margin:2em auto 0; border-radius:50%; background:#022507; overflow:hidden;}
#lcontrols #logo img {width:100%; object-fit:cover;}

#lcontrols ul {list-style:none; margin:2em 0 0; padding:0;}
#lcontrols li a, #lcontrols li button {padding: .3em 1em; cursor:pointer;}
#lcontrols li a {text-decoration:none; display:block; color:#000;}
#lcontrols li:hover {opacity:0.5;}

#lcontrols .disclaimer {color: #555; font-size:.7em; text-align:center; margin-top:4em; cursor:pointer;}
*/
#slideshow {
	display: none; position: fixed; top: 0; right: 0; height: 100%; width: 100%;
	cursor: default; -moz-user-select: none; background: #000 no-repeat;
	-moz-background-size: 100%; -webkit-background-size: 100%; -o-background-size: 100%;
	text-align:center;margin:0 auto; z-index:5;
}
#slideshow #chords_container {left: 5%; position: absolute; top: 3em; width:25%; display:none;}
#slideshow #chords_container #chords {font-size:1.3em; text-align:left; direction:ltr;  font-family: 'Comfortaa', cursive; font-weight:bold;}
#chords_container #chords_control {direction:rtl; transform: rotate(-90deg); position: absolute; left: -6em; top: 3em;}
#chords_container #chords_control #capon {margin:0 1em; font-size:1.5em;}
#slideshow #chords_container #capo_plus, #slideshow #chords_container #capo_minus {cursor:pointer;} 

.chrd {direction:ltr; color: yellow; position:absolute; font-size: 0.4em; line-height: 0; font-family: 'Comfortaa', cursive; font-weight:bold;}
.chrd.standalone {position:inherit;}

#bgimg {
	position:fixed; top:0; height:90%; width:40%; right:30%; opacity: 0.2;
	background: -moz-radial-gradient(50% 0, farthest-side, #ffffcc, #000);
	background: -webkit-radial-gradient(50% 0, farthest-side, #ffffcc, #000);
}

#slideshow {font-family: "Noto Sans Hebrew", "Drugulin CLM", "Tahoma", sans-serif;}
#slideshow_overlay {display:none;position: fixed; top:0; left:0; width: 100%; height: 100%; z-index: 1000; background: #777;}
#slideshow_overlay.white {background:#fff; color:#000;}
#slideshow_overlay.black {background:#000; color:#fff;}

#slideshow #slideshow_header {position: relative;z-index: 3;color: #F6E59E; text-shadow: 3px 3px 3px #aaa; font-size: 24pt; margin-right:2em; text-align:right;}
#slideshow #slideshow_num {position: absolute; top: 5%; left: 5%; font-size: 2em; }
#slideshow #slideshow_credit {position: absolute; bottom: 5%; width:100%; display:block; text-align:center; font-size: 1.em; color:#ddd;}
#slideshow_text {
	position: relative; z-index: 5; line-height: 1.25em; font-size: 3em;
	/*font-size: calc(3vw + 3vh + 1vmin);*/
	color: #fff;
	text-shadow: 3px 3px 4px #000; display: inline-block; margin:.5em auto 0; text-align:right;
}

#slideshow_info {box-sizing: border-box; position:fixed; bottom:0; right:0; width:100%; height:2em; line-height:2em; text-align:right; padding-right:1em;}
#slideshow_info button {border: 0 none; background: inherit; font-size: 1em;cursor:pointer; vertical-align: middle; margin-bottom:.3em;}
#slideshow_info .song-name {font-weight:bold;}

#slideshow_info .settings {float:left; display:inline;}

#slideshow_info .show-chords {color:inherit; cursor:pointer;}
#slideshow_info .change-theme {width:3em;}

#slideshow_info .report-btn {margin-left:3em; cursor:pointer; border:0 none; background:inherit;}
#slideshow_info .report-btn svg {height:1em; margin-top:.2em;}
#slideshow_info .pagination {float:left; margin-left:1em;}

#playlist_editor {top:75px; box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, 0.3);}

#playlist_editor .song-card {display:list-item;}

#playlist_editor .song-card .song-name {}
#playlist_editor .song-card .song-credit {display:none;}

#playlist_editor_list {max-height: 20em; overflow-y: scroll;}
#playlist_editor_list li .btn-close {margin-top: .7rem; margin-left: -1em; height: .5rem; width: .5rem;}

.song2playlist-btn {
    width:30px;height:30px;font-size:14px; line-height:0; position:absolute; left:1em;
    border:3px solid red; border-radius:50%; color:red;
    visibility:hidden; transition: transform 0.2s ease-out;
}

.song2playlist-btn:hover {
  animation: wobble 0.8s cubic-bezier(.36, .07, .19, .97) both;
  transform: translate3d(0, 0, 0); /* Ensures smooth animation */
  backface-visibility: hidden; /* Prevents flickering */
  perspective: 1000px; /* Provides 3D context for transform */
}

.song-card:hover .song2playlist-btn {visibility:visible;}

@keyframes wobble {
  10%, 90% {transform: translate3d(-1px, 0, 0);}
  20%, 80% {transform: translate3d(2px, 0, 0);}
  30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}
  40%, 60% {transform: translate3d(4px, 0, 0);}
}

/*
#slideshow_editor {
    position:fixed; left:1em; top:3em; width:10em; border-radius:.3em;
    background: purple; color: #fff; padding: 1em; text-align:center;
}
#slideshow_editor h1 {margin:0; font-size:18pt;}
#slideshow_editor h2 {margin:0; font-size:14pt;}
#slideshow_editor_list {min-height:6em; max-height:10em; overflow:scroll; text-align:right; color:purple; background:#fff; font-size:.7em;}

#slideshow_editor .btn {font-size:14pt; line-height:14pt; cursor:pointer; padding:.5em; border-radius:5px; background:#eee; color:black;}
#slideshow_editor .btn button:hover {opacity:0.8;}
#slideshow_editor #slideshow_editor_start_show {background:orange;}
#slideshow_editor_clear {}
*/