/* Everything*/ @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Source+Sans+Pro:wght@300&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Harmattan&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Asul&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap'); * { border: 0px black solid; } body { overflow: scroll; font-size: .8em; } .container-fluid { overflow: hidden; } .bg { height: 100%; width: 100%; } .bg::before { content: ""; background-image: url("/static/images/poster1.png"); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.2; filter: blur(20px); } /*Main areas*/ .map_area { text-align: center; margin-top: 20px; margin-bottom: 20px; margin-right: 10px; margin-left: 20px; position: relative; } .media_area { margin-top: 10px; padding-right: 20px; height:100%; } .media_area img { width: 400px; } .node text { pointer-events: none; } /* Audio in background */ .audio-button { background: white; } .audio-button:hover { background: grey; cursor: pointer; } .main_audio { position: relative; } /* Node styling */ .group2 { fill: #ffbc42; font-size: 20px; font-family: 'Vesper Libre', serif; z-index: 2; } .group1 { fill: #d81159; font-size: 20px; font-family: 'Vesper Libre', serif; z-index: 1; } .group4 { fill: #73d2de; font-family: 'Vesper Libre', serif; font-size: 20px; z-index: 4; } .group3 { fill: #218380; font-family: 'Vesper Libre', serif; font-size: 20px; z-index: 3; } svg{ width:100%; height:100%; margin-left: 30px; margin-top: 10px; z-index: 1; position: relative; } 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 legend */ #box1 { height: 15px; width: 15px; margin-left : 10px; margin-top: 10px; display: inline-block; background-color: #d81159; } #box2 { height: 15px; width: 15px; margin-left : 10px; margin-top: 10px; background-color: #ffbc42; display: inline-block; } #box3 { height: 15px; width: 15px; margin-left : 10px; margin-top: 10px; background-color: #218380; display: inline-block; } #box4 { height: 15px; width: 15px; margin-left : 10px; margin-top: 10px; display: inline-block; background-color: #73d2de; } .map_legend p { padding-left: 5px; font-family: 'Vesper Libre', serif; display: inline; font-size: .6em; } #legend_title { font-family: 'Vesper Libre', serif; font-size: 1em; padding-left: 2em; position: relative; margin-top: 1em; } /* text area */ /* with position:fixed and svg {position:relative} the text can overlay the map */ .thesis { text-align: left !important; display: none; overflow-y: scroll; max-height: 300px; max-width: 40%; scroll-behavior: smooth; font-size: .6em; border: 1px black solid; padding: 2em; margin-right: 10px; margin-top: 20px; line-height: 1.6em; font-family: 'Vesper Libre', serif; scrollbar-color: #d81159 #dbf6f9; position: fixed; z-index:4; background: white; left: 60%; top: 2%; } .scrollable { overflow-y: scroll; scroll-behavior: smooth; overflow: hidden; } h1 { font-size: 1.4em !important; } h2 { font-size: 1.2em !important; } /* background audio */ .play-stop { /* position: absolute; */ /* bottom: 1em; */ z-index: 1; padding-left: 2em; /* margin-left: calc( 50% - 1.8em ); margin-top: 5em; */ overflow: hidden; font-size: .8em; font-weight: bold; font-family:'Walter Turncoat', cursive; color: #AEB10A; cursor: pointer; } .play-stop:hover { color: #cdcec9; } /* circles */ #first_circle { width: 100%; height: 100%; } #second_circle { width: 100%; height: 100%; } @media all and (max-width: 350px) { } .draggable { position: absolute; /* cursor: all-scroll; */ } /* .scaleable-wrapper { resize: both; overflow: auto; position:relative; } */ .draggable iframe { padding: 1em; } #transcriptWrapper { overflow: hidden; } #transcript > div { transition: all 0.8s ease; list-style-type: disc; } .speaking { font-weight: bold; } /* pop up */ .show { display: none; left: 20%; /* width: 10% !important; */ position: fixed; z-index: 5; border: 1px black solid; } .text_audio{ margin-bottom: 1.2em; margin-top: 2em; font-family:'Vesper Libre', serif; font-size: .8em; padding-left: 1em; } /* Style the close button */ .topleft { float: right; cursor: pointer; font-size: 100%; color: black; } /* about and colophon */ /* #about { } */ #showabout, #showcolophon { display: none; left: 20%; /* background-image: url("../images/poster1.png"); */ background-color: white; word-wrap: break-word; background-size: 100%; width: 50%; height: auto; border: 1px solid black; padding: 2%; z-index: 5; } /*d3 map*/ .link { stroke: #c46666; } .node text { pointer-events: none; font: 1em sans-serif; } .active { background-color: RGBA(190,219,187, 0.6); display: inline; /* box-shadow: 5px 0 0px 0px #bedbbb, -5px 0 0px 0px #bedbbb; */ }