hr {
   height: 15px
}

#button {
    position: absolute;
    height: 100px;
    top: 125px;
    cursor: pointer;
}

#terminal {
     width: 800px;
     height: 600px;
}

.floating {
            position: relative;
            animation: float 3s ease-in-out infinite;
        }

     @keyframes float {
        0%   {
             transform: translateY(0);
             }

        50%  {
             transform: translateY(-20px);
             }

        100% {
             transform: translateY(0);
             }
        }

body {
    cursor: url("images/cursor.png"), default;
}

#copyrightText {
  color: white;
}

#boot {
     color: #ab19ff;
     font-family: "DOS";
     font-size: 20px;
     margin-left: 10px;
}

#drive {
     color: #ab19ff;
     font-family: "DOS";
     font-size: 20px;
     margin-left: 10px;
}

@font-face {
     font-family: "Alte Haas";
     src: url("fonts/AlteHaasGroteskRegular.ttf");
}

@font-face {
     font-family: "DOS";
     src: url("fonts/ModernDOS8x8.ttf");
}

.container{
  display: flex;
  flex-direction: row;
}

.terminal_main{
  display: flex;
  flex-direction: row;
  width: 800px;
  height: 600px;
}

#inputTerm{
     background-color: transparent;
     color: #ab19ff;
     width: 90%;
     border: none;
     outline: none;
     font-family: "DOS";
     font-size: 20px;
}

.displayTerm{
     color: #ab19ff;
     font-family: "DOS";
     font-size: 20px;
     margin: 10px;
}

/*crt effect*/
  .crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
  opacity: 0.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.10626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.10626;
  }
  30% {
  opacity: 0.18128;
  }
  35% {
  opacity: 0.23604;
  }
}

@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

.crt {
  animation: textShadow 1.6s infinite
}

.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 6 / 2; }
.div2 { grid-area: 1 / 2 / 5 / 5; }
.div3 { grid-area: 5 / 2 / 6 / 5; }
.div4 { grid-area: 1 / 5 / 6 / 6; }


#uh {
  width: 100%;
  height: 900px;
  margin-left: 25px;
  margin-top: 25px;
}

#uh2 {
  width: 100%;
  height: 900px;
  margin-right: px;
  margin-top: 25px;
}

li {
  list-style-type: none;
}

#div4 {
  background-image: url(backgrounds/139.png);
  width: 100%;
  height: 60%;
  margin-top: 20px;
}

.div4{
  margin-right: 50px;
}

#gif1 {
  margin-top: 60px;
}

#marqueeBorder {
  position: absolute;
  z-index: 1;
  margin-left: 131px;
  margin-top: 5px;
}

.buttons {
  margin-left: -15px;
}

.div4child {
  margin-left: -6px;
}

#marqueeImage {
  width: 100%;
  margin-top: -20px;
}

table, th, td {
  border: 1px solid white;
}

table {
  margin-left: 60px;
}

.div1 {
  margin-left: 10px;
  margin-top: 150px;
}

#test {
  position: absolute;
  left: 76px;
  top: 74px;
  z-index: 2;
}

#window {
  position: absolute;
  margin-left: 70px;
  margin-top: 30px;
  z-index: 1;
}

#draggable {
  display: flex;
  cursor: pointer;
  position: relative;
}

#minbut {
  position: absolute;
  z-index: 10;
  left: 285px;
  top: 36px;
}

#maxbut {
  position: absolute;
  cursor: auto;
  z-index: 2;
  left: 302px;
  top: 36px;
}

#closebut {
  position: absolute;
  z-index: 2;
  left: 321px;
  top: 36px;
}

.div3 {
  position: absolute;
  top: 750px;
  left: 545px
}

.test {
  position: absolute;
  right: 50px;
  top: 137px;
}
.test:hover {
  transform: scale(1.05);
}