/*Sized to fit screen properly*/
html, body {
    height: 100%;
    width: 100%;
}
/*-------------*/

css-doodle{
    display:none;
}
body {
    display: table;
    margin: 0;
    padding-top: 54px;
    background-color: #1a1a1a;
    background: linear-gradient(151deg, #16161d,#1a1a1a,#333333);
    background-size: 1600% 1600%;
    animation: BGgrad 30s ease infinite;
    color: aliceblue;
    font-family: 'Courier New', Courier, monospace;
}

@keyframes BGgrad {
      0% {
        background-position: 4% 0%
      }

      50% {
        background-position: 97% 100%
      }

      100% {
        background-position: 4% 0%
      }
    }

@keyframes fontchange {
    0% {
        color: #15ff00;
    }
    50% {
        color: #008a12; 
    }
    100% {
        color: #58ff49;
    }
    }
@keyframes textcursor{
    0%{
        color:#15ff00;
    }
    50%{
        color: #16161d;
    }
    100%{
        color: #15ff00;
    }
}

/*used to contain the entire body below the navbar*/
/* <div class="holowrapper">
        <div class="holoBackPanel">
        Content
        </div>
    </div>
*/
.wrapper {
    height: 100%;
    text-align: center;
    margin: auto;
    overflow-x: hidden;
    z-index: 0;
}

.BackPanel {
    display: inline-block;
    width: 95%;
    margin: auto;
    background-image:linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
    height: 100%;
    z-index: 1;
}
/*------------------*/

/*NavBar styling*/
.asiNav {
    background-color: #1a1a1a;
    box-shadow: 0 -2px 20px 20px #1a1a1a;
}
/*------------*/

@media (min-width: 992px) {
    
    body {
        display: table;
        margin: 0;
        background-color: #1a1a1a;
        padding-top: 56px;
    }

    .BackPanel {
        display: inline-block;
        width: 85%;
        margin: auto;
        margin-bottom:100px;
        background-image:linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
        height: 100%;
    }

    css-doodle {
        --rule: (
    :doodle {
      @grid: 13 / 100vmax;
      width: 100%;
      
    }
    :container {
      transform: 
        rotateY(30deg) rotate(10deg) 
        scale(1.5);
      width:100%;
    }
    :after {
      content: '';
      @size: 100%;
      background-size: @rand(5%, 10%) @rand(5%, 10%);
      background-position: center;
    }
    @even {
      background: #1a1a1a;
      :after { 
        background-image: linear-gradient(
          0deg,
          #101010 50%, transparent 50% 
        );
      }
    }
    @odd {
      background: @pick(#212121, #131314);
      :after { 
        background-image: linear-gradient(
          90deg, 
          #1b1b1b 50%, transparent 50% 
        );
      }
    } 
  );
        z-index: -100;
        position: absolute;
        display:unset;
    }
}

p {
    text-align: justify;
}

h1 {
    text-align: center;
    color: #16161d;
    animation: fontchange 4s ease infinite;
    
}

h2 {
    text-align: center;
    color: #16161d;
}

h3 {
    text-align: center;
    color: #16161d;
}

h4 {
    text-align: center;
    color: #16161d;
}

a {
    color: turquoise;
    text-decoration: none;
}

    a:hover {
        color: paleturquoise;
        text-decoration: none;
    }

    a:visited {
        color: darkorchid;
        text-decoration: none;
    }

        a:visited:hover {
            color: mediumorchid;
            text-decoration: none;
        }

p {
    margin: 10px;
}

hr {
    width: 50%;
    background-color: aliceblue;
}

.holopan {
    background-color: #333333;
    margin: 10px;
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: darkslategrey;
    border-radius: 10px;
    width: auto;
    z-index: 3;
}

#homelogo {
    margin: 0px;
    height: 25px;
}

.asiButton {
    background-color: seagreen;
    border: 2px outset darkslategray;
}

    .asiButton:hover {
        background-color: mediumseagreen;
        border: 2px solid darkslategrey;
    }

    .asiButton:active {
        background-color: darkseagreen;
        border: 2px inset darkslategrey;
    }

    .asiButton:hover {
        color: white;
    }

    .asiButton:visited {
        color: white;
    }

        .asiButton:visited:hover {
            color: white;
        }
.card {
    background-color:  #333333;
    
}