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

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

#pranked {
  position: absolute;
  width: 200px;
}

.fourohfour {
  position: relative;
}

#uhoh {
  position: relative;
  color: white;
  font-size: 30px;
  text-shadow: black;
  font-family: "Comic Relief";
}

#uhoh2 {
  position: relative;
  color: white;
  font-size: 30px;
  text-shadow: black;
  font-family: "Comic Relief";
  word-wrap: break-word;
  text-align: center;
}

#backhome {
  position: relative;
  width: 250px;
}

#sucks {
  position: relative;
  width: 1000px;
}

#arrow1 {
  position: relative;
  width: 200px;
  top: -3.5vw;
}

#arrow2 {
  position: relative;
  width: 200px;
  top: -3.5vw;
}

.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{
  position: absolute;
  width: 400px;
  height: 780px;
  background-image: url("backgrounds/bluebrick.jpg");
  border-left: 2px solid white;
  border-top: 2px solid white;
  left: 80vw;
  top: 22.4vh;
}

.div4A {
  position: absolute;
  width: 50px;
  top: 23.3vh;
  left: 80.5vw;
}

#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;
  background-image: url("backgrounds/tumblr_ce6a9f6b614a823bf3bedce5537ef1dc_20e3e7ab_1280.png");
  width: 400px;
  height: 780px;
  top: 22.4vh;
  left: -1vw;
  border-right: 2px solid white;
  border-top: 2px solid white;
}

.div3A {
  position: absolute;
  width: 100px;
  top: 23.3vh;
  left: 15vw;
}
.test {
  position: absolute;
  right: 50px;
  top: 137px;
}
.test:hover {
  transform: scale(1.05);
}


hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 10px solid #ccc;
    margin: 1em 0;
    padding: 0;
    width: 1000px;
}

.test1 {
  position: absolute;
  width: 800px;
  left: 500px;
}

#links {
  font-size: 20px;
  color: white;
}

a {
  color: white;
}

#header2 {
  color: white;
  position: absolute;
  top: 140px;
  right: 60px;
}

#yomom {
  position: absolute;
  top: 200px;
  right: 40px;
  width: 400px;
  padding: 5px;
}

.div1 {
  position: absolute;
  top: -7vw;
  left: 19vw;
}

.div2A {
  background-image: url("backgrounds/b7.gif");
  border: 2px solid white;
  position: absolute;
  width: 100vw;
  height: 50px;
  left: -.1vw;
  top: 17vh;
}

#green {
  position: relative;
  top: .45vw;
  border: 2px solid greenyellow;
  margin-right: 4px;
}

#eric {
  position: relative;
  top: .45vw;
  border: 2px solid white;
  margin-right: 4px;
}

#about2 {
  position: relative;
  top: .45vw;
  border: 2px solid yellow;
  margin-right: 4px;
}

#fish {
  position: relative;
  top: .45vw;
  border: 2px solid gray;
  margin-right: 4px;
}

#NIN {
  position: relative;
  top: .45vw;
  border: 2px solid black;
  margin-right: 4px;
}

#blog {
  position: relative;
  top: .45vw;
  border: 2px solid black;
  margin-right: 4px;
}

#versiontext {
  color: white;
  font-size: 12px;
}

.versiontext {
  position: absolute;
  left: 45vw;
  top: 72vh;
  width: 400px;
}

#construct {
  position: absolute;
  left: -3vw;
  top: .9vh;
}

#construct2 {
  position: absolute;
  left: 10vw;
  top: .9vh;
}