/*
                                @@    @@   @@@@@@   @@   @@   @@@@@   @@@   @@      @@    @@   @@@@@@   @@@@@@@   @@@@@@@@  @@@   @@   @@@@@@                                 
                                @@@  @@@  @@    @@  @@   @@  @@   @@  @@@@  @@      @@@  @@@  @@    @@  @@    @@  @@        @@@@  @@  @@    @@                                
                                @@ @@ @@  @@    @@  @@@@@@@  @@@@@@@  @@ @@ @@      @@ @@ @@  @@    @@  @@@@@@@   @@@@@@@@  @@ @@ @@  @@    @@                                
                                @@    @@  @@    @@  @@   @@  @@   @@  @@  @@@@      @@    @@  @@    @@  @@   @@   @@        @@  @@@@  @@    @@                                
                                @@    @@   @@@@@@   @@   @@  @@   @@  @@   @@@      @@    @@   @@@@@@   @@    @@  @@@@@@@@  @@   @@@   @@@@@@                                 
www.mohanmoreno.ch
*/

body {
  margin: 1rem; 
  max-width: 100vw;
  color: #b1ebeb;
  background: #020534;
  font-family: monospace;
  font-size: clamp(0.12rem, 1.5vw, 3rem);
  letter-spacing:-0.3em;
  overflow-x: hidden;
  /*cursor:text;*/
}
::selection {
  color: #020534;
  background-color: #ff7700;
}
::-moz-selection{
  color: #020534;
  background-color: #ff7700;
}
textarea {
  left: -1000px;
  position: absolute;
}
b {
  font-weight: bold;
  text-decoration: underline;
}
#command {
  cursor: text;
  color: #b1ebeb;
}
#liner {
  line-height: 1.3em;
  animation: show 0.5s ease forwards;
  animation-delay: 1.2s;
  opacity: 0;
padding: 0;
display: flex;
flex-direction: row;
padding-top: -0.2em;

}
.prompt {
  line-height: 1.3em;
  animation: show 0.5s ease forwards;
  animation-delay: 1.2s;
  opacity: 0;
    line-height: 1.3em;
  animation: show 0.5s ease forwards;
  animation-delay: 1.2s;
  opacity: 0;
display: flex;
flex-direction: row;
color: #ff7700;
  letter-spacing: 0.05em;
margin-top: -0.01em;


}

#liner::selection{
  background-color:#020534;
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
p {
  display: block;
  line-height: 1.3em;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  letter-spacing: 0.05em;
  animation: typing 20ms steps(50, end);
  overflow-x: hidden;
  max-width: 100vw;
  margin-top: -0.01em;
}
.no-animation {
  animation: typing 0 steps(100, end);
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.index {
  color: #ff7700;
  font-weight:900;
}
.color2 {
  color: #b1ebeb;
  font-size: clamp(0.12rem, 1.5vw, 3rem);
    margin-top: -0.01em;
}
.command {
  color: #b1ebeb;
  color: #ff7700;
  text-shadow: 0 0 5px #ff7700; 
}
.long{
  display: block;
  line-height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  letter-spacing: 0.05em;
  animation: typing 20ms steps(50, end);
  overflow-x: hidden;
  max-width: 100vw;
    color: #b1ebeb;
    font-size: clamp(0.12rem, 1.5vw, 3rem);
    white-space: pre-wrap;
      margin-top: -0.01em;
}
.hist {
      color: #ff7700;
}
.error {
  color: #b1ebeb;
}
.white {
  color: #ff7700;
}
.inherit,
a {
  color: #b1ebeb;
}
a {
  text-decoration: underline;
}
a:hover {
  background: #b1ebeb;
  color: #020534;
}
a:focus {
  outline: 0;
}
#typer{
  letter-spacing: 0.05em;
  font-size: clamp(0.12rem, 1.5vw, 3rem);
  background-color:#020534;
  margin-left: 0.65em;
  margin-right: 0;
  padding-right: 0;
  margin-top: -0.01em; 
}
*::selection{
  color: #020534;
  background-color: #ff7700;
}
#typer::selection{
  color: #020534;
  background-color: #ff7700;
}
#command::selection{
    color: #020534;
  background-color: #ff7700;
}
textarea::selection{  background-color: #ff7700;
}
.pixel{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0.05em;
  animation: typing 20ms steps(50, end);
  overflow-x: hidden;
  max-width: 100vw;
  font-weight:600;
  color: b1ebeb;
  margin-top:0;
  font-size: clamp(0.12rem, 1.5vw, 3rem);
  margin: 1rem;
  max-width: 100vw;
  color: #b1ebeb;
  background: #020534;
  font-family: monospace;
  margin: 0;
}
#cursor{
  position: relative;
  opacity: 1;
  overflow: hidden;
  display: inline-block;
  text-decoration: blink;
  animation: blink 1s linear infinite;
  margin: 0;
  padding: 0;
  width: 0.65em;
  margin-top: -0.02em;
  border-bottom: 0.1em #ff7700 solid;
  color: none;
  background-color: none;
  letter-spacing: 0.05em;
  font-size:1em;
}
@keyframes blink{
	0%{opacity: 1.0;}
  1%{opacity: 0.0;}
  50%{opacity: 0.0;}
  51%{opacity: 1.0;}
}
.modal{
    background-color: rgba(2, 5, 52, 0.8);
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all 0.3s ease-in-out;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;   
}
.modal.open{
    opacity: 1;
    z-index: 999;
}
.modal-inner{
    background-color: #020534;
    border: 2px solid #ff7700;
    box-shadow: 0 0 20px rgba(255, 119, 0, 0.3);
    text-align: left;
    width: 90vw;
    color: #b1ebeb;
    font-family: monospace;
    display: flex;
    flex-direction: column;
  	justify-content: right;
      }
.modal-inner h2 {
    margin: 0 0 15px 0;
    color: #ff7700;
    font-size: 1.5em;
}
.p-modal{
  display: block;
  line-height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  letter-spacing: 0.05em;
  animation: typing 20ms steps(50, end);
  overflow-x: hidden;
  max-width: 100vw;
  color: #b1ebeb;
  font-size: clamp(0.3rem, 1.5vw, 1rem);
  white-space: pre-wrap;
  margin-top: -0.01em;
}
.modal-inner button {
    background-color: #ff7700;
    color: #020534;
    border: none;
    cursor: pointer;
    font-family: monospace;
    font-size: 1em;
    transition: all 0.3s ease;
    right: 0;
    width: 4em;
    height: 2em;
}
.modal-inner button:hover {
    background-color: #b1ebeb;
    color: #020534;
}
.interieur{
  padding: 1em;
}
.modal-img{
    max-width: 100%;
    max-height: 60vh;
}
.ba-cnt{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 1em;
  img{
    width: 25%;
    height: auto;
  }
}
@media screen and (max-width:550px) {
  .ba-cnt{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 1em;
  img{
    width: 80%;
    height: auto;
  }
}
}
.hr-cnt{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 1em;
  img{
    max-width: 35%;
    height: auto;
  }
}
@media screen and (max-width:410px) {
  .hr-cnt{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 1em;
  img{
    width: 70%;
    height: auto;
  }
  }
}
.archi-cnt{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 1em;
  img{
    width: 35%;
    height: auto;
  }
}
@media screen and (max-width:570px) {
  .archi-cnt{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 1em;
  img{
    width: 80%;
    height: auto;
  }
  }
}
.sh-cnt{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 1em;
  img{
    width: 30%;
    height: auto;
  }
}
@media screen and (max-width:485px) {
  .sh-cnt{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
	/*
    flex-wrap: wrap;*/
  align-items: center;
  gap: 1em;
  img{
    width: 70%;
    height: auto;
  }
  }
}
h2{
  letter-spacing:0.05em;
}

/*
@font-face {
  font-family: 'Monosansre';
	src: url("../font/mono-sans-re.woff2") format("woff2");
}
*{
  font-family:'Monosansre';
}
*/
body::-webkit-scrollbar {
    width: 0.5em;
}
body::-webkit-scrollbar-track {
    background: rgba(2, 5, 52, 0.5);
}
body::-webkit-scrollbar-thumb {
    background: rgba(255, 119, 0, 0.9);
}
body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 119, 0, 1);
}