responsive css + color change

This commit is contained in:
Matthew Dinh 2023-08-22 14:32:03 -07:00
parent bb4969107d
commit 4f4085ccb8
3 changed files with 462 additions and 11691 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 898 KiB

After

Width:  |  Height:  |  Size: 908 KiB

View file

@ -7,145 +7,167 @@
<title>Seafoam</title>
</head>
<body>
<div class="navbar">
<img class="icon" src="assets/seafoamarmadillo.webp">
<h1 class="title">seafoam</h1>
<div class="menubutton" onclick="resetMenu()"><h2 class="buttontext">GENERATE</h2></div>
<div class="menubutton" onclick="routeMenu()""><h2 class="buttontext">ROUTES</h2></div>
</div>
<div class="main">
<div class="menua">
<ul class="progressbar">
<li class="progressitem" data-active="true">MAP ZONE<span class="dot" data-active="true"></span></li>
<li class="progressitem" data-active="false">WAYPOINTS<span class="dot"></span></li>
<li class="progressitem" data-active="false">SETTINGS<span class="dot" data-active="false"></span></li>
<li class="progressitem" data-active="false">GENERATE<span class="dot" data-active="false"></span></li>
</ul>
<div class="menuscreen" id="menua1">
<div class="infobox">
<h1 class="infotitle">ROUTE AREA</h1>
<h3 class="infodesc">Click to choose the area where your route will generate.</h3>
</div>
<div class="nextbutton">
<h2 class="nextbuttontext" onclick="moveStep()">NEXT &#8594</h2>
</div>
<div class="mapbox">
<img class="map" src="assets/map.png">
<div class="xaxis">
<div class="yaxis">
<div class="mapsquare" id="20" onclick="selectSquare(20)"></div>
<div class="mapsquare" id="21" onclick="selectSquare(21)"></div>
<div class="mapsquare" id="22" onclick="selectSquare(22)"></div>
<div class="mapsquare" id="23" onclick="selectSquare(23)"></div>
<div class="mapsquare" id="24" onclick="selectSquare(24)"></div>
</div>
<div class="yaxis">
<div class="mapsquare" id="15" onclick="selectSquare(15)"></div>
<div class="mapsquare" id="16" onclick="selectSquare(16)"></div>
<div class="mapsquare" id="17" onclick="selectSquare(17)"></div>
<div class="mapsquare" id="18" onclick="selectSquare(18)"></div>
<div class="mapsquare" id="19" onclick="selectSquare(19)"></div>
</div>
<div class="yaxis">
<div class="mapsquare" id="10" onclick="selectSquare(10)"></div>
<div class="mapsquare" id="11" onclick="selectSquare(11)"></div>
<div class="mapsquare" style="opacity: 0"></div>
<div class="mapsquare" id="13" onclick="selectSquare(13)"></div>
<div class="mapsquare" id="14" onclick="selectSquare(14)"></div>
</div>
<div class="yaxis">
<div class="mapsquare" id="5" onclick="selectSquare(5)"></div>
<div class="mapsquare" id="6" onclick="selectSquare(6)"></div>
<div class="mapsquare" id="7" onclick="selectSquare(7)"></div>
<div class="mapsquare" id="8" onclick="selectSquare(8)"></div>
<div class="mapsquare" id="9" onclick="selectSquare(9)"></div>
</div>
<div class="yaxis">
<div class="mapsquare" id="0" onclick="selectSquare(0)"></div>
<div class="mapsquare" id="1" onclick="selectSquare(1)"></div>
<div class="mapsquare" id="2" onclick="selectSquare(2)"></div>
<div class="mapsquare" id="3" onclick="selectSquare(3)"></div>
<div class="mapsquare" id="4" onclick="selectSquare(4)"></div>
</div>
</div>
</div>
</div>
<div class="menuscreen" id="menua2">
<div class="infobox">
<h1 class="infotitle">WAYPOINTS</h1>
<h3 class="infodesc">Enter desired waypoints- route may be +-10% of the value.</h3>
</div>
<div class="waypointentry">
<form>
<input id="wpform" class="waypointform" type="number" value="150">
</form>
</div>
<div class="nextbutton">
<h2 class="nextbuttontext" onclick="moveStep()">NEXT &#8594</h2>
</div>
</div>
<div class="menuscreen" id="menua3">
<div class="infobox">
<h1 class="infotitle">SETTINGS</h1>
</div>
<div class="settingbox">
<h2 class="settingdesc">Choose priority for teleport distance or density for route output.</h2>
<form>
<input class="priorityform" id="tp" type="radio" value="TP" name="priority">
<label class="priorityform" for="tp">TP Distance</label>
<br>
<input class="priorityform" id="dens" type="radio" value="DENS" name="priority">
<label class="priorityform" for="dens">Density</label>
</form>
</div>
<div class="settingbox">
<h2 class="settingdesc">Set allowed out of bounds range from the 8x8 chunk area (only use if you know what that means).</h2>
<form>
<input class="oobform" type="number" value="0">
</form>
</div>
<div class="settingbox">
<h2 class="settingdesc">Preference for approach/exit angle difference on a teleport pad.</h2>
<form>
<input class="angleenable" type="checkbox" id="anglecheck">
<label class="angleenable" for="anglecheck">Enable</label>
<br><br>
<input class="anglesettings" type="number" value="0" id="angle22">
<label class="anglesettings" for="angle22">2x2 Veins</label>
<br><br>
<input class="anglesettings" type="number" value="0" id="angle33">
<label class="anglesettings" for="angle33">3x3 Veins</label>
</form>
</div>
<div class="nextbutton" style="margin-top: 2rem">
<h2 class="nextbuttontext" onclick="moveStep()">GENERATE</h2>
</div>
</div>
<div class="menuscreen" id="menua4">
<div class="infobox">
<h1 class="infotitle">GENERATE</h1>
<h3 class="infodesc">Your route is being generated. Please wait.</h3>
</div>
<div class="routeresults">
<div class="routebox"><p id="routeout" class="routeoutput">Route loading...</p></div>
<h3 id="routestats" class="routestats"></h3>
<div id="navbarandmaincontainer">
<div class="navbar">
<div class="logocontainer">
<div class="logo">
<img class="icon" src="assets/seafoamarmadillo.webp">
<h1 class="title">seafoam</h1>
</div>
</div>
<div class="menubutton" onclick="resetMenu()"><h2 class="buttontext">GENERATE</h2></div>
<div class="menubutton" onclick="routeMenu()""><h2 class="buttontext">ROUTES</h2></div>
</div>
<div class="menub">
<div class="menuscreen" id="menub1">
<div class="routesinfo">
<div class="routeviewer">
<h2 id="routeviewerstats" class="routestats"></h2>
<div class="routebox"><p id="routeviewerpath" class="routeoutput"></p></div>
<div class="main">
<div class="menucontainer" id="menua">
<ul class="progressbar">
<li class="progressitem" data-active="true">MAP ZONE<span class="dot" data-active="true"></span></li>
<li class="progressitem" data-active="false">WAYPOINTS<span class="dot"></span></li>
<li class="progressitem" data-active="false">SETTINGS<span class="dot" data-active="false"></span></li>
<li class="progressitem" data-active="false">GENERATE<span class="dot" data-active="false"></span></li>
</ul>
<div class="menuscreen" id="menua1">
<div class="lefttextcontainer">
<div class="infobox">
<h1 class="infotitle">ROUTE AREA</h1>
<h3 class="infodesc">Click to choose the area where your route will generate.</h3>
</div>
<div class="nextbutton">
<h2 class="nextbuttontext" onclick="moveStep()">NEXT &#8594</h2>
</div>
</div>
<div class="rightcontentcontainer">
<div class="mapbox">
<img id="mapimage" src="assets/map.png">
<div class="xaxis">
<div class="yaxis">
<div class="mapsquare" id="20" onclick="selectSquare(20)"></div>
<div class="mapsquare" id="21" onclick="selectSquare(21)"></div>
<div class="mapsquare" id="22" onclick="selectSquare(22)"></div>
<div class="mapsquare" id="23" onclick="selectSquare(23)"></div>
<div class="mapsquare" id="24" onclick="selectSquare(24)"></div>
</div>
<div class="yaxis">
<div class="mapsquare" id="15" onclick="selectSquare(15)"></div>
<div class="mapsquare" id="16" onclick="selectSquare(16)"></div>
<div class="mapsquare" id="17" onclick="selectSquare(17)"></div>
<div class="mapsquare" id="18" onclick="selectSquare(18)"></div>
<div class="mapsquare" id="19" onclick="selectSquare(19)"></div>
</div>
<div class="yaxis">
<div class="mapsquare" id="10" onclick="selectSquare(10)"></div>
<div class="mapsquare" id="11" onclick="selectSquare(11)"></div>
<div class="mapsquare" style="opacity: 0"></div>
<div class="mapsquare" id="13" onclick="selectSquare(13)"></div>
<div class="mapsquare" id="14" onclick="selectSquare(14)"></div>
</div>
<div class="yaxis">
<div class="mapsquare" id="5" onclick="selectSquare(5)"></div>
<div class="mapsquare" id="6" onclick="selectSquare(6)"></div>
<div class="mapsquare" id="7" onclick="selectSquare(7)"></div>
<div class="mapsquare" id="8" onclick="selectSquare(8)"></div>
<div class="mapsquare" id="9" onclick="selectSquare(9)"></div>
</div>
<div class="yaxis">
<div class="mapsquare" id="0" onclick="selectSquare(0)"></div>
<div class="mapsquare" id="1" onclick="selectSquare(1)"></div>
<div class="mapsquare" id="2" onclick="selectSquare(2)"></div>
<div class="mapsquare" id="3" onclick="selectSquare(3)"></div>
<div class="mapsquare" id="4" onclick="selectSquare(4)"></div>
</div>
</div>
</div>
</div>
<h1 class="routestitle">ROUTES</h1>
<h3 class="routesdesc">Click on a saved route to view it.</h3>
</div>
<div class="routeviewbox">
<!--<div class="route">
<h3 class="routetitle">Route title</h3>
</div>-->
<div class="menuscreen" id="menua2">
<div class="lefttextcontainer">
<div class="infobox">
<h1 class="infotitle">WAYPOINTS</h1>
<h3 class="infodesc">Enter desired waypoints- route may be +-10% of the value.</h3>
</div>
<div class="waypointentry">
<form>
<input id="wpform" class="waypointform" type="number" value="150">
</form>
</div>
<div class="nextbutton">
<h2 class="nextbuttontext" onclick="moveStep()">NEXT &#8594</h2>
</div>
</div>
</div>
<div class="menuscreen" id="menua3">
<div class="lefttextcontainer">
<div class="infobox">
<h1 class="infotitle">SETTINGS</h1>
</div>
<div class="settingbox">
<h2 class="settingdesc">Choose priority for teleport distance or density for route output.</h2>
<form>
<input class="priorityform" id="tp" type="radio" value="TP" name="priority">
<label class="priorityform" for="tp">TP Distance</label>
<br>
<input class="priorityform" id="dens" type="radio" value="DENS" name="priority">
<label class="priorityform" for="dens">Density</label>
</form>
</div>
<div class="settingbox">
<h2 class="settingdesc">Set allowed out of bounds range from the 8x8 chunk area (only use if you know what that means).</h2>
<form>
<input class="oobform" type="number" value="0">
</form>
</div>
<div class="settingbox">
<h2 class="settingdesc">Preference for approach/exit angle difference on a teleport pad.</h2>
<form>
<input class="angleenable" type="checkbox" id="anglecheck">
<label class="angleenable" for="anglecheck">Enable</label>
<br><br>
<input class="oobform" class="anglesettings" type="number" value="0" id="angle22">
<label class="anglesettings" for="angle22">2x2 Veins</label>
<br><br>
<input class="oobform" class="anglesettings" type="number" value="0" id="angle33">
<label class="anglesettings" for="angle33">3x3 Veins</label>
</form>
</div>
<div class="nextbutton" style="margin-top: 2rem">
<h2 class="nextbuttontext" onclick="moveStep()">GENERATE</h2>
</div>
</div>
</div>
<div class="menuscreen" id="menua4">
<div class="lefttextcontainer">
<div class="infobox">
<h1 class="infotitle">GENERATE</h1>
<h3 class="infodesc">Your route is being generated. Please wait.</h3>
</div>
<div class="routeresults">
<div class="routebox">
<p id="routeout" class="routeoutput">Route loading...</p>
</div>
<h3 id="routestats" class="routestats"></h3>
</div>
</div>
</div>
</div>
<div class="menucontainer" id="menub">
<div class="menuscreen" id="menub1">
<div class="lefttextcontainer">
<div class="routesinfo">
<div class="routeviewer">
<h2 id="routeviewerstats" class="routestats"></h2>
<div class="routebox"><p id="routeviewerpath" class="routeoutput"></p></div>
</div>
<h1 class="routestitle">ROUTES</h1>
<h3 class="routesdesc">Click on a saved route to view it.</h3>
</div>
</div>
<div class="rightcontentcontainer">
<div class="routeviewbox">
<!--<div class="route">
<h3 class="routetitle">Route title</h3>
</div>-->
</div>
</div>
</div>
</div>
</div>
@ -393,7 +415,7 @@
document.getElementById("routestats").innerHTML = `Waypoints: ${outPath.length / 3}<br>Density: ${outPathDensity}<br>Distance: ${outPathDist}`;
return pathOutput, outPath.length / 3, outPathDensity, outPathDist;
}
var activeSquare = -1;
var activeSquareIndex = -1;
var currentStep = 1;
var waypointNumber = 150;
@ -406,20 +428,22 @@
var angle33 = 0;
document.getElementById("menua1").style.opacity = 1;
document.getElementById("menua1").style.display = "block";
document.getElementById("menua1").style.display = "flex";
document.getElementById("menub").style.height = 0;
function selectSquare(index) {
if (selectedSquareIndex != -1) {
document.getElementById(selectedSquareIndex).style.backgroundColor = "#0e141b";
if (activeSquareIndex != -1) {
document.getElementById(activeSquareIndex).style.backgroundColor = "#0e141b";
}
selectedSquareIndex = parseInt(index);
activeSquareIndex = parseInt(index);
let selectedSquareDiv = document.getElementById(index);
selectedSquareDiv.style.backgroundColor = "#edbdc2";
}
function getRoute() {
var output = generateRoute(activeSquare, allowedOOB, priority, waypointNumber, angleEnable, angle22, angle33);
var output = generateRoute(activeSquareIndex, allowedOOB, priority, waypointNumber, angleEnable, angle22, angle33);
}
async function resetMenu() {
document.getElementById("menub").style.height = 0;
document.getElementById("menub1").style.opacity = 0;
document.getElementById("menua" + (currentStep)).style.opacity = 0;
document.getElementsByClassName("progressitem")[currentStep - 1].setAttribute("data-active", "false");
@ -428,10 +452,10 @@
document.getElementById("menub1").style.display = "none";
document.getElementById("menua" + (currentStep)).style.display = "none";
currentStep = 1;
if (activeSquare != -1) document.getElementById(activeSquare).style.backgroundColor = "#0e141b";
activeSquare = -1;
if (activeSquareIndex != -1) document.getElementById(activeSquareIndex).style.backgroundColor = "#0e141b";
activeSquareIndex = -1;
document.getElementsByClassName("progressbar")[0].style.opacity = 1;
document.getElementById("menua" + (currentStep)).style.display = "block";
document.getElementById("menua" + (currentStep)).style.display = "flex";
document.getElementById("menua" + (currentStep)).style.opacity = 1;
document.getElementsByClassName("progressitem")[currentStep - 1].setAttribute("data-active", "true");
document.getElementsByClassName("dot")[currentStep - 1].setAttribute("data-active", "true");
@ -442,7 +466,8 @@
document.getElementsByClassName("dot")[step - 2].setAttribute("data-active", "false");
await new Promise(r => setTimeout(r, 500));
document.getElementById("menua" + (step - 1)).style.display = "none";
document.getElementById("menua" + (step)).style.display = "block";
document.getElementById("menua" + (step)).style.display = "flex";
document.getElementById("menua" + (step)).style.opacity = 1;
document.getElementsByClassName("progressitem")[step - 1].setAttribute("data-active", "true");
document.getElementsByClassName("dot")[step - 1].setAttribute("data-active", "true");
@ -455,14 +480,16 @@
document.getElementsByClassName("dot")[currentStep - 1].setAttribute("data-active", "false");
await new Promise(r => setTimeout(r, 500));
document.getElementById("menua" + (currentStep)).style.display = "none";
document.getElementById("menua").style.height = 0;
currentStep = 1;
if (activeSquare != -1) document.getElementById(activeSquare).style.backgroundColor = "#0e141b";
activeSquare = -1;
document.getElementById("menub1").style.display = "block";
if (activeSquareIndex != -1) document.getElementById(activeSquareIndex).style.backgroundColor = "#0e141b";
activeSquareIndex = -1;
document.getElementById("menub").style.height = "100%";
document.getElementById("menub1").style.display = "flex";
document.getElementById("menub1").style.opacity = 1;
}
function moveStep() {
if (currentStep == 1 && selectedSquareIndex == -1) return;
if (currentStep == 1 && activeSquareIndex == -1) return;
if (currentStep == 2) waypointNumber = document.getElementById("wpform").value;
if (currentStep == 3) {
if (document.getElementById("tp").checked) priority = "tp"; else priority = "dens";

View file

@ -3,103 +3,165 @@
src: url(assets/poppins.ttf) format("truetype");
}
:root {
--main-bg-color: #295d8c;
--accent-bg-color: #427baf;
--button-bg-color: #427baf;
}
html {
height: 100%;
}
body {
user-select: none;
background-color: #162532;
background-color: var(--main-bg-color);
font-family: "Poppins";
margin: 0;
padding: 0;
height: 100%;
}
#navbarandmaincontainer {
display: flex;
flex-direction: row;
align-items: stretch;
height: 100%;
}
.main {
flex-grow: 1;
}
.navbar {
display: flex;
flex-flow: column;
align-items: left;
justify-content: flex-start;
background-color: #131b23;
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 15rem;
min-height: 60rem;
text-align: center;
box-shadow: 1px 0px 10px 3px rgba(0, 0, 0, 0.511);
}
.icon {
margin-top: 1.5rem;
width: 6rem;
width: 4rem;
}
.title {
display: flex;
color: #ffffff;
margin-top: 0;
font-weight: 200;
padding-bottom: 3rem;
margin: 0;
}
.menuscreen {
display: none;
opacity: 0;
transition: opacity 0.5s;
.logocontainer {
display: flex;
}
.logo {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
margin: 2rem;
margin-bottom: 5rem;
}
.menubutton {
display: flex;
align-items: center;
flex-flow: row;
justify-content: left;
width: 100%;
align-items: center;
height: 5rem;
font-size: 0.7rem;
color: #ffffff;
background-color: #131b23;
transition: background-color 0.25s;
padding-left: 2rem;
}
.buttontext {
margin-left: 3rem;
font-weight: 200;
}
.menucontainer {
display: flex;
flex-flow: column;
align-items: center;
height: 100%;
}
.menuscreen {
display: none;
flex-flow: row;
justify-content: flex-start;
align-items: center;
flex-grow: 1;
width: 100%;
opacity: 0;
transition: opacity 0.5s;
}
.menubutton:hover {
background-color: #0e141b;
background-color: var(--button-bg-color);
}
.progressbar {
margin-top: 2rem;
position: relative;
left: 40%;
width: 30rem;
transition: opacity 0.5s;
margin: 0;
}
.progressitem {
margin: 1.5rem;
font-size: 0.75rem;
font-weight: 500;
color: #404040;
color: #ffffff;
display: inline-block;
transition: color 0.25s;
opacity: 0.3;
transition: opacity 0.25s;
}
.progressitem[data-active="true"] {
color: #ffffff;
opacity: 1;
}
.dot {
height: .8rem;
width: .8rem;
background-color: #404040;
background-color: #ffffff;
border-radius: 50%;
display: block;
margin: 0.5rem auto auto auto;
transition: background-color 0.25s transform 0.25s;
transition: opacity 0.25s;
transition: transform 0.5s;
transform: scale(0.5);
opacity: 0.3;
}
.dot[data-active="true"] {
transform: scale(0.8);
background-color: #ffffff;
opacity: 1;
}
.lefttextcontainer {
display: inline-block;
flex-grow: 1;
margin: 5rem;
}
.rightcontentcontainer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
flex-grow: 2;
margin: 5rem;
}
.infobox {
width: 20rem;
position: relative;
left: 20rem;
margin-top: 10rem;
}
.infotitle {
@ -117,16 +179,14 @@ body {
}
.nextbutton {
position: relative;
left: 20rem;
margin-top: 10rem;
margin-top: 5rem;
transition: background-color 0.1s;
width: fit-content;
padding: 0 1rem 0 1rem;
padding: 0 1rem 0 0;
}
.nextbutton:hover {
background-color: #0e141b;
background-color: var(--button-bg-color);
}
.nextbuttontext {
@ -135,18 +195,18 @@ body {
}
.mapbox {
position: absolute;
left: 75rem;
bottom: 15rem;
width: 30rem;
height: 30rem;
display: inline-block;
width: 40rem;
height: 40rem;
padding: 1rem 1rem 1rem 1rem;
background-color: #1f2d3a;
background-color: var(--accent-bg-color);
align-items: center;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.142);
}
.map {
width: 30rem;
#mapimage {
opacity: 0.8;
width: 40rem;
}
.xaxis {
@ -154,7 +214,7 @@ body {
align-items: center;
margin: 0;
position: relative;
bottom: 30.45rem;
bottom: 40.45rem;
}
.yaxis {
@ -169,9 +229,9 @@ body {
justify-content: center;
align-content: center;
flex-direction: column;
width: 5.8rem;
height: 5.8rem;
background-color: #0e141b;
width: 7.8rem;
height: 7.8rem;
background-color: rgba(1, 1, 2, 0.665);
margin: 0.1rem;
opacity: 0.5;
transition: opacity 0.2s;
@ -190,20 +250,19 @@ body {
}
.waypointentry {
position: relative;
left: 20rem;
margin-top: 2rem;
width: 40rem;
}
.waypointform {
background-color: #131b23;
background-color: var(--accent-bg-color);
height: 2rem;
width: 7rem;
color: #ffffff;
font-size: 1.2rem;
font-weight: 300;
font-family: "Poppins";
border: none;
}
.waypointform::-webkit-outer-spin-button,
@ -213,8 +272,6 @@ body {
}
.settingbox {
position: relative;
left: 20rem;
width: 40rem;
}
@ -223,6 +280,7 @@ body {
font-size: 1.2rem;
font-weight: 300;
margin-right: 1rem;
border: none;
}
.settingdesc {
@ -234,13 +292,14 @@ body {
}
.oobform {
background-color: #131b23;
background-color: var(--accent-bg-color);
height: 1.5rem;
width: 5rem;
color: #ffffff;
font-size: 1.2rem;
font-weight: 300;
font-family: "Poppins";
border: none;
}
.oobform::-webkit-outer-spin-button,
@ -263,13 +322,13 @@ label.angleenable {
}
input.angleenable {
background-color: #131b23;
background-color: var(--accent-bg-color);
height: 1.5rem;
width: 1.5rem;
}
input.anglesettings {
background-color: #131b23;
background-color: var(--accent-bg-color);
height: 1.5rem;
width: 5rem;
color: #ffffff;
@ -294,9 +353,6 @@ label.anglesettings {
}
.routeresults {
position: relative;
left: 20rem;
margin-top: 2rem;
width: 40rem;
}
@ -308,8 +364,8 @@ label.anglesettings {
}
.routebox {
height: 10rem;
overflow: auto;
/* height: 10rem; */
/* overflow: auto; */
}
.routestats {
@ -320,9 +376,9 @@ label.anglesettings {
}
.routesinfo {
position: relative;
/* position: relative;
left: 20rem;
width: 40rem;
width: 40rem; */
margin-top: 5rem;
}
@ -330,8 +386,8 @@ label.anglesettings {
font-size: 3rem;
font-weight: 500;
color: #ffffff;
margin-top: 1rem;
margin-bottom: 0;
/* margin-top: 1rem;
margin-bottom: 0; */
}
.routesdesc {
@ -340,32 +396,32 @@ label.anglesettings {
color: #ffffff;
}
.routeviewbox {
/* .routeviewbox {
position: relative;
left: 20rem;
width: 50rem;
height: 40rem;
overflow: auto;
}
} */
.routetitle {
font-size: 1.5rem;
font-weight: 500;
color: #ffffff;
margin-top: 1rem;
margin-bottom: 0;
/* margin-top: 1rem;
margin-bottom: 0; */
}
.route {
width: 40rem;
padding: 1rem;
margin-top: 2rem;
background-color: #0e141b;
background-color: var(--accent-bg-color);
}
.routeviewer {
/* .routeviewer {
position: absolute;
left: 50rem;
width: 40rem;
height: 40rem;
}
} */