<html lang="en">

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Hecker's Terminal</title>

<style>

html,

body {

height: 100%;

margin: 0;

padding: 0;

font-family: monospace;

}

body {

background: linear-gradient(135deg, #023102 0%, #024702 50%, #025002 100%);

background-repeat: no-repeat;

background-attachment: fixed;

background-size: cover;

display: flex;

justify-content: center;

margin: 2vh;

color: white;

z-index: 1;

}

#head {

position: relative;

/* border: 2px solid white; */

left: 45vw;

width: 50vw;

height: 8vh;

display: flex;

justify-content: center;

align-items: center;

opacity: 1;

font-size: clamp(1.5rem, 4vw, 2.5rem);

}

#head::after {

content: '';

position: absolute;

width: 50vw;

height: 8vh;

z-index: -1;

opacity: 1;

border-radius: 50px;

/* border: 2px solid black; */

background: linear-gradient(100deg, rgb(0, 255, 0), rgb(0, 0, 0), rgb(0, 255, 13));

animation: move 1s ease-in-out 20ms alternate-reverse infinite;

}

#line {

position: absolute;

right: -80%;

width: 5px;

height: 4vh;

background-color: rgb(255, 255, 255);

animation: opac 400ms ease-in-out 1ms alternate-reverse infinite;

}

@keyframes opac {

from {

opacity: 1;

/* transform: rotate(0deg); */

}

to {

opacity: 0;

/* transform: rotate(360deg); */

}

}

@media (max-width: 500px) {

#head {

padding: 1vh 2vw;

font-size: clamp(1.2rem, 5vw, 2rem);

}

#head::after {

content: '';

width: 60vw;

height: 8vh;

}

#line {

right: -76%;

width: 4px;

height: 28%;

}

}

.main {

/* border: 2px solid black; */

height: 20vh;

width: 60vw;

margin: 5px;

padding: 5px;

display: flex;

justify-content: center;

align-items: center;

position: relative;

}

@keyframes move {

from {

rotate: z 6deg;

translate: 0px -10px;

}

to {

rotate: z 3deg;

translate: 0px 10px;

}

}

.content {

position: relative;

top: 32vh;

right: 65vw;

display: flex;

justify-content: flex-start;

flex-direction: column;

align-items: center;

width: 80vw;

/* gap: 10vw; */

margin: 5vw;

padding: 5vw;

}

.content * {

position: relative;

left: 40vw;

top: 8vh;

margin: 2vw;

padding: 2vw;

/* gap: 10vw; */

width: 80vw;

}

#content {

display: flex;

/* Or grid, depending on your layout */

flex-direction: column;

/* Align the items vertically if needed */

gap: 10px;

/* Or your preferred gap value */

padding: 10px;

width: 100%;

box-sizing: border-box;

/* Ensure padding and width don’t break the layout */

}

#content div {

padding: 5px;

margin: 0;

background-color: #000000;

/* Optional, for better visibility */

border-radius: 5px;

/* Optional, if you'd like rounded corners */

}

</style>

<div class="main">

<h1 id="head">Hecker's Terminal</h1>

<div id="line"></div>

</div>

<div id="content" class="content">

</div>

<script src="script.js"></script>