@font-face { font-family: Mulish; src: url('/fonts/Mulish-VariableFont_wght.ttf'); }
@font-face { font-family: Alternity; src: url('/fonts/Alternity.otf'); }
@font-face { font-family: Nightingale; src: url('/fonts/Nightingale%20Sample.ttf'); }

:root {
  --cur-main:url('/assets/AeroArrow.png'), auto;
  --cur-point:url('/assets/AeroLink.png'), auto;
  --bg:#000308;
  --border:#161523;
  --gradient:#4374fe, #ff4fff;
  --purple:#4374fe;
  --pink:#ff4fff;
}

* {
  padding:0;
  margin:0;
  cursor:var(--cur-main);
}

body {
  background-color:var(--bg);
  color:white;
  font-family:'Mulish';
  font-size:14px;
  line-height:150%;
  width:100vw;
  height:100vh;
}

a {
  cursor:var(--cur-point);
  font-weight:bold;
  text-decoration:none;
  color:transparent;
  background:linear-gradient(45deg, var(--gradient));
  background-clip:text;
  transition:all 0.2s ease-in;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
}
a:hover {
  color:white;
  text-shadow:0 0 5px white;
  transition:all 0.2s ease-in;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
}





#chatbox {
  position:absolute;
  left:30px;
  top:50%;
  transform:translateY(-50%);
  width:280px;
  height:800px;
  background-color:var(--bg);
  border:1px solid transparent;
  border-image:linear-gradient(45deg, var(--gradient));
  border-image-slice:1;
}
#chatbox span {
  display:block;
  text-align:center;
  font-size:12px;
}
.shadow1:before {
  content:'';
  position:absolute;
  left:30px;
  top:50%;
  transform:translateY(-50%);
  width:260px;
  height:780px;
  padding:10px;
  z-index:-1;
  background:linear-gradient(45deg, var(--gradient));
  filter:blur(15px);
  opacity:0.5;
}

#chattable {
  width:260px;
  height:755px;
  border:0;
  margin:10px 10px 0 10px;
  color:white;
}





#updates {
  position:absolute;
  right:30px;
  top:50%;
  transform:translateY(-50%);
  width:280px;
  height:800px;
  background-color:var(--bg);
  border:1px solid transparent;
  border-image:linear-gradient(45deg, var(--gradient));
  border-image-slice:1;
}
.shadow2:before {
  content:'';
  position:absolute;
  right:30px;
  top:50%;
  transform:translateY(-50%);
  width:260px;
  height:780px;
  padding:10px;
  z-index:-1;
  background:linear-gradient(45deg, var(--gradient));
  filter:blur(15px);
  opacity:0.5;
}

#logbox {
  width:260px;
  height:780px;
  margin:10px;
  overflow:auto;
}

#label {
  border-radius:10px;
  background:linear-gradient(45deg, var(--gradient));
  font-family:'Alternity';
  font-size:25px;
  line-height:100%;
  letter-spacing:1px;
  text-align:center;
  padding:2px 0;
  margin-bottom:10px;
}

#entry {
  display:flex;
  align-items:center;
  border-radius:10px;
  margin-bottom:10px;
}
#entry .even {
  background:linear-gradient(120deg, #383B5E, #292E56 40%);
}
#entry .odd {
  background:linear-gradient(120deg, #23253E, #181D3A 40%);
}

#etext {
  margin:10px;
}

#etext p {
  text-align:justify;
  line-height:110%;
  margin:5px 0 0 0;
}

#etext span {
  display:block;
  font-family:"Rubik", sans-serif;
  font-weight:bold;
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-align:center;
  color:#8F9ADC;
  padding:3px 0 2px 0;
  border-radius:20px;
}

.odd {
  background-color:#393B61;
}
.even {
  background-color:#181D3A;
}





#page {
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
  width:1200px;
  height:800px;
  background-color:var(--bg);
  border:1px solid transparent;
  border-image:linear-gradient(45deg, var(--gradient));
  border-image-slice:1;
}

.shadow3:before {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
  width:1200px;
  height:800px;
  z-index:-1;
  background:linear-gradient(45deg, var(--gradient));
  filter:blur(15px);
  opacity:0.5;
}

#header {
  width:100%;
  height:200px;
  border-bottom:1px solid transparent;
  border-image:linear-gradient(45deg, var(--gradient));
  border-image-slice:1;
}
#header a img {
  cursor:var(--cur-point);
}

#container {
  display:flex;
  flex-direction:row;
  flex-wrap:no-wrap;
  justify-content:space-between;
  gap:20px;
  margin:20px;
  height:557px;
  border:1px solid transparent;
  border-image:linear-gradient(45deg, var(--gradient));
  border-image-slice:1;
}

#left {
  width:43%;
  height:517px;
  margin:20px 0 20px 20px;
  text-align:justify;
  overflow:auto;
}

#right {
  width:43%;
  margin:20px 20px 20px 0;
  height:517px;
  text-align:justify;
  overflow:auto;
}
#left p, #right p {
  margin-right:10px;
}
#right p span {
  border-radius:5px;
  background:linear-gradient(45deg, var(--gradient));
  padding:3px 7px;
  font-weight:bold;
  margin-right:5px;
}

#middle {
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  align-items:center;
  width:4%;
}
#middle .icon {
  margin:10px 0;
}
#middle .icon img {
  cursor:var(--cur-point);
  width:50px;
  transition:all 0.2s ease-in;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
}
#middle .icon img:hover {
  filter:brightness(500%) drop-shadow(0 0 1px white);
  transition:all 0.2s ease-in;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
}
#middle a {
  position:relative;
  display:inline-block;
  text-align:center;
  text-decoration:none;
}
#middle a span {
  color:white;
  cursor:var(--cur-point);
  position:absolute;
  left:-25px;
  right:-25px;
  bottom:0;
  padding:5px 0;
  text-transform:uppercase;
  opacity:0;
  transition:all 0.2s ease-in;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
}
#middle a:hover span {
  background:linear-gradient(45deg, var(--gradient));
  border-radius:25px;
  bottom:60px;
  opacity:1;
  transition:all 0.2s ease-in;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
}





#guestbook {
  width:100%;
  height:457px;
  margin:20px;
}





h1 {
  font-family:'Alternity';
  font-size:50px;
  font-weight:normal;
  line-height:100%;
  text-align:center;
  margin-bottom:10px;
  color:transparent;
  background:linear-gradient(45deg, var(--gradient));
  background-clip:text;
}

p {
  margin-bottom:15px;
}

i {
  font-family:'Nightingale';
}

b {
  text-transform:uppercase;
  text-shadow:0 0 5px white;
}

ul {
  padding-left:20px;
  padding-right:10px;
}
ul li {
  list-style:'✦';
  padding-left:10px;
  padding-bottom:10px;
}
li::marker {
  color:var(--pink);
}

blockquote {
  margin:0 10px 15px 12px;
  padding-left:10px;
  border-left:1px solid transparent;
  border-image:linear-gradient(0deg, var(--gradient));
  border-image-slice:1;
}