:root{
    --background: url('https://w.wallhaven.cc/full/wq/wallhaven-wq2r8p.png');
    --white: #fff;
    --dblueabt: rgba(11, 32, 54,0.5);
    --dblue: rgba(11, 32, 54,0.8);
    --dblue2: #0d2640;
    --lblue: #050e17;
    --lblue2: #123559;
    --a: rgba(30, 82, 133,0.5);
    --content: black;
}
*{cursor: url(https://cur.cursors-4u.net/cursors/cur-1/cur1.ani), url(https://cur.cursors-4u.net/cursors/cur-1/cur1.png), auto !important;}
body {
  margin: 0 auto; padding: 10px;
  height: auto;
  width: 75%;
  background-image: var(--background); background-size: cover;
  display: block;

  font-family: 'Titillium Web';
    color: var(--white);
    font-size: 10pt;
    text-align: justify;
    letter-spacing: 1px;

#header { border: solid 1px yellow;}

#box1 {
    width: 100%;
    margin: 0 auto; padding: 10px;
}

#link{
  display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  margin: 5px; padding: 5px;
  height: 25px;

a{
  width: 12rem;
  background-color: var(--dblue2);
    color: var(--white);
  letter-spacing: 3px;
  font-style: italic;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid var(--dblue2);
    -moz-border-radius:10px 10px 0px 0px;
    -webkit-border-radius:10px 10px 0px 0px;
    border-radius:10px 10px 0px 0px;
  text-decoration: none;
  transition: 1s;
    -moz-transition:1s;
    -webkit-transition:1s;
}

a:hover {
  background-color: var(--a);
  border: 1px solid var(--white);
  letter-spacing: 5px;
  transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
}
}

#box2 {
    display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    padding-left: 10px;
    padding-right: 10px;
}

#box3 {
    border: 1px solid var(--dblue2);
    text-align: left;
    background-color: var(--dblue);
    width: 95%;
    margin-bottom: 15px; padding: 10px;
}

#abt {
    border: 1px solid var(--dblue2);
    margin-right: 10px; padding: 10px;
    text-align: left;
    letter-spacing: 2px;
    background-color: var(--dblueabt);
    width: 25%;
    float: left;
}

h1 {
    font-family: serif;
        text-align: center;
        font-size: 12pt;
        line-height: 30px;
        font-style: bold;
        letter-spacing: 3px;
    display: block;
    border-bottom: 1px solid var(--lblue2); border-top: 1px solid var(--lblue2);
    margin: 0 auto;
    background-color: black;
}
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    text-align: center;
}

.scaledown {
    width: 20%;
    height:25%;
    object-fit: contain;
}

.scaledown2 { /*smaller scale-down*/
  width: 5%; max-width: 25%;
  height: 10%;
  object-fit: contain;
}
.marquee {
    --gap: 10px;
    margin: 0 auto;
    width: 90%;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);

    .marquee_content:hover {animation-play-state: paused;}

    .marquee_content {
      flex-shrink: 0;
      display: flex;
      justify-content: space-around;
      gap: var(--gap);
      min-width: 100%;
    }
}

.enable-animation .marquee_content {animation: scroll 160s linear infinite;}

.blinquee {
    --gap: 10px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);

    .blinquee_content:hover {animation-play-state: paused;}

    .blinquee_content {
      flex-shrink: 0;
      display: flex;
      justify-content: space-around;
      gap: var(--gap);
      min-width: 100%;
    }
}

.enable-animation .blinquee_content {animation: scroll 60s linear infinite;}

  
@keyframes scroll {
  from {transform: translateX(0);}
  to {transform: translateX(calc(-100% - var(--gap)));}
}
  
/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .marquee_content {animation-play-state: paused !important;}
}
  


footer{
  text-align: center;

}



.scan {
    top: 0;
    left: 0;
    background-color: transparent;

    position: relative;
    overflow: hidden;
}
.scan:before, .scan:after {
    display: block;
    pointer-events: none;
    content: '';
    position: absolute;
}
.scan:before {
    width: 100%;
    height: 0.3px;
    z-index: 2147483649;
    background: rgba(0, 0, 0, .5);
    opacity: 0.5;
    
}
.scan:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483648;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .3) 51%);
    background-size: 100% 2px;
    
}

/* ANIMATE UNIQUE SCANLINE */
@keyframes scan {
    0% {
        transform: translate3d(0, 200000%, 0);
   }
}
@keyframes scan {
    0% {
        background-position: 0 1%;
   }
}