/* importing tailwind css */
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  height: 100vh;
}

/* hide back to top */
a.md-top.md-icon {
  display: none;
}

/* make header transparent */
.md-header {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* remove search bar */
.md-search {
  display: none;
  width: 0;
}

.md-tabs {
  z-index: 3;
  background-color: transparent;
}

.md-tabs .md-tabs__link {
  color: #8b8585 !important;
}

.md-tabs .md-tabs__link--active {
  color: #cccccc !important;
}

.md-tabs .md-tabs__link:hover {
  color: white !important;
}

/* remove search icon on mobile devices */
label.md-header__button.md-icon[for=__search] {
  display: none;
}

/* main outer box css (overflowing topbar) */
/* flex flex-row flex-grow flex-wrap w-full overflow-auto items-center */
#main-box {
  background: linear-gradient(99.9deg, rgb(10, 17, 27), rgb(22, 98, 180));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  color: white;
}

#main-box a {
  font-weight: bold;
}

#img_app-logo {
  width: 40px;
  height: auto;
}

a#btn_learn-more {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 0.5rem 2rem;
  border-radius: 3px;
  transition-duration: 500ms !important;
  box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
}

a#btn_learn-more:hover {
  transition-duration: 500ms !important;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 0.5rem 2rem;
  border-radius: 3px;
}

/* terminal div, containing terminal buttons and terminal output */
.terminal {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.4);
}

/* --- classes for terminal design --- */
/* class for decorating three buttons on the top of the terminal */
.terminal-toolbar-button {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.2);
}

.terminal-title {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.3);
}

.terminal-frame {
  position: relative;
  user-select: none;
  font-size: 14px;
}

.terminal-frame #terminal-placeholder {
  position: relative;
  color: transparent;
}

.terminal-frame #terminal-placeholder>* {
  color: transparent !important;
}

.terminal-frame #terminal-content {
  position: absolute;
  top: 0;
  color: white;
}

.terminal-output {
  padding-right: 0.35em;
  color: rgb(160, 160, 160);
}

.terminal-command {
  padding-right: 0.35em;
  word-break: break-all;
  user-select: text;
}

.terminal-command.terminal-cursor {
  padding-right: 0;
  border-right: .35em solid transparent;
  animation: 
    blink-cursor .75s step-end infinite;
}

/* '$' inside the terminal */
.terminal-command-dollar-sign {
  color: rgb(5, 241, 52);
  padding-right: 0.5em;
}

/* mobile devices */
@media (max-width:768px) {

  /* move element higher to show whole terminal when url is not hidden */
  .terminal {
    margin-bottom: 45px;
  }

  /* make terminal title smaller */
  .terminal-title {
    font-size: 13px
  }

  .terminal-frame {
    font-size: 13px;
  }
}

/* The typewriter cursor effect */
@keyframes blink-cursor {

  from, to { 
    border-color: transparent 
  }

  50% { 
    border-color: rgba(255, 255, 255, 0.2); 
  }
}