@import url('defaults.css');
 @import url('basic2.css');

 :root {
  --base-colour: #000;
  --text-colour: #cecece;
  --text-bold: #4d4d4d;
  --accent: #00ff22;

  --bg-img: url(/!assets/!about/BG.webp);
  --bg-position; top;
  --bg-size: 100%;

  --wrapper-width: 1200px; 

  --body-padding: 0;

  --overflow-x: hidden;

  --font-family: "DOS-V", monospace;

  --descbox-w: 610px;
  --descbox-h: 450px;
  --descbox-text-w: 70%;
  --descbox-text-h: 220px;
  --descbox-text-l: 1.5em;
  --descbox-text-t: 1em;
}

b { font-size: 15pt; }

#wrapper {
  background: var(--base-colour); 
  box-shadow: -1px 0px 60px 58px rgba(0, 0, 0, 0.719);
  -webkit-box-shadow: -1px 0px 60px 58px rgba(0, 0, 0, 0.719);
  -moz-box-shadow: -1px 0px 60px 58px rgba(0, 0, 0, 0.719);
}

.header {
  background: url(/!assets/!about/header.webp);
  height: 328px;
  width: 1200px;
  position: absolute;
  top: 0;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/*Header Logo*/
.logo {
  width: 400px;
  z-index: 3;
  position: absolute;
}

.logo img {
  width: 400px;
  position: relative;
  top: 120px;
  left: 140px
}

.footer {
  background: url(/!assets/!about/footer.webp);
  background-position: center;
  height: 445px;
  width: 1200px;
  position: absolute;
  top: calc(100% - 32px);
  animation: glow 5s infinite;
}

/* SECTION 1 - COMPUTER! */

/* Positioning of the section itself. */
#section1 {
  width: 510px;
  height: 340px;
  position: relative;
  left: 60px;
  top: -90px;
  z-index: 2;
}

/*header logo*/
.wow {padding-bottom: 5px;}
.wow img {width: 470px;}

/*the container image*/
.computer {
  background: url(/!assets/!about/compbox.webp);
  background-repeat: no-repeat;
  background-size: 510px;
  width: 510px;
  height: 340px;
}

/*inner content paramiters within the container*/
.computer .content {
  padding: 1em;
  line-height: 15px;
  z-index: 2;
  position: relative;
}

.content .soft {
  line-height: 18px;
}

.soft li {
  padding-top: 4px
}

/*Neofetch*/

.computer .content pre,
.neofetch {
  font-size: 11pt;

}

.neo-logo, .neo-accent, .neofetch a {
  color: #80d4ff;
}

.neofetch {
  display: flex;
  gap: 10px;
  position: absolute;
  left: 1em;
}

.neofetchtext {
  width: 50%;
  font-size: 12pt;
}

.neofetchtext p {
  padding-bottom: 6px;
}

/*WOW MY COMPUTER!*/

/*SECTION 2 - "information"*/
/*very useful information about myself. yes.*/

/*positioning*/
#section2 {
  position: relative;
  z-index: 2;
  left: 545px;
  top: 100px;
  width: 600px;
  height: 440px;
}

/*image container*/
.descbox {
  background: url(/!assets/!about/descbox.webp);
  background-repeat: no-repeat;
  background-size: var(--descbox-w);
  width: var(--descbox-w);
  height: var(--descbox-h);
}

.overlay {
  position: absolute;
  z-index: 1927;
  bottom: 0;
  left: calc(var(--descbox-text-l) * 2.5);
  border-bottom-right-radius: 4em;
  background: linear-gradient(360deg, #000, #00000000);
  height: calc(var(--descbox-text-h) - 150px);
  width: var(--descbox-text-w);
  pointer-events: none;
}

.descbox li {
  padding-bottom: 10px;
}

/*inner content within the section*/
.descbox .text {
  position: relative;
  z-index: 1920;
  left: var(--descbox-text-l);
  top: var(--descbox-text-t);
  width: var(--descbox-text-w);
  font-size: 13.5pt;
  height: var(--descbox-text-h);
  overflow-y: auto;
  pointer-events: all;
  scrollbar-width: none;
}

.descbox .text::-webkit-scrollbar {
  display: none;
}

/*sona header atop of the section*/
.sonas {
  position: relative;
  left: 170px;
  top: -20px;
}

.sonas img {
  width: 300px;
}

.sonas img:hover {
  filter: brightness(130%)
}

/*Additional Animations*/
@keyframes glow {
  0%, 100% {filter: brightness(100%);}
  30% {filter: brightness(130%);}
  80% {filter: brightness(80%)}
}