@keyframes buttonTransitionfw{

    0%{
        opacity:1;

        filter:blur(0px);

        transform:scale(1);
    }

    50%{
        opacity:0.5;

        filter:blur(5px);

        transform:scale(1.2);
    }

    95%{
        opacity:0;

        filter:blur(10px);

        transform:scale(1.4);
    }

    100%{

        opacity:0;

        filter:blur(10px);

        transform:scale(1.4);

        transform:translate(-9999px)

    }
}

@keyframes buttonTransitionbw{
    0%{

        opacity:0;

        filter:blur(10px);

        transform:scale(1.4);

    }

    50%{

        opacity:0.5;

        filter:blur(5px);

        transform:scale(1.2);

    }

    100%{

        opacity:1;

        filter:blur(0px);

        transform:scale(1);

    }
}

@keyframes iframeTransitionfw{

    0%{
        width:100%;
        height:100%;
    }

    100%{
        width:170%;
        height:600%;
    }

}

@keyframes iframeTransitionbw{

    0%{

        width:170%;
        height:600%;

    }

    100%{

        width:100%;
        height:100%;

    }

}

@keyframes backTransitionfw{

    0%{

        opacity:0;

        filter:blur(10px);

    }

    50%{
        opacity:0.5;

        filter:blur(5px);

        visibility:visible;

    }

    100%{
        opacity:1;

        filter:blur(0px);

        visibility:visible;

    }
}

@keyframes backTransitionbw{

    0%{
        opacity:1;

        filter:blur(0px);

        visibility:visible;

    }

    50%{
        opacity:0.5;

        filter:blur(5px);

        visibility:visible;

    }

    95%{
        opacity:0;

        filter:blur(10px);

        visibility:visible;


    }

    100%{

        opacity:0;

        filter:blur(10px);

        visibility:hidden

    }


}

*{
    padding: 0px;
    margin: 0px;

    box-sizing: border-box;
}

body{
    background-color: var(--main-color);
}


.wrapper{
    display: grid;
    grid-template-rows: repeat(12, 1fr);
    grid-template-columns: 1fr 6fr 1fr;
    grid-gap: 5px 5px;

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

    height:100vh;

}


#navBar{
    margin: 3px;

    width:100%;
    height:100%;

    grid-area:3/1/10/2;
}

#navBar>a{
    width: 100%;
    height: 10%;
}

#title{

    grid-area:1/3/10/4;

    display:flex;
    flex-direction:column;
    justify-items:start;
    align-items:center;

    color:var(--accent-color1);

    text-shadow: 1px 0px 5px var(--accent-color1);

    font-family:"header-font";
    font-size:4vw;

}


#back{

    padding:0px 8%;

    display:block;

    width:95%;
    height:100%;

    background: var(--accent-color1);
    color: var(--main-color);

    border-style:double;
    border-color:var(--main-color);
    border-radius:5px;

    font-family:"header-font";
    font-size:2em;

    text-align:end;
    text-shadow: 1px 0px 5px var(--main-color);

    grid-area:11/3/12/4;
    align-content:center;

    visibility:hidden;

}

main{

    width: 95%;

    height:100vh;

    grid-area:1/2/13/3;
    display:grid;
    grid-template-rows: repeat(12, 1fr);
    grid-template-columns: repeat(9, 1fr);
    grid-gap: 5px 5px;

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

    text-shadow: 1px 0px 5px var(--accent-color1);

    border-style:double;
    border-color: var(--accent-color1);
}


iframe{
    width:100%;
    height:100%;

    border-style:double;
    border-color: var(--accent-color1);

    grid-area:6/3/8/8;
}

#story{

    grid-area:2/2/4/4;

    font-family:"header-font";
    font-size:2.5em;

    max-width: 100%;
    min-width:50%;
    overflow-wrap:break-word;

    text-align:center;

}

#illu{

    grid-area:2/6/4/10;

    font-family:"header-font";
    font-size:2.5em;

    max-width: 90%;
    min-width:50%;
    overflow-wrap:break-word;

    text-align:center;
    
}

#sketch{
    
    grid-area:10/4/12/7;

    font-family:"header-font";
    font-size:2.5em;

    max-width: 100%;
    min-width:50%;
    overflow-wrap:break-word;

    text-align:center;

}


a:link{

    text-decoration:none;
}

a:visited{
    color: var(--accent-color1);
}

.animateBackfw{

    animation-name:backTransitionfw;
    animation-duration: 1s;
    animation-timing-function:linear;
    animation-iteration-count:1;
    animation-fill-mode:forwards;

}

.animateBackbw{

    animation-name:backTransitionbw;
    animation-duration: 1s;
    animation-timing-function:linear;
    animation-iteration-count:1;
    animation-fill-mode:both;

}

.animateButtonfw{

    animation-name:buttonTransitionfw;
    animation-duration: 1s;
    animation-timing-function:linear;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}

.animateButtonbw{

    animation-name:buttonTransitionbw;
    animation-delay:1s;
    animation-duration: 1s;
    animation-timing-function:linear;
    animation-iteration-count:1;
    animation-fill-mode:both;

}

.animateIframefw{

    animation-name:iframeTransitionfw;
    animation-delay:1s;
    animation-duration:1s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;


}

.animateIframebw{

    animation-name:iframeTransitionbw;
    animation-duration:1s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:both;

}