/*CSS for index.html*/

* {
    margin: 0;
    padding: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background: black;
    color: white;
    overflow-y: hidden;
}

canvas {
    display: block;
}

canvas#c {/*for matrix effect*/
    z-index: -10;
    position: fixed;
}

.flex-container {
    display: flex;
    /*allow auto new lines*/
    flex-wrap: wrap;
    /*center horisontally with auto margin*/
    justify-content: space-around; 
    /*center vertically*/
    align-items: center; 
    /*spacind between lines*/
    align-content: space-evenly;

    width: 100vw;
    height: 100vh;
}

.flex-container>div {
    width: 600px;
    text-align: center;
}

.flex-container>div>iframe {
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 70vh;
    display: none;
    transform: rotateY(90deg);
    margin: auto;
}

.flex-container>div>img {
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 70vh;
    object-fit: contain;
}

@media screen and (max-width: 1200px) {
    .flex-container>div>iframe {
        width: 90vw;
        height: 90vw;
    }
    .flex-container>div>img {
        width: 90vw;
        height: 90vw;
    }
}

iframe#blog {
    border: none;
    color-scheme: dark;
}

a:link {color: inherit;}
a:visited {color: inherit;}
a:hover {color: inherit;}
a:active {color: inherit;}

/*NAV*/
.sticky {
    position: sticky;
}

.burger {
    float: right;
    margin: 1em;
    position: absolute;
    right: 0;
    z-index: 3;
}

.burger:hover {
    cursor: pointer;
}

.burger div {
    height: 0.5em;
    width: 2em;
    border-top: 4px solid rgb(178, 178, 178);
}



.burger-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    color-scheme: only light;
    overflow-y: scroll;
}

.burger-menu {
    text-align: center;
    max-width: 90%;
    margin: 0px auto auto auto;
    padding-top: 3em;
    position: relative;

    /* From https://css.glass */
    background: rgba(255, 255, 255, 0);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1.1px);
    -webkit-backdrop-filter: blur(1.1px);
}

.burger-menu div {
    font-size: xx-large;
    font-weight: bold;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-shadow: red -2px 0, cyan 2px 0;
    color: white;
    margin-top: 40px;
    margin-bottom: 40px;
    /*margin: 40px;*/
    /*padding: 0.5em;*/
    /* From https://css.glass */
    /*background: rgba(255, 255, 255, 0);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1.1px);
    -webkit-backdrop-filter: blur(1.1px);*/
}

.burger-menu div a {
    text-decoration: none;
}

.hidden {
    display: none;
}

/* Bouncing Menu BEGIN */
.bouncing-outer {
    position: absolute;
    bottom: 0.5em;
    left: 1em;
    z-index: 10;
    width: 0px;
    height: 1em;
    animation: bounceX 6s linear infinite alternate;
    /*optional*/
    user-select: none;
}

.bouncing-inner {
    position: absolute;
    right: 0em;
    bottom: 0.5em;
    width: 1em;
    height: 0px;
}

.bouncing-inner>a:link { text-decoration: none; }
.bouncing-inner>a:visited { text-decoration: none; }
.bouncing-inner>a:hover { text-decoration: none; }
.bouncing-inner>a:active { text-decoration: none; }

.bounce1 {
    animation: bounceY 8s linear infinite alternate;

    /*optional*/
    font-size: 1em;
}

.bounce2 {
    animation: bounceY 4s linear infinite alternate;

    /*optional*/
    font-size: 2.5em;
}

@media screen and (max-width: 1200px) {
    .bounce1 {
        animation: bounceY 5s linear infinite alternate;
    }
}

@keyframes bounceX {
    100% {width: 100vw;}
}

@keyframes bounceY {
    100% {height: 100vh;}
}
/* Bouncing Menu END */