BoxToBox/css/style.css

/*
 * Copyright (c) 2016, 2024, 5 Mode
 * All rights reserved.
 * 
 * This file is part of BoxToBox.
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software 
 * and associated documentation files (the "Software"), to deal in the Software 
 * without restriction, including without limitation the rights to use, copy, modify, merge, publish, 
 * distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the 
 * Software is furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all copies or 
 * substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
 * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
 * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN 
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 
 * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 * 
 * style sheet.
 *
 * @author Daniele Bonini <my25mb@aol.com>
 * @copyrights (c) 2021, 2024, 5 Mode 
 */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
  font-size:11px;
  margin-top:20px;
  background:#000000;
}
#boxHtml {
  float:left;
  width:50%;
  height:50%;
  font-size:12px;
  background: #333;
  border:1px solid lightgray;
  text-align: center;
}
#boxCss {
  float:left;
  width:50%;
  height:50%;
  font-size:12px;
  background: #333;
  border:1px solid lightgray;
  text-align: center;
}
#boxRendering {
  float:left;
  width:50%;
  height:50%;
  font-size:12px;
  background: #333;
  border:1px solid lightgray;
  text-align: center;
}
#boxJs {
  float:left;
  width:50%;
  height:50%;
  font-size:12px;
  background: #333;
  border:1px solid lightgray;
  text-align: center;
}
.code {
  width:98%;
  height:92%;
  color:#FFFFFF;
  background:transparent;
  border: 1px solid lightgray;
  resize:none;
}
#coding {
  float:left;  
  width:100%;
}
#content {
 font-size:11px; 
}
#finalResult {
  width:98%;
  height:92%;
  border: 1px solid lightgray;
  background:transparent;
  margin:auto;
  margin-top:22px;
  color:#FFFFFF;
}
#footerCont {
  position: fixed; 
  top: 2000px; 
  left:-10px;
  width: 102%; 
  border: 1px solid #C2DBF2; 
  padding: 7px; 
  background: white; 
  opacity: 0.3;
  color:white; 
  font-family: Arial,Sans,Vardana;
  font-size: 12px; 
  text-align: center; 
  z-index: 99998;
}
#footer {
  position: fixed;
  float: right;
  top: 2000px; 
  left:-10px;
  width: 100%; 
  border: 0px solid #C2DBF2; 
  padding: 7px; 
  opacity: 1.0;
  color:black; 
  font-family: Arial,Sans,Vardana;
  font-size: 12px; 
  font-weight: 400;
  text-align: right; 
  margin-top:8px;
  z-index: 99999;
}
#hashMe {
  position:relative; 
  left:-2px; 
  top:+5px; 
  font-size:18px; 
  font-weight:900; 
  color:#000000;
}
#header {
  background: #222;
  color:#FFFFFF;
  height: 43px;
  padding:3px;
  padding-top:8px;
  border:1px solid lightgray;
}
#Password {
  font-size:18px;  
  background:transparent; 
  width: 60%; 
  border-radius:3px; 
  font-weight:900;
}
#passworddisplay {
  float:left;
  position:fixed;
  top:680px;
  left:50px;
  width:255px;
  height:120px;
  background:darkgray;
  text-align:left;
  white-space:nowrap; 
  font-family:Arial,Sans,Verdana; 
  color:#000000; 
  font-weight:900;
  z-index:99999;
}
#resizeBanner {
  text-align:center;
  vertical-align:middle;
  margin-top:38%;
  width:100%;
  height:100%;
}
#Salt {
  position:relative; 
  top:+5px; 
  font-size:18px; 
  background:transparent;
  width: 90%; 
  border-radius:3px; 
  font-weight:900;
}
#side-bar {
  float:left;
  background: #222;
  color:#FFFFFF;
  width: 18%;
  height: 1200px;
  border:1px solid lightgray;
  padding: 8px;
  padding-top: 6px;
}
.title {
  float:left;
  width:100%;
  font-size:11px;
  color: #FFFFFF;
  margin-top:6px;
  margin-left:8px;
  text-align:left;
}