:root {
    --GokuBlue: #0849a1;
    --GokuOrange: #fd6d16;
    --GokuOrange2: #ef581f;
    --headerBar-width: 10vw;
    /*--background-gradient: linear-gradient(to top, var(--GokuBlue), #222);*/
}

*, *::before, *::after{
box-sizing: border-box;
margin: 0;
padding:0%;
}

html{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

html::-webkit-scrollbar {
    display: none; /*hides scrollbar in webkit browsers*/
}

a{
    text-decoration: none;
}

body{
    display: block;
    background-color:rgb(29, 22, 17);
    background: 
	linear-gradient(0deg, rgba(24,13,9,1), rgba(141, 109, 109, 0.4)),
	linear-gradient(30deg, rgba(115,71,39,0.87), rgba(0,255,0,0)),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.10' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='0.25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

header{
    display: block;
    position: fixed;
    min-height: 100%;
    flex-flow: column nowrap;
    color: blanchedalmond;
    font-size: 2.8vw;
    background-color: rgb(10, 4, 35);
    box-shadow: -10px 300px 200px var(--GokuBlue);
    border-right: 5px solid #8f673d;
    z-index: 1;
}

#title{
    display: flex;
    padding-left: 1.1em;
    padding-top: 1.1em;
}

#title p{
    writing-mode: vertical-lr;
    white-space: nowrap;
    color: whitesmoke;
    height: 30%;
}

header img{
    display: flex;
    width: var(--headerBar-width);
}

main{
    display: block;
    margin-left: var(--headerBar-width);
    min-height: 110%;
    width: calc(100% - var(--headerBar-width));
}

nav{
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(8, 1fr);
    justify-items:center;
    color: blanchedalmond; 
}

.diagonal {
    padding-block: 18rem;
    background-color: #00000017;
    background-image:
    repeating-radial-gradient(
        #0000 2% 7%, #10212b 11% 26%
    ),
    repeating-radial-gradient(
        #0000 2% 7%, #10212b 11% 26%
    );
    background-size: 5rem 5rem;
    border: 4px solid #172a35;
    transform: skewY(-5deg);
    animation-duration: 5s;
    animation-name: alternate;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

.background{
    display: grid;
    opacity: 0.6;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(10, 1fr);
    filter: drop-shadow(0.25rem 0.15rem 0.3rem var(--GokuOrange));
}

div.background img{
    position: fixed;
    grid-area: 1 / 2   / span 6 / span 6;
    justify-self: center;
}

main button{
    display: grid;
    position: sticky;
    top: 0;
    width: fit-content;
    height: 2em;
    padding: 0.4em;
    margin: 15px;
    white-space: nowrap;
    line-height: 1em;
    font-size: 1.7em;
    color: var(--GokuOrange);
    text-shadow: 2px 2px 1px #032f6d;
    background:
        rgb(27, 107, 173)
        url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.83' numOctaves='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 1 0.4 0 0 0 0 0 0.9 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0 .02 .03 .03 .09 .12 .27 .91 .3 .03 0 0'/%3E%3CfeFuncG type='table' tableValues='.01 .09 .16 .18 .38 .48 .54 .73 .33 .09 .01 .01'/%3E%3CfeFuncB type='table' tableValues='.03 .17 .3 .25 .37 .42 .42 .6 .17 .01 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='0.6' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    cursor: pointer;
    border: 5px solid #0782ca;
    filter: drop-shadow(-0.25rem -0.15rem 0.3rem rgba(38, 20, 20, 0));
    border-radius: 30px 8px 25px 20px;
    z-index: 3;
}

main button:hover{
    color: #ffab4a;
    background-color: #5399fa;
    text-shadow: 2px 1px 1px #05295a; /*#5a697e*/
    filter: drop-shadow(-0.25rem -0.15rem 0.3rem rgb(38, 20, 20));
    border: 5px solid #0758ca00;
    animation: 1s ease 0.1s forwards rotation;
}

main nav button:first-of-type{
    display: grid;
    grid-area: 2 / 1 / span 1 / span 1;
}

main nav button:nth-of-type(2){
    display: grid;
    grid-area: 1 / 2 / span 1 / span 1;
}

main nav button:nth-of-type(3){
    display: grid;
    grid-area: 1 / 6 / span 1 / span 1;
}

main nav button:nth-of-type(4){
    display: grid;
    grid-area: 2 / 7 / span 2 / span 3;
}

#spark1 {
    position: fixed;
    width: 40px;
    height: 40px;
    margin-left: 1em;
    margin-top: 4em;
    border-radius: 50%;
    background-color: #fff;
    box-shadow:
      0 0 60px 30px #fff,  /* inner white */
      0 0 100px 60px #f0f, /* middle magenta */
      0 0 140px 90px #0ff; /* outer cyan */
  }

  #spark2 {
    position: fixed;
    width: 40px;
    height: 40px;
    margin-left: 3em;
    border-radius: 50%;
    background-color: #fff;
    box-shadow:
      0 0 60px 30px #fff,  /* inner white */
      0 0 100px 60px rgb(255, 106, 0), /* middle magenta */
      0 0 140px 90px #0ff; /* outer cyan */
  }

  #spark3 {
    position: fixed;
    width: 70px;
    height: 70px;
    margin-left: 3em;
    border-radius: 50%;
    background-color: #fff;
    background-image:
    repeating-radial-gradient(
        #0000 2% 7%, #cfe6f3 11% 26%
    ),
    repeating-radial-gradient(
        #0000 2% 7%, #aac9db 11% 26%
    );
    box-shadow:
      0 0 60px 30px #fff,  /* inner white */
      0 0 100px 60px rgb(255, 106, 0), /* middle magenta */
      0 0 140px 90px #0ff; /* outer cyan */
      animation-duration: 5s;
      animation-name: alternate;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: ease-in-out;
  }


  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-7deg);
    }
  }

  @keyframes alternate {
    from {
        background-position: 1.5rem 0, 0 -2.5rem;
    }
  
    to {
        background-position: -2.5rem -1.5rem, -2rem -5rem;
    }
  }

  footer {

    padding-block: 18rem;
    background-color: #0849a1;
  }