/*
** Stylesheet for oracle-v2.nl
*/


@font-face { font-family:'VT220'; font-weight:normal; font-style:normal; src: url('/fonts/Glass_TTY_VT220.ttf') format('truetype'); }

* {margin:0; padding:0; box-sizing:border-box;}
body {
/*      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
      background-color: black;
      min-width: 1800px;
      padding:40px 0;
      }

A {color:black; font-weight:bold; text-decoration:none;}
/* Main Layout Row */
.main-row {display:flex; justify-content:center; align-items:center; width:100%; margin-top:100px; margin-bottom:30px;}
.side-margin {width:100px; flex-shrink:0;} 
.img-container {width:700px; height:450px; flex-shrink:0; overflow:hidden; }

.center-gap {flex:1; min-width:100px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 40px; }
.center-keyword {color:#65ff00; padding:10px 40px; margin:10px 0; cursor:pointer; font-size:11pt; font-weight:600; text-align:center; min-width:200px;}
.center2-keyword {color:#ff00ff; padding:10px 40px; margin:10px 0; cursor:pointer; font-size:11pt; font-weight:600; text-align:center; min-width:200px;}
.center3-keyword {color:#ff0000; padding:10px 40px; margin:10px 0; cursor:pointer; font-size:11pt; font-weight:600; text-align:center; min-width:200px;}
.center-keyword:hover,.center2-keyword:hover,.center3-keyword:hover {transform:translateY(-3px);}
.center-counter {padding:10px 40px; margin:10px 0; text-align:center; min-width:200px;}

/* Bottom Keywords Row, spacing handled by margins matching image positions */
.bottom-row {display: flex; justify-content: center; width: 100%; gap: 0; }
.bottom-group {width: 700px; display:flex; justify-content:center; gap:20px; margin:0 100px; height:10px;}
.bottom-group:first-child {margin-right: auto; margin-left: 100px; }
.bottom-keyword {color:#65ff00; padding:12px 28px; cursor:pointer; font-size:16px; font-weight:500; min-width:150px; white-space:nowrap}
.bottom2-keyword {color:#ff00ff; padding:12px 28px; cursor:pointer; font-size:16px; font-weight:500; min-width:150px; white-space:nowrap}
.bottom3-keyword {color:#ff0000; padding:12px 28px; cursor:pointer; font-size:16px; font-weight:500; min-width:150px; white-space:nowrap}
.bottom-keyword:hover,.bottom2-keyword:hover,.bottom3-keyword:hover {transform:translateY(-3px);}

/* Popup */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  }
.popup-overlay.active {display: flex;}
.popup-content {
  background: white;
  width: 800px;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: popupSlideIn 0.3s ease;
  }
.popup-content2 {
  background: white;
  width: 400px;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: popupSlideIn 0.3s ease;
  }

@keyframes popupSlideIn {
  from {opacity: 0; transform:translateY(-50px) scale(0.95); }
  to   {opacity: 1; transform:translateY(0) scale(1); }
  }

.popup-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  }
.popup-header h2 { font-size: 24px; font-weight: 600; }

.popup-close {
  background: none;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
  }
.popup-close:hover { background-color: rgba(255,255,255,0.2); }

.popup-body { padding: 10px; overflow-y: auto; max-height: calc(80vh - 80px); }
.popup-body img { width: 100%; max-height: 400px; object-fit: cover; border-radius: 6px; margin-bottom: 2px; }
.popup-body p { font-size: 16px; line-height: 1.7; color: #444; }
/*.popup-body a { font-size: 15px; line-height: 0.3; color: #000; }*/
.popup-body a { font-size: 15px; color: #000; }

/* ftelnet stuff */
.fTelnetContainer { box-sizing: content-box; margin: auto; font: VT220;}
.fTelnetContainer .fTelnetButtons,
.fTelnetContainer .fTelnetScrollback,
.fTelnetContainer .fTelnetFocusWarning,
.fTelnetContainer .fTelnetClientContainer,
.fTelnetContainer .fTelnetStatusBar { box-sizing: content-box; }
.fTelnetContainer canvas { display: block; margin: auto; }
.fTelnetClientContainer { border: 1px solid black; position: relative; margin: auto; }

.fTelnetConnectButton {
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  color: black;
  display: inline-block;
  font: 14px VT220, Arial, Helvetica, sans-serif;
  margin-right: 10px;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  }

.fTelnetCrtCanvas { cursor: text; display: block; margin: auto; font: VT220;}

.fTelnetFocusWarning {
  background-color: red;
  border: 1px solid red;
  color: white;
  font: 14px Arial, Helvetica, sans-serif;
  margin: auto;
  padding: 5px;
  text-align: center;
  }

.fTelnetMenuButton {
  background-color: white;
  border: 1px solid #666;
  border-radius: 5px;
  color: black;
  display: inline-block;
  margin-right: 10px;
  padding: 8px 12px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  }

.fTelnetMenuButtons {
  background-color: white;
  border: 1px solid #666;
  color: black;
  margin-right: 10px;
  padding: 8px 12px;
  position: absolute;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  }

.fTelnetMenuButtons a {
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  color: black;
  display: block;
  font: 14px Arial, Helvetica, sans-serif;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  }

.fTelnetMenuButtons select {
  border: 1px solid black;
  border-radius: 5px;
  color: black;
  display: block;
  font: 14px Arial, Helvetica, sans-serif;
  padding: 8px 12px;
  width: 100%;
  }

.fTelnetMenuButtons table { background-color: white; }
.fTelnetMenuButtons td { padding: 2px; }

.fTelnetScrollback {
  background-color: green;
  border: 1px solid green;
  color: white;
  font: 14px Arial, Helvetica, sans-serif;
  margin: auto;
  padding: 5px;
  text-align: center;
  }

.fTelnetScrollback a { color: white; padding: 0 5px; text-decoration: none; }

.fTelnetStatusBar {
  background-color: blue;
  border: 1px solid blue;
  color: white;
  font: 14px Arial, Helvetica, sans-serif;
  margin: auto;
  padding: 5px;
  text-align: left;
  }