body,h1,h2{font-family: "Raleway", sans-serif}
body, html {height: 100%}
:root{
  /* App 01 Background, Logo, and Glow Color */
  --app01-logo: url(../logos/App01_Logo.png);
  --app01-bg: url(../media/App01_Background.png);
  --app01-glow: rgba(178, 80, 235, 0.582);

  /* App 02 Background, Logo, and Glow Color */
  --app02-logo: url(../logos/App02_Logo.png);
  --app02-bg: url(../media/App02_Background.png);
  --app02-glow: rgba(7, 178, 245, 0.582);
  
  /* App 03 Background, Logo, and Glow Color */
  --app03-logo: url(../logos/App03_Logo.png);
  --app03-bg: url(../media/App03_Background.png);
  --app03-glow: rgba(218, 12, 245, 0.582);
    
  /* App 04 Background, Logo, and Glow Color */
  --app04-logo: url(../logos/App04_Logo.png);
  --app04-bg: url(../media/App04_Background.png);
  --app04-glow: rgba(230, 196, 5, 0.582);
}
.sections {
    z-index: 3 !important;
}
.splash {
  overflow: hidden; /* Hide scrollbars */
}
  .header {
    overflow:hidden;
    background-color: black;
  }
  
  .gray-bar {
    background-color:rgb(27, 27, 27)
  }
  .bar-top {
    z-index: 6;
  }
  .view {
    bottom:0;
    right:0;
    left:0;
    position:absolute;
    top:0;
  }

  .left,
  .midleft,
  .midright,
  .right {
    bottom:0;
    overflow:hidden;
    position:absolute;
    top:0;
    z-index: 2;
  }
  .left { 
    right:75%;
    left:0;
    bottom:-1px;
  }
  .midleft {
    left:25%; 
    right:50%;
    bottom:-1px;  
  }
  .midright { 
    left:50%;
    right:25%;
    bottom:-1px;
  }
  .right {
    left:75%;
    right:0;
    bottom:-1px;
  }

  .logo1 {
    background: var(--app01-logo) !important;
  }
  .logo2 {
    background: var(--app02-logo) !important;
  }
  .logo3 {
    background: var(--app03-logo) !important;
  }
  .logo4 {
    background: var(--app04-logo) !important;
  }
  .logo1,
  .logo2,
  .logo3,
  .logo4 {
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    height: 90% !important;
    width: 90% !important;
    border: none;
    box-shadow: none;
    z-index: 3;
    position:center;
    margin-bottom: 50%;
    margin-left:5%;
  }

  /* Glow Effect: General Setup */
  .link1-1,
  .link2-1,
  .link3-1,
  .link4-1 {
    position: absolute;
    width: 100%;
    height: 95%;
    top: 3vw;
    z-index: 4;
  }
  .link1-2,
  .link2-2,
  .link3-2,
  .link4-2 {
    position: absolute;
    width: 100%;
    height: 95%;
    top: 3vw;
    left: 0;
    right:0;
    z-index: 3;
  }
  
  /* Glow Effect: App01 */
  .link1-1:hover {
    box-shadow: inset 20px 20px 20px 20px var(--app01-glow);
  }
  .link1-1:hover + .link1-2 {
    box-shadow: inset -20px -20px 20px 20px var(--app01-glow);
  }

  /* Glow Effect: App02 */
  .link2-1:hover {
    box-shadow: inset 20px 20px 20px 20px var(--app02-glow);
  }
  .link2-1:hover + .link2-2 {
    box-shadow: inset -20px -20px 20px 20px var(--app02-glow);
  }

  /* Glow Effect: App03 */
  .link3-1:hover {
    box-shadow: inset 20px 20px 20px 20px var(--app03-glow);
  }
  .link3-1:hover + .link3-2 {
    box-shadow: inset -20px -20px 20px 20px var(--app03-glow);
  }

  /* Glow Effect: App04 */
  .link4-1:hover {
    box-shadow: inset 20px 20px 20px 20px var(--app04-glow);
  }
  .link4-1:hover + .link4-2 {
    box-shadow: inset -20px -20px 20px 20px var(--app04-glow);
  }
  .divider1-0,
  .divider1-1,
  .divider1-2,
  .divider1-3,
  .divider1-4 {
    background-color:rgb(29, 29, 29);
    border-left:solid 2px #000;
    border-right:solid 2px #000;
    bottom:-1px;
    position:absolute;
    top:-5%;
    z-index:5;
  }
  .divider1-0 {
    left:0; 
    right:99.5%;
  }
  .divider1-1 {
    left:24.5%; 
    right:74.5%;
  }
  .divider1-2 {
    left:49.5%; 
    right:49.5%;
  }
  .divider1-3 {
    left:74.5%; 
    right:24.5%;
  }
  .divider1-4 {
    left:99.5%; 
    right:0;
  }
  
  .red-bar,
  .red-btn,
  .divider3,
  .divider4,
  .divider5-1,
  .divider5-2 {
    width:110%;
    height: 3vw;
    background-color:rgb(69, 14, 14);
    border-top:solid 2px #EFD6AC;
    border-bottom:solid 2px #EFD6AC;
    bottom:0;
    position:relative;
    top:0;
    left:-5%;
    right:0;
  }
  .divider4{
    height: 2vw;
  }
  .divider5-1{
    height: 1vw;
    z-index:6;
    background-color:rgb(29, 29, 29);
    border-top:solid 2px #000;
    border-bottom:solid 2px rgb(29, 29, 29);
  }
  .divider5-2{
    height: 1vw;
    z-index:6;
  }
  .red-bar{
    height:23%;
  }
  .red-btn{
    width:35%;
    height:25%;
    border-left:solid 2px #EFD6AC;
    border-right:solid 2px #EFD6AC;
    left:0;
    right:0;
    top:0;
    bottom:0;
    display:inline-block;padding:8px 16px;vertical-align:middle;
    overflow:hidden;text-decoration:none;;text-align:center;cursor:pointer;
    white-space:nowrap;
    font-size:125%;
    color:#EFD6AC;
    align-content: center;
    text-align: center;
  }
  
  .red-btn:hover{
    background-color:rgb(107, 21, 21);
  }

  .app01 {
    background-image: var(--app01-bg) !important;
  }
  .app02 {
    background-image: var(--app02-bg);
  }
  .app03 {
    background-image: var(--app03-bg);
  }
  .app04 {
    background-image: var(--app04-bg);
  }

  .app01,
  .app02,
  .app03,
  .app04 {
    background-position:center;
    background-size:auto;
    bottom:-1px;
    position:absolute;
    top:-5%;
  }


  .online {
    color:lime;
  }
  .offline {
    color:red;
  }
  .dev {
    color:yellow;
  }

p {line-height: 2}
.bgimg, .bgimg2 {
  min-height: 100%;
  background-position: center;
  background-size: cover;
}