/*
Auto import of the inter font from https://rsms.me/inter/
*/
:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {:root { font-family: 'Inter var', sans-serif; }}

/* Debugging */
#border {border-color:red;border-width: 1px;border-style:solid;}


body {
    /*background-color: white;*/
    margin:0;
    padding:0;
    /*min-width: fit-content;*/

    background-color: #bebebe;
    /*background: linear-gradient(#ffffff1c, #bebebe);*/
    background-image: url("images/background.jpg");
    /*background-image: url("images/borg.jpg");*/
    background-repeat: repeat;
    

    /* Disable horizontal scrollbar completely since its hard to stop */
    overflow-x: hidden;
    /*zoom: 90%;*/
}


/* Github SVN Icon */
.octicon {
    display: inline-block;
    overflow: visible;
    vertical-align: text-bottom;
    fill: currentColor;    
}

/* Make the Github logo links white */
/*a svg {color:white;}*/
/* Make the bigger Github logo white on hover */
a:hover svg {
  color: white;
}

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

/*
Without margin 0 on the p here the paragaph causes a black gap between
sections which looks super ugly.
*/


.content {

    /*border: 2px solid yellow;*/
    /*
    display:block;  
    position:absolute;

    top:500;
    width:100%;
    min-width:1200;

    
    align-items:center;
    justify-content: center;
    margin-left:100px;
    */    
}


/*************************************************************************************************/
/* HEADER */
/*************************************************************************************************/

.header-layout{

    position:relative;
    
    /*display:block;*/
    /*display:inline-flex;*/
    display:flex;
    /*flex-direction: column;*/
    /*justify-content: center;*/

    width:100%;

    /*display:block;*/
    align-items:center;
    justify-content: center;

    /*gap: 2rem;*/

    margin-bottom:100;    
}

.header {


    /*border: 1px solid blue;*/
    position:relative;
    top:0;

    z-index:100;
    height:200;

    
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 1rem 1rem 2rem #2c2d36;

    /*width:600;*/
    max-width: 900;
    /*min-width: 600;*/
    height:100%;
    margin:20px;

    /* The grey color is weirdly dropped at the last line of text, buggy CSS */
    color:grey;

    /*background: linear-gradient(to top left, rgb(153, 150, 150), white);*/
    /*background: linear-gradient(#3134431c, #2c2d36);*/
    background:white;
    background-color:white;  
    background: linear-gradient(to top left, white, #ffffffbc);
    /*background: linear-gradient(to top left, rgba(153, 150, 150,30%), #ffffff1c);*/
}


.header > * {
    margin:0;    
    font-size:1rem;
}

.header p {
    margin-left:40;
    margin-right:40;
}

.header-list {
    margin:10;   
    padding:20;

    margin-left:40;
    margin-right:40;
}



/*************************************************************************************************/
/* FOOTER */
/*************************************************************************************************/

.footer-layout{

    position:relative;
    
    /*display:block;*/
    /*display:inline-flex;*/
    display:flex;
    flex-direction: column;
    /*justify-content: center;*/

    width:100%;

    /*display:block;*/
    align-items:center;
    justify-content: center;

    margin-bottom:100;    
}

.footer {

    /*
    margin-left:30;
    margin-right:30;
    */

    /*
    position:relative;
    top:0;
    */

    z-index:10;
    height:200;

    margin:20;
    
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 1rem 1rem 2rem #2c2d36;

    /*width:600;*/
    max-width: 900;

    /* Use media query for this */
    /*min-width: 900;*/


    height:100%;

    /* The grey color is weirdly dropped at the last line of text, buggy CSS */
    color:grey;

    /*background: linear-gradient(to top left, rgb(153, 150, 150), white);*/
    /*background: linear-gradient(#3134431c, #2c2d36);*/
    background:white;
    background-color:white;  
    background: linear-gradient(to top left, white, #ffffffbc);
    /*background: linear-gradient(to top left, rgba(153, 150, 150,30%), #ffffff1c);*/
    /*background: linear-gradient(to top, #2c2d36, #3134431c);*/

    /*padding-right: 200px;*/

}


.footer > * {
    margin:0;    
    font-size:1rem;
}

.footer p {
    margin-left:40;    
    margin-right:40;    
}

.footer-list {
    margin:10;   
    padding:20;
}

.footer a {
    color: grey;
    text-decoration: none;
}


.footer-fight {
    position:relative;
    left:-350;
    top:50;
    margin:-200;
    z-index:50;
}

@media all and (max-width: 900px) {
    .footer-fight {
        left:-100;
        top:-10;
    }
}

/*************************************************************************************************/
/* PAGE LAYOUT */
/*************************************************************************************************/

.page-layout0 {

    position:relative;
    
    /*display:block;*/
    /*display:inline-flex;*/
    display:flex;
    flex-direction: column;
    /*justify-content: center;*/

    width:100%;

    /*display:block;*/
    align-items:center;
    justify-content: center;

    gap: 4rem;
}

.page-layout0-columns {
    margin-left:30;
    margin-right:30;
    position:relative;
    /*width:100%;*/
    /*display:block;*/
    /*align-items:center;*/
    /*justify-content: center;*/

    display:grid;
    grid-template-columns: 1fr 0.1rem 1fr;
    gap: 4rem;


}



.page-layout0 img {
    position:relative;
    z-index:100;
    right:160;
    top:100;
}


.page-layout1 {

    position:relative;
    
    /*display:block;*/
    /*display:inline-flex;*/
    display:flex;
    flex-direction: column;
    /*justify-content: center;*/

    width:100%;

    /*display:block;*/
    align-items:center;
    justify-content: center;

    gap: 4rem;
}

/*************************************************************************************************/
/* PAGE GRID LAYOUT */
/*************************************************************************************************/

.page-grid0 {

    /*position:relative;*/
    /*display:block;*/
    /*display:inline-flex;*/
    display:grid;
    grid-auto-flow: row;

    /*justify-content: center;*/
    /*width:100%;*/
    /*display:block;*/
    
    align-items:center;
    /*
    justify-content: center;
    */
    gap: 2rem;
}


@media all and (max-width: 900px) {
    .page-grid0 {
        grid-auto-flow: column;
    }
}


/*
@media all and (min-width: 700px) {
    .page-flex0-columns {
        grid-auto-flow: column;
    }
}
*/

/*************************************************************************************************/
/* PAGE FLEX LAYOUT */
/*************************************************************************************************/


.page-flex0 {

    /*border: 1px solid blue;*/

    /*position:relative;*/
    /*display:block;*/
    /*display:inline-flex;*/
    display:flex;
    flex-direction: row;

    justify-content: center;
    align-items:center;

    /*width:100%;*/
    /*display:block;*/
    
    
    /*
    justify-content: center;
    */
    gap: 1rem;
    margin:0px;

    /*animation: fade 1s ease-in 1s;*/
}


@media all and (max-width: 900px) {
    .page-flex0 {
        flex-direction: column;
        justify-content: center;

        justify-self: center;
        align-self: center;
        align-items: center;
    }
}

/*
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
*/

/*************************************************************************************************/
/* PAGE ZERO */
/*************************************************************************************************/


.page0 {
    position:relative;
    top:0;

    z-index:100;
    /*height:1200;*/
    margin:0;

    margin:0;
    
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 1rem 1rem 2rem #2c2d36;

    height:600;
    width:450;
    min-width: 450;
    /*max-width: 600;*/

    /*background: linear-gradient(to top left, rgb(153, 150, 150), white);*/
    background: linear-gradient(#3134433c, #2c2d36);
    /*background:white;*/
}

.page0 div {
    margin:0;
    color:white;
    font-size:1.2rem;
}

.page0-vs {

    /*display:block;*/
    /*position:absolute;*/
    justify-content: right;
    margin:-80;
    z-index:100;
    

    position:relative;
    top:-100;

}

@media all and (max-width: 900px) {
    .page0-vs {
        display: inline-flex;
        justify-self: center;
        align-self: center;
        margin: -120;

        /* The relative position can't be unset and affects the
        gap here so just offset one of the margins to compenstate */
        
        top:0;        
    }
}


/*************************************************************************************************/
/* PAGE ONE */
/*************************************************************************************************/

.page1 {
    
    position:relative;
    z-index:30;
    /*left:600;*/

    margin:0;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 1rem 1rem 2rem #2c2d36;

    height:600;
    width:450;
    min-width: 450;
    /*
    max-width: 600;
    */

    background: linear-gradient(#2c2d36, #3134431c);


    
    /*
    justify-content: center;
    align-items: center;
    */
}

.page1 div {
    margin:0;
    color:white;
    font-size:1.2rem;
}


.page1 div img {
    position:absolute;
    top:10;
    right:10;
    /*z-index:20;*/

}


.perf {
    
    position:relative;

    left:0;

    /*z-index:30;*/
    /*
    background: url("images/perf.png");
    background-repeat: no-repeat;
    width:816;
    height:495;
    */
}

.perf img {
    position:relative;
    width:500;
    top:-150;
    left:20;
    z-index:30;
}

.perf div {
    position:relative;

    color: #636363;
    /*color:red;*/
    font-family: "Comic Sans MS", "Comic Sans", sans-serif;
    font-size: 0.8rem;
    /*z-index:35;*/
    /*display:flex;*/
    z-index:40;

}


.perf-std-map {
    /*position:absolute;*/
    width:150;
    top:55;
    left:80;
    rotate: -10deg;
}

.perf-hero-map {
    /*position:absolute;*/
    width:150;
    top:-30;
    left:195;    
    rotate: -8deg;

    font-size: 0.5rem;
    text-indent: 5px;    
    
}

.perf-std-hash {
    /*position:absolute;*/
    width:150;
    left:300;
    top:135;
    rotate: 25deg;
}

.perf-hero-hash {
    /*position:absolute;*/
    width:150;
    top:-120;
    left:395;
    rotate: 9deg;
}

/*
.perf p:nth-of-type(1) {
    left:20;
    rotate: -10deg;
}

.perf p:nth-of-type(2) {
    left:20;
    rotate: -10deg;
}

.perf p:nth-of-type(3) {
    left:20;
    rotate: -10deg;
}
*/

/*************************************************************************************************/
/* PAGE TWO */
/*************************************************************************************************/

.page2 {
    position:relative;
    z-index:10;

    height:600;
    width:450;
    min-width: 450;
    /*
    min-width: 600;
    min-width: 600;    
    */



    margin:0;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 1rem 1rem 2rem #2c2d36;


    background:white;
    background-color:white;    
    /*background: linear-gradient(to bottom right, rgb(203, 200, 200), #ffffff6f);*/
    background: linear-gradient(to bottom right, rgb(173, 170, 170), #ffffff6f);
}

.page2 pre {
    margin:0;
    color:white;
    font-size:0.9rem;

    text-shadow: 0px 0px 5px grey;
}

.page2 div {
    margin:0;
    color:white;
    font-size:1.5rem;

    /*text-shadow: 1px 1px 2px grey;*/
}

.page2-globe {
    position:absolute;
    z-index:3;
    right:10;
    top:260;    
    /*transform: scaleX(-1) scaleY(-1);*/
    transform: scaleY(-1);
}

/*
.page1 > * {margin:0;color:black;}

.page1-grid {
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
*/

.page2-vs {

    /*display:block;*/
    /*position:absolute;*/
    justify-content: right;
    margin:-108;
    z-index:105;
    
    position:relative;
    top:150;
    
}

@media all and (max-width: 900px) {
    .page2-vs {
        display: inline-flex;
        justify-self: center;
        align-self: center;
        margin: -100;

        position:unset;
        top:unset;
    }
}


/*************************************************************************************************/
/* PAGE THREE */
/*************************************************************************************************/

/*
.page3 {height:600;margin:0;background-color: white;}
.page3 p {margin:0;color:black;}

.page4 {margin:0;background: linear-gradient(#3134431c, #2c2d36);}
.page4 p {margin:0;color:white;}
*/

.page3 {
    
    position:relative;
    z-index:50;
    height:600;
    width:450;
    min-width: 450;

    /*
    min-width: 600;
    min-width: 600;
    */

    margin:0;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 1rem 1rem 2rem #2c2d36;


    background:white;
    background-color:white;  
    /*background: linear-gradient(to top left, rgb(153, 150, 150), white);*/
    background: linear-gradient(to top left, rgb(123, 120, 120), white);
}

.page3 div {
    margin:0;
    color:white;
    font-size:1.5rem;

    text-shadow: 1px 1px 2px grey;
}

.page3 pre {
    margin:0;
    color:white;
    font-size:0.9rem;

    /*text-shadow: 0px 0px 5px grey;*/
}


.page3-triangle {
    position:absolute;
    right:0;
    top:280;
    transform: scaleX(-1);
    width:500;     

}

.page3-ryu {
    position:absolute;
    left:-550;
    top:-350;
    z-index:110;
}

@media all and (max-width: 900px) {
    .page3-ryu {
        display: inline-flex;
        justify-self: center;
        align-self: center;
        margin: -100;
        left:-450;
    }
}


/*************************************************************************************************/
/* PAGE FOUR */
/*************************************************************************************************/

.page4 {
    position:relative;
    top:0;

    z-index:100;
    margin:0;

    margin:0;
    
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 1rem 1rem 2rem #2c2d36;

    height:1000;
    
    width:450;
    min-width: 450;
    /*
    max-width: 600;
    
    */

    background: linear-gradient(#2c2d36, #3134431c);


}

.page4 div {
    margin:0;
    color:white;
    font-size:1.5rem;
}

.page4 pre {
    margin:0;
    color:white;
    font-size:0.9rem;
}


.page4-vs {

    /*display:block;*/
    /*position:absolute;*/
    justify-content: right;
    margin:-108;
    z-index:105;
    
    position:relative;
    top:150;
    
}

@media all and (max-width: 900px) {
    .page4-vs {
        display: inline-flex;
        justify-self: center;
        align-self: center;
        margin: -100;

        position:unset;
        top:unset;
    }
}


/*************************************************************************************************/
/* PAGE FIVE */
/*************************************************************************************************/

.page5 {
    
    position:relative;
    z-index:30;
    /*left:600;*/

    margin:0;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 1rem 1rem 2rem #2c2d36;

    height:1000;
    width:450;
    min-width: 450;
    /*
    max-width: 600;
    */

    /*background: linear-gradient(to top left, rgb(153, 150, 150), white);*/
    background: linear-gradient(#3134433c, #2c2d36);
    /*background:white;*/
    
    /*
    justify-content: center;
    align-items: center;
    */
}

.page5 div {
    margin:0;
    color:white;
    font-size:1.5rem;


}

.page5 pre {
    margin:0;
    color:white;
    font-size:0.9rem;
}




/*************************************************************************************************/
/* PAGE SIX */
/*************************************************************************************************/

.page6 {
    position:relative;
    z-index:10;
    height:1200;
    width:450;
    min-width: 450;
    /*max-width: 600;*/

    margin:0;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 1rem 1rem 2rem #2c2d36;


    background:white;
    background-color:white;    
    /*background: linear-gradient(to top left, rgb(153, 150, 150), white);*/
    /*background: linear-gradient(to top left, rgb(123, 120, 120), white);*/
    background: linear-gradient(to top right, rgb(173, 170, 170), #ffffff6f);
}

.page6 pre {
    margin:0;
    color:white;
    font-size:0.9rem;

    text-shadow: 0px 0px 3px grey;
}

.page6 div {
    margin:0;
    color:white;
    font-size:1.5rem;

    text-shadow: 1px 1px 2px grey;
}

.page6 div img {
    position:absolute;
    z-index:3;
    right:10;
    top:260;    
    /*transform: scaleX(-1) scaleY(-1);*/
    transform: scaleY(-1);
}

.hero-debug {
    display:block;
    position:absolute;
    top:193;
    height:20;
    width:90%;
    color:white;
    padding-left:5;
    /*background:red;opacity:0.5;*/
    background:rgb(91, 146, 235);opacity:0.5;
}

/*
.hero-debug:before {
    width:10px;
    height:10px;
    border-radius:50%;
    background:red;opacity:0.5;
    display:inline-block;
    content:"\A";
}
*/

.page6-vs {

    /*display:block;*/
    /*position:absolute;*/
    justify-content: right;
    margin:-108;
    z-index:105;
    
    position:relative;
    top:150;
    
}

@media all and (max-width: 900px) {
    .page6-vs {
        display: inline-flex;
        justify-self: center;
        align-self: center;
        margin: -100;

        position:unset;
        top:unset;
    }
}

/*************************************************************************************************/
/* PAGE SEVEN */
/*************************************************************************************************/

.page7 {
    
    position:relative;
    z-index:50;
    height:1200;
    width:450;
    min-width: 450;

    margin:0;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 1rem 1rem 2rem #2c2d36;


    background:white;
    background-color:white;  
    
    /*background: linear-gradient(to bottom right, rgb(203, 200, 200), #ffffff6f);*/
    background: linear-gradient(to bottom right, rgb(173, 170, 170), #ffffff6f);
}

.page7 div {
    margin:0;
    color:white;
    font-size:1.5rem;

    text-shadow: 1px 1px 2px grey;
}

.page7 pre {
    margin:0;
    color:white;
    font-size:0.9rem;

    /*text-shadow: 0px 0px 3px grey;*/
}


.std-debug {
    display:block;
    position:absolute;
    top:210;
    height:20;
    width:90%;
    color:white;
    padding-left:5;
    
    background:rgb(91, 146, 235);opacity:0.5;

}

/*
.std-debug:before {
 width:10px;
 height:10px;
 border-radius:50%;
 background:red;opacity:0.5;
}
*/


/*************************************************************************************************/
/* PAGE EIGHT & NINE */
/*************************************************************************************************/

/* Blank pages to continue scrolling */

.page8 {
    position:relative;
    z-index:10;
    height:600;
    /*width:600;*/
    max-width: 450;

    margin:0;
    padding: 2rem;
}

.page9 {
    position:relative;
    z-index:10;
    height:600;
    /*width:600;*/
    max-width: 450;

    margin:0;
    padding: 2rem;
}

/*************************************************************************************************/
/* PAGE TEN */
/*************************************************************************************************/

/*
.page10 {margin:0;background: linear-gradient(#3134431c, #2c2d36);}
.page10 p {margin:0;color:white;}
*/


/*************************************************************************************************/
/* GENERAL */
/*************************************************************************************************/



.logo {
    display: flex;
    /*flex: 1 0 33%;*/
    align-content: right;
    padding:50;
    gap: 2rem;
    align-items: flex-end;
}

/*
.logo > * {
    align-self: center;
}
*/

.greyscale {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}


.figure{
    background:white;

    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 1rem 1rem 2rem #2c2d36;
}