/* Everything*/ * { border: 0px black solid; } /*Main areas*/ .map_area { text-align: center; margin-top: 20px; height:80%; } .media_area { margin-top: 10px; padding-right: 20px; height:100%; } .media_area img { width: 200px; height: 150px; } .link { stroke: #ccc; } .node text { pointer-events: none; font: 10px sans-serif; } svg{ width:100%; height:200%; } path{ fill: transparent; stroke: #000; stroke-dasharray:6px; } #map_div{ position:absolute; top:20px; left:0; right:0; margin:auto; height:500px; width:700px; } #map_div p{ position:absolute; padding:50px; top:200px; width:0; height:0; border-radius:50%; } .c1{ padding:20px; top:220px; left:10%; background:red; } .c2{ left:50%; background:blue; } .c3{ left:30%; background: yellow;} /* text area */ .thesis { overflow-y: scroll; max-height:300px; scroll-behavior: smooth; font-size: 1em; border: 1px black solid; padding: 1em; } h1 { font-size: 1.4em !important; } h2 { font-size: 1.2em !important; } /* background audio */ audio { width:100%; } /* circles */ #first_circle { width: 100%; height: 100%; } #second_circle { width: 100%; height: 100%; } @media all and (max-width: 350px) { #first_circle { width: 100%; height: 100%; } #second_circle { width: 100%; height: 100%; } } draggable { position: absolute; } .draggable iframe { padding: 20px; } #transcriptWrapper { overflow: hidden; } #transcript > div { transition: all 0.8s ease; list-style-type: disc; } .speaking { font-weight: bold; } /* pop up */ #showdadaloglu,#showmuharrem { display: none; left: 20%; width: 23% !important; } /*d3 map*/ .link { stroke: #ccc; } .node text { pointer-events: none; font: 1em sans-serif; }