@import url('https://fonts.googleapis.com/css2?family=Blaka&display=swap'); /*font-family: 'Blaka', cursive;*/ @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@700&display=swap'); /*font-family: 'Amiri', serif;*/ @import url('https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap'); /*font-family: 'Kdam Thmor Pro', sans-serif;*/ * { padding:0; margin:0; } html { font-family:'Times New Roman',Georgia; text-align:center;} body { background-color:#9b5de5; color:#FF006E; } header { background-color:#FFBE0B; outline:0.5px solid white; font-size:18px; color:white; text-shadow:1px 1px 3px black; padding:15px 0; } .menu { padding-top:0; margin:5px; color:black; font-size:30px; font-weight:bold; font-family:'Verdana'; text-shadow:1px 1px 3px black; } .menu:hover { cursor:pointer; color:white; transition-duration:1s; transition-timing-function: ease; } .m { -moz-transform:rotate(180deg); -o-transform:rotate(180deg); -webkit-transform:rotate(180deg); -ms-transform: rotate(180deg); transform:rotateX(180deg); } .menu-geral { position:absolute; width:300px; height:500px; outline:0.5px solid #333; background-color:#a2d2ff; margin-top:12px; z-index:2; display:none; } .seta { padding-right:30px; -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform:rotate(-90deg); transition-duration:0s; } .opcoes { position:absolute; width:100px; border:1px solid black; background-color:#FB5607; margin-top:10px; margin-left:-40px; z-index:2; display:none; } h2 {font-family: 'Blaka', cursive; font-size:50px; color:#3A86FF; text-shadow: 0.1px 0.7px 5px black;} details {width:500px; margin:auto; background-color:rgba(255,255,255, 0.05); margin-bottom:5px; } details p {font-size:20px; font-weight:lighter; text-shadow:0.2px 0.2px 1px gray;} summary { list-style-type: ''; cursor:help;} #div_notas_guitarra {width:450px; margin:auto;} #div_notas_guitarra button { width:400px; height:35px; font-family: 'Amiri', serif; color:HotPink; font-size:20px; font-weight:lighter; cursor:pointer; margin-top:10px; margin-bottom:10px;} #div_notas_guitarra_rock div {display:inline-block; width:50px; height:50px; cursor:grab; background-color:Orange; font-size:20px; margin:1px;} #div_notas_guitarra_rock div:active {background-color:DarkOrange; cursor:grabbing;} #div_notas_guitarra_blues div {display:inline-block;} #div_notas_guitarra_blues div {display:inline-block; width:50px; height:50px; background-color:DeepSkyBlue; font-size:20px; margin:1px; cursor:grab; } #div_notas_guitarra_blues div:active {background-color:DodgerBlue; cursor:grabbing;} #div_notas_triangulo div {display:inline-block; background-image: url("instru/triangulo/tg.png"); font-family: 'Kdam Thmor Pro', sans-serif; font-size:27px; color:black; text-shadow:1px 1px 10px white; margin:2px; cursor:grab;} #div_notas_triangulo div:active { cursor:grabbing; } #div_notas_triangulo div:nth-child(1) {background-size: 45px; width: 45px; background-position: center; background-repeat: no-repeat; } #div_notas_triangulo div:nth-child(2) {background-size: 45px; width: 45px; background-position: center; background-repeat: no-repeat; } #div_notas_triangulo div:nth-child(3) {background-size: 45px; width: 45px; background-position: center; background-repeat: no-repeat; } #div_notas_triangulo div:nth-child(4) {background-size: 45px; width: 45px; background-position: center; background-repeat: no-repeat; } #div_notas_triangulo div:nth-child(5) {background-size: 45px; width: 45px; background-position: center; background-repeat: no-repeat; } #div_notas_triangulo div:nth-child(6) {background-size: 45px; width: 45px; background-position: center; background-repeat: no-repeat; } #div_notas_triangulo div:nth-child(7) {background-size: 45px; width: 45px; background-position: center; background-repeat: no-repeat; } #div_notas_triangulo div:nth-child(8) {background-size: 45px; width: 45px; background-position: center; background-repeat: no-repeat; } #div_notas_triangulo div:nth-child(9) {background-size: 45px; width: 45px; background-position: center; background-repeat: no-repeat; } #div_notas_triangulo div:nth-child(10) {background-size: 45px; width: 45px; background-position: center; background-repeat: no-repeat; } #div_button_triangulo { margin-bottom:5px; margin-top:5px; } .tri { width:400px; height:60px; font-size:40px; -webkit-border-radius: 8; border-radius: 8px; -moz-box-shadow: 1px 1px 4px #666666; -webkit-box-shadow: 1px 1px 4px #666666; box-shadow: 1px 1px 4px #666666; color: #ffffff; outline: solid #D3D3D3 2px; } .tri_lig { background-color:#45c42b; } .tri_lig:hover { background-color:#59b538; } .tri_des { background-color:#c72a2a; } .tri_des:hover { background-color:#b31717; } .flip-container { display:inline-block; width:400px; height:60px; perspective:1000px; } .flipper { position:relative; width:100%; height:100%; transition: transform 0.8s; transform-style: preserve-3d; } #switch{ display:none; } #switch:checked ~ .flip-container .flipper { transform: rotateY(180deg); } .front, .back { position:absolute; width:100%; height:100%; backface-visibility:hidden; } .back { transform: rotateY(180deg); } #div_notas_gaita { margin:7.5px;} #div_notas_gaita div { position:relative; display:inline-block; width:50px; height:40px; font-size:30px; color:#2DE3E0; background-color:white; outline:2px solid black; margin:2px; cursor:grab; z-index: 1; } #div_notas_gaita div::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 0; background-color: black; z-index: -1; transition: all 250ms; } #div_notas_gaita div:hover::before { width: 100%; } #div_notas_gaita div:active { cursor:grabbing; background-color:#111; } #div_notas_gaita div:active::before { background-color:#363636; } .btng { display:inline-flex; height:70px; width:350px; transform: skew(-30deg); background-color:green; color:white; margin:5px; text-decoration:none; font-size:50px; letter-spacing:1.5px; align-items:center; justify-content:center; overflow:hidden; } #button_gaita { position:relative; overflow:hidden; cursor:pointer; } #button_gaita p { transform: skew(30deg); } #btn_des_gaita { width:100%; height:100%; background:red; left:-350px; position:absolute; padding:0; display:flex; align-items:center; justify-content:center; bottom:0; transition: all .35s ease-Out; z-index:2; } #botão-piano { width:500px; margin:5px auto; } #botão-piano input { float:left; } #botão-piano div { cursor:pointer; display:inline-block; width:120px; outline:1px black solid; margin:-2px; color:white;} #botão-piano div:nth-child(2) { background-color:green; } #botão-piano div:nth-child(3) { background-color:blue; } #botão-piano div:nth-child(4) { background-color:red; } ul { -ms-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1);} ul li p { -ms-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1);} ul { height:250px; width:475px; margin:15px auto; padding:10px 0 0 10px; position:relative; outline:1px solid black; border-radius: 0 0 5px 5px; background-color: black; box-shadow:0 0 10px rgba(0,0,0,0.5) inset,0 1px rgba(212,152,125,0.2) inset,0 5px 10px rgba(0,0,0,0.5); } li { list-style:none; position:relative; float:left; } ul .key-white { cursor:grab; color:black; height:245px; width:64px; z-index:1; border-left:1px solid #bbb; border-bottom:1px solid #bbb; border-radius:0 0 2px 2px; box-shadow:-1px 0 0 rgba(255,255,255,0.8) inset,0 0 2px #ccc inset,0 0 1px rgba(0,0,0,0.2); background:white; } ul .key-white:active { cursor:grabbing; border-top:1px solid #777; border-left:1px solid #999; border-bottom:1px solid #999; box-shadow:2px 0 3px rgba(0,0,0,0.1) inset,-5px 5px 20px rgba(0,0,0,0.2) inset,0 0 3px rgba(0,0,0,0.2); background:linear-gradient(to bottom,#BFBFE6 0%,#8080CC 100%); } .key-black { cursor:grab; color:white; height:128px; width:32px; margin:0 0 0 -16px; z-index:2; border:1px solid #000; border-radius:0 0 2px 2px; box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset,0 -5px 2px 3px rgba(0,0,0,0.6) inset,0 2px 4px rgba(0,0,0,0.5); background:linear-gradient(45deg,#222 0%,#555 100%); } .key-black:active { cursor:grabbing; box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset,0 -2px 2px 3px rgba(0,0,0,0.6) inset,0 1px 2px rgba(0,0,0,0.5); background:linear-gradient(to right,#444 0%,#222 100%); } .a,.g,.f,.d,.c { margin:0 0 0 -16px; } .e {margin: 0 0 0 2px;} #div_type { width:460px; margin:auto; margin-bottom:7.5px; margin-top:7.5px; } #div_type div { cursor:pointer; display:inline-flex; width:110px; height:50px; outline:2.4px solid #e6007a; background-color:#ff1493; color:white; font-size:25px; font-weight:bold; align-items:center; justify-content:center; } #div_type div:focus { outline-color:blue; } #div_c0 { display: inline-block; width:40px; height:100px; overflow:hidden; outline:2px solid black; margin:auto; margin-bottom:7.5px; margin-top:7.5px; transition:width, height; transition-duration:2s; } #dbp_c0 { width:40px; } #dbn_c0 { width:100%; display:none; float:right; transition:display; transition-duration:2s;} #div_c0 div p { cursor:pointer; display:table-cell; vertical-align:middle; width:40px; height:100px; background-color:white; color:lightgray; transition:height; transition-duration:2s;} #div_c0 div div { cursor:grab; display:inline-flex; width:80px; height:80px; border-radius:50%; outline:2px solid black; margin:5px; align-items:center; justify-content:center; font-size:23px;} #div_c0 div div:active { cursor:grabbing; filter:brightness(90%); } #div_c0 div div:focus { outline-color:blue; } #div_c0 div div:nth-child(1) {background-color:Green; color:White;} #div_c0 div div:nth-child(2) {background-color:Cyan; color:black;} #div_c0 div div:nth-child(3) {background-color:Blue; color:White;} #div_c0 div div:nth-child(4) {background-color:Purple; color:White;} #div_c0 div div:nth-child(5) {background-color:Pink; color:black;} #div_c0 div div:nth-child(6) {background-color:Yellow; color:black;} #div_c0 div div:nth-child(7) {background-color:Orange; color:black;} #div_c0 div div:nth-child(8) {background-color:Red; color:black;} #div_c0 div div:nth-child(9) {background-color:Maroon; color:White;} #div_c0 div div:nth-child(10) {background-color:Black; color:White;} #div_c0 div div:nth-child(10):focus {outline-color:blue;} #div_c0 div div:nth-child(11) {background-color:Gray; color:black;} #div_c0 div div:nth-child(12) {background-color:White; color:black;} #div_c1 { display: inline-block; width:40px; height:100px; overflow:hidden; outline:2px solid black; margin:auto; margin-bottom:7.5px; margin-top:7.5px; transition:width, height; transition-duration:2s; } #dbp_c1 { width:40px; } #dbn_c1 { width:100%; float:right; display:none; transition:display; transition-duration:2s;} #div_c1 div p { cursor:pointer; display:table-cell; vertical-align:middle; width:40px; height:100px; background-color:lightgray; color:silver; transition:height; transition-duration:2s; } #div_c1 div div { cursor:grab; display:inline-flex; width:80px; height:80px; border-radius:50%; outline:2px solid black; margin:5px; align-items:center; justify-content:center; font-size:23px;} #div_c1 div div:active { cursor:grabbing; filter:brightness(90%); } #div_c1 div div:focus { outline-color:blue; } #div_c1 div div:nth-child(1) {background-color:ForestGreen; color:White;} #div_c1 div div:nth-child(2) {background-color:Aqua; color:black;} #div_c1 div div:nth-child(3) {background-color:MediumBlue; color:White;} #div_c1 div div:nth-child(4) {background-color:DarkMagenta; color:White;} #div_c1 div div:nth-child(5) {background-color:LightPink; color:black;} #div_c1 div div:nth-child(6) {background-color:Gold; color:black;} #div_c1 div div:nth-child(7) {background-color:DarkOrange; color:black;} #div_c1 div div:nth-child(8) {background-color:Crimson; color:black;} #div_c1 div div:nth-child(9) {background-color:Brown; color:White;} #div_c1 div div:nth-child(10) {background-color:Black; color:White; outline-color:white; } #div_c1 div div:nth-child(10):focus {outline-color:blue;} #div_c1 div div:nth-child(11) {background-color:DimGray; color:black;} #div_c1 div div:nth-child(12) {background-color:Snow; color:black;} #div_c2 { display: inline-block; width:40px; height:100px; overflow:hidden; outline:2px solid black; margin:auto; margin-bottom:7.5px; margin-top:7.5px; transition:width, height; transition-duration:2s; } #dbp_c2 { width:40px; } #dbn_c2 { width:100%; float:right; display:none; transition:display; transition-duration:2s;} #div_c2 div p { cursor:pointer; display:table-cell; vertical-align:middle; width:40px; height:100px; background-color:aqua; color:DarkTurquoise; transition:height; transition-duration:2s; } #div_c2 div div { cursor:grab; display:inline-flex; width:80px; height:80px; border-radius:50%; outline:2px solid black; margin:5px; align-items:center; justify-content:center; font-size:23px;} #div_c2 div div:active { cursor:grabbing; filter:brightness(90%); } #div_c2 div div:focus { outline-color:blue; } #div_c2 div div:nth-child(1) {background-color:SeaGreen; color:White;} #div_c2 div div:nth-child(2) {background-color:LightCyan; color:black;} #div_c2 div div:nth-child(3) {background-color:RoyalBlue; color:White;} #div_c2 div div:nth-child(4) {background-color:BlueViolet; color:White;} #div_c2 div div:nth-child(5) {background-color:PaleVioletRed; color:black;} #div_c2 div div:nth-child(6) {background-color:LightYellow; color:black;} #div_c2 div div:nth-child(7) {background-color:Coral; color:black;} #div_c2 div div:nth-child(8) {background-color:IndianRed; color:black;} #div_c2 div div:nth-child(9) {background-color:Sienna; color:White;} #div_c2 div div:nth-child(10) {background-color:Black; color:Snow; outline-color:Snow; } #div_c2 div div:nth-child(10):focus {outline-color:blue;} #div_c2 div div:nth-child(11) {background-color:DarkGray; color:black;} #div_c2 div div:nth-child(12) {background-color:HoneyDew; color:black;} #div_c3 { display: inline-block; width:40px; height:100px; overflow:hidden; outline:2px solid black; margin:auto; margin-bottom:7.5px; margin-top:7.5px; transition:width, height; transition-duration:2s; } #dbp_c3 { width:40px; } #dbn_c3 { width:100%; display:none; float:right; transition:display; transition-duration:2s;} #div_c3 div p { cursor:pointer; display:table-cell; vertical-align:middle; width:40px; height:100px; background-color:DarkBlue; color:MediumBlue; transition:height; transition-duration:2s;} #div_c3 div div { cursor:grab; display:inline-flex; width:80px; height:80px; border-radius:50%; outline:2px solid black; margin:5px; align-items:center; justify-content:center; font-size:23px;} #div_c3 div div:active { cursor:grabbing; filter:brightness(90%); } #div_c3 div div:focus { outline-color:blue; } #div_c3 div div:nth-child(1) {background-color:MediumSeaGreen; color:White;} #div_c3 div div:nth-child(2) {background-color:PaleTurquoise; color:black;} #div_c3 div div:nth-child(3) {background-color:DodgerBlue; color:White;} #div_c3 div div:nth-child(4) {background-color:DarkViolet; color:White;} #div_c3 div div:nth-child(5) {background-color:DeepPink; color:black;} #div_c3 div div:nth-child(6) {background-color:LemonChiffon; color:black;} #div_c3 div div:nth-child(7) {background-color:Tomato; color:black;} #div_c3 div div:nth-child(8) {background-color:LightCoral; color:black;} #div_c3 div div:nth-child(9) {background-color:SaddleBrown; color:White;} #div_c3 div div:nth-child(10) {background-color:Black; color:HoneyDew; outline-color:HoneyDew; } #div_c3 div div:nth-child(10):focus {outline-color:blue;} #div_c3 div div:nth-child(11) {background-color:Silver; color:black;} #div_c3 div div:nth-child(12) {background-color:MintCream; color:black;} #div_c4 { display: inline-block; width:40px; height:100px; overflow:hidden; outline:2px solid black; margin:auto; margin-bottom:7.5px; margin-top:7.5px; transition:width, height; transition-duration:2s; } #dbp_c4 { width:40px; } #dbn_c4 { width:100%; display:none; float:right; transition:display; transition-duration:2s;} #div_c4 div p { cursor:pointer; display:table-cell; vertical-align:middle; width:40px; height:100px; background-color:DarkGreen; color:Green; transition:height; transition-duration:2s;} #div_c4 div div { cursor:grab; display:inline-flex; width:80px; height:80px; border-radius:50%; outline:2px solid black; margin:5px; align-items:center; justify-content:center; font-size:23px;} #div_c4 div div:active { cursor:grabbing; filter:brightness(90%); } #div_c4 div div:focus { outline-color:blue; } #div_c4 div div:nth-child(1) {background-color:SpringGreen; color:White;} #div_c4 div div:nth-child(2) {background-color:Aquamarine; color:black;} #div_c4 div div:nth-child(3) {background-color:DeepSkyBlue; color:White;} #div_c4 div div:nth-child(4) {background-color:DarkOrchid; color:White;} #div_c4 div div:nth-child(5) {background-color:MediumVioletRed; color:black;} #div_c4 div div:nth-child(6) {background-color:LightGoldenRodYellow; color:black;} #div_c4 div div:nth-child(7) {background-color:OrangeRed; color:black;} #div_c4 div div:nth-child(8) {background-color:DarkSalmon; color:black;} #div_c4 div div:nth-child(9) {background-color:Chocolate; color:White;} #div_c4 div div:nth-child(10) {background-color:Black; color:MintCream; outline-color:MintCream; } #div_c4 div div:nth-child(10):focus {outline-color:blue;} #div_c4 div div:nth-child(11) {background-color:LightGray; color:black;} #div_c4 div div:nth-child(12) {background-color:Azure; color:black;} #div_c5 { display: inline-block; width:40px; height:100px; overflow:hidden; outline:2px solid black; margin:auto; margin-bottom:7.5px; margin-top:7.5px; transition:width, height; transition-duration:2s; } #dbp_c5 { width:40px; } #dbn_c5 { width:100%; display:none; float:right; transition:display; transition-duration:2s;} #div_c5 div p { cursor:pointer; display:table-cell; vertical-align:middle; width:40px; height:100px; background-color:Red; color:#e77e7e; transition:height; transition-duration:2s;} #div_c5 div div { cursor:grab; display:inline-flex; width:80px; height:80px; border-radius:50%; outline:2px solid black; margin:5px; align-items:center; justify-content:center; font-size:23px;} #div_c5 div div:active { cursor:grabbing; filter:brightness(90%); } #div_c5 div div:focus { outline-color:blue; } #div_c5 div div:nth-child(1) {background-color:MediumSpringGreen; color:White;} #div_c5 div div:nth-child(2) {background-color:MediumAquaMarine; color:black;} #div_c5 div div:nth-child(3) {background-color:CornflowerBlue; color:White;} #div_c5 div div:nth-child(4) {background-color:DarkSlateBlue; color:White;} #div_c5 div div:nth-child(5) {background-color:Fuchsia; color:black;} #div_c5 div div:nth-child(6) {background-color:PapayaWhip; color:black;} #div_c5 div div:nth-child(7) {background-color:Orange; color:black;} #div_c5 div div:nth-child(8) {background-color:Salmon; color:black;} #div_c5 div div:nth-child(9) {background-color:Peru; color:White;} #div_c5 div div:nth-child(10) {background-color:Black; color:Azure; outline-color:Azure; } #div_c5 div div:nth-child(10):focus {outline-color:blue;} #div_c5 div div:nth-child(11) {background-color:Gainsboro; color:black;} #div_c5 div div:nth-child(12) {background-color:AliceBlue; color:black;} #div_c6 { display: inline-block; width:40px; height:100px; overflow:hidden; outline:2px solid black; margin:auto; margin-bottom:7.5px; margin-top:7.5px; transition:width, height; transition-duration:2s; } #dbp_c6 { width:40px; } #dbn_c6 { width:100%; display:none; float:right; transition:display; transition-duration:2s;} #div_c6 div p { cursor:pointer; display:table-cell; vertical-align:middle; width:40px; height:100px; background-color:DarkOrange; color:Orange; transition:height; transition-duration:2s;} #div_c6 div div { cursor:grab; display:inline-flex; width:80px; height:80px; border-radius:50%; outline:2px solid black; margin:5px; align-items:center; justify-content:center; font-size:23px;} #div_c6 div div:active { cursor:grabbing; filter:brightness(90%); } #div_c6 div div:focus { outline-color:blue; } #div_c6 div div:nth-child(1) {background-color:LightGreen; color:White;} #div_c6 div div:nth-child(2) {background-color:Turquoise; color:black;} #div_c6 div div:nth-child(3) {background-color:SkyBlue; color:White;} #div_c6 div div:nth-child(4) {background-color:SlateBlue; color:White;} #div_c6 div div:nth-child(5) {background-color:Violet; color:black;} #div_c6 div div:nth-child(6) {background-color:Moccasin; color:black;} #div_c6 div div:nth-child(7) {background-color:DarkOrange; color:black;} #div_c6 div div:nth-child(8) {background-color:LightSalmon; color:black;} #div_c6 div div:nth-child(9) {background-color:SandyBrown; color:White;} #div_c6 div div:nth-child(10) {background-color:Black; color:AliceBlue; outline-color:AliceBlue; } #div_c6 div div:nth-child(10):focus {outline-color:blue;} #div_c6 div div:nth-child(11) {background-color:SlateGray; color:black;} #div_c6 div div:nth-child(12) {background-color:GhostWhite; color:black;} #div_c7 { display: inline-block; width:40px; height:100px; overflow:hidden; outline:2px solid black; margin:auto; margin-bottom:7.5px; margin-top:7.5px; transition:width, height; transition-duration:2s; } #dbp_c7 { width:40px; } #dbn_c7 { width:100%; display:none; float:right; transition:display; transition-duration:2s;} #div_c7 div p { cursor:pointer; display:table-cell; vertical-align:middle; width:40px; height:100px; background-color:Gold; color:Yellow; transition:height; transition-duration:2s;} #div_c7 div div { cursor:grab; display:inline-flex; width:80px; height:80px; border-radius:50%; outline:2px solid black; margin:5px; align-items:center; justify-content:center; font-size:23px;} #div_c7 div div:active { cursor:grabbing; filter:brightness(90%); } #div_c7 div div:focus { outline-color:blue; } #div_c7 div div:nth-child(1) {background-color:PaleGreen; color:White;} #div_c7 div div:nth-child(2) {background-color:MediumTurquoise; color:black;} #div_c7 div div:nth-child(3) {background-color:LightSkyBlue; color:White;} #div_c7 div div:nth-child(4) {background-color:MediumSlateBlue; color:White;} #div_c7 div div:nth-child(5) {background-color:Orchid; color:black;} #div_c7 div div:nth-child(6) {background-color:PaleGoldenRod; color:black;} #div_c7 div div:nth-child(7) {background-color:Coral; color:black;} #div_c7 div div:nth-child(8) {background-color:FireBrick; color:black;} #div_c7 div div:nth-child(9) {background-color:Tan; color:White;} #div_c7 div div:nth-child(10) {background-color:Black; color:GhostWhite; outline-color:GhostWhite; } #div_c7 div div:nth-child(10):focus {outline-color:blue;} #div_c7 div div:nth-child(11) {background-color:Gainsboro; color:black;} #div_c7 div div:nth-child(12) {background-color:WhiteSmoke; color:black;} #div_c8 { display: inline-block; width:40px; height:100px; overflow:hidden; outline:2px solid black; margin:auto; margin-bottom:7.5px; margin-top:7.5px; transition:width, height; transition-duration:2s; } #dbp_c8 { width:40px; } #dbn_c8 { width:100%; display:none; float:right; transition:display; transition-duration:2s;} #div_c8 div p { cursor:pointer; display:table-cell; vertical-align:middle; width:40px; height:100px; background-color:HotPink; color:Violet; transition:height; transition-duration:2s;} #div_c8 div div { cursor:grab; display:inline-flex; width:80px; height:80px; border-radius:50%; outline:2px solid black; margin:5px; align-items:center; justify-content:center; font-size:23px;} #div_c8 div div:active { cursor:grabbing; filter:brightness(90%); } #div_c8 div div:focus { outline-color:blue; } #div_c8 div div:nth-child(1) {background-color:LimeGreen; color:White;} #div_c8 div div:nth-child(2) {background-color:DarkTurquoise; color:black;} #div_c8 div div:nth-child(3) {background-color:PowderBlue; color:White;} #div_c8 div div:nth-child(4) {background-color:MediumPurple; color:White;} #div_c8 div div:nth-child(5) {background-color:Plum; color:black;} #div_c8 div div:nth-child(6) {background-color:Khaki; color:black;} #div_c8 div div:nth-child(7) {background-color:Tomato; color:black;} #div_c8 div div:nth-child(8) {background-color:DarkRed; color:black;} #div_c8 div div:nth-child(9) {background-color:BurlyWood; color:White;} #div_c8 div div:nth-child(10) {background-color:Black; color:WhiteSmoke; outline-color:WhiteSmoke; } #div_c8 div div:nth-child(10):focus {outline-color:blue;} #div_c8 div div:nth-child(11) {background-color:SlateGray; color:black;} #div_c8 div div:nth-child(12) {background-color:SeaShell; color:black;} #r {color:#9b5de5;} #div_instrumentos_para_gravação { display:none; } #div_instrumentos_para_gravação h3 { color:white; font-size:50px; display:inline-block; } #div_instrumentos_para_gravação details { width:500px; margin:auto; margin-bottom:5px;} #div_instrumentos_para_gravação summary { list-style-type: '+'; color:lightgray; font-size:50px; cursor:pointer; } #div_instrumentos_para_gravação details[open] summary { list-style-type: '-'; } #div_instrumentos_para_gravação div p {display:inline-block; outline:2px solid black; margin-bottom:6px; margin-top:6px; padding:5px; font-size:40px; width:280px; text-transform:uppercase; cursor:pointer; background-color:white; color:black;} #div_instrumentos_para_gravação div button { padding:5px; font-size:35px; } #gravação { display:none; position: -webkit-sticky; position:sticky; bottom:2.5px; width:99.7%; } #gravação p { color:white; text-shadow:1px 0 4px black; } #div_div_gravação { display:flex; align-items:center; justify-content:center; flex-direction: column; height:200px; background-color:#ffcc00; outline:3px solid white; margin:auto; margin-top:10px;} #div_buttons_gravação { width:483px; height:42px; background-color:transparent; margin:auto; } #div_buttons_gravação button { background-color:blue; padding:2px; cursor:pointer; } #div_buttons_gravação button[disabled=true] { cursor:auto; } #div_buttons_gravação img { filter: invert(100%);} #div_mixer { width:480px; height:142px; background-color:#FFF; outline:3px solid #ffeb99; margin:auto; overflow:auto; }