body {

    background-image: linear-gradient(to right top, #a6b828 0%, #7bad07 100%);

}





nav {

    max-width: 1060px;

    mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);

    margin: 0 auto;

    padding: 10px 0;

}



    nav ul {

        text-align: center;

        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);

        box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);

    }



        nav ul li {

            display: inline-block;

            background: #055388;

            border: 1px solid white;

            font-size: 0.7em;

            color: white;

            font-weight: 700;

            letter-spacing: 5px;

            text-transform: uppercase;

        }



            nav ul li a {

                padding: 15px;

                font-family: "Open Sans";

                text-transform: uppercase;

                font-size: 12px;

                color: white;

                text-decoration: none;

                display: block;

                transition: 0.5s;

            }



                nav ul li a:hover {

                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);

                    background: rgba(173,216,230, 0.8);

                    color: rgba(0, 35, 122, 0.7);

                    transition: 0.5s;

                }



@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");



#about {

    padding: 0px;

    margin-top:50px;

    background: var(--bg2);

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    font: 300 12px/22px var(--sans);

    letter-spacing: 1.5px;

    color: var(--white);

    /*IMAGES*/

    --face: url('../../images/profile.jpg');

    /*FONTS*/

    --sans: 'Epilogue';

    --display: 'Viaoda Libre';

    /*COLORS*/

    --clear: rgba(255, 255, 255, 0);

    --white: rgba(228, 230, 233, .9);

    --black: rgba(0, 0, 0, .65);

    --navy: 8, 22, 33;

    --blue: 95, 132, 162;

    --lg: linear-gradient(to top, rgba(var(--navy), 1) 20%, var(--clear) 100%);

}



a {

    text-decoration: none;

}



.bg {

    width: 100vw;

    height: 100vh;

    position: fixed;

    top: 0px;

    right: 0px;

    bottom: 0px;

    left: 0px;

    z-index: 0;

    background: rgba(var(--navy), .8);

    mix-blend-mode: multiply;

}



.main {

    margin-top:-100px;

    -webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);

    -moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);

    box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);

    position: relative;

    z-index: 1;

    width: calc(100% - 200px);

    max-width: 1500px;

    margin: 100px auto;

    background: rgba(var(--navy), 1);

    display: grid;

    grid-template-rows: auto auto auto;

    grid-template-columns: 40% 60%;

    grid-template-areas: 'header header' 'info body' 'ooc ooc'

}



    .main .header {

        grid-area: header;

        position: relative;

        z-index: 2;

        height: 400px;

        background-image: var(--face);

        background-position: top;

        background-size: cover;

        filter: grayscale(50%);

    }



        .main .header:after {

            position: absolute;

            z-index: 3;

            top: 0px;

            left: 0px;

            content: '';

            width: 100%;

            height: 100%;

/*            background: rgba(var(--blue), .9);*/

            mix-blend-mode: multiply;

            transition: background .3s linear;

        }



    .main:hover .header:after {

/*        background: rgba(var(--blue), 1);*/

        transition: background .3s linear;

    }



    .main .charbutts {

        position: absolute;

        z-index: 4;

        top: 0px;

        left: 0px;

        width: calc(100% - 50px);

        padding: 25px;

        display: flex;

        flex-flow: row nowrap;

        justify-content: space-between;

        font: 100 10.5px/10.5px var(--sans);

        letter-spacing: 3px;

        transition: font-weight .3s linear;

    }



        .main .charbutts a {

            color: var(--white);

            text-transform: uppercase;

        }



    .main:hover .charbutts {

        font: 300 10.5px/10.5px var(--sans);

        transition: font-weight .3s linear;

    }



    .main .name {

        position: absolute;

        z-index: 10;

        top: 0px;

        width: calc(100% - 50px);

        height: 350px;

        padding: 25px;

        font: 70px/80px var(--display);

        text-align: center;

        text-transform: capitalize;

        color: var(--white);

        display: flex;

        align-items: flex-end;

        justify-content: center;

    }



        .main .name:before {

            position: absolute;

            z-index: -1;

            bottom: -20px;

            left: 0px;

            content: '';

            width: 100%;

            height: 200px;

            background: var(--lg);

        }



    .main .app {

        grid-area: body;

        display: block;

        position: relative;

        z-index: 10;

        width: calc(100% - 200px);

        padding: 50px 100px 100px 100px;

        color: var(--white);

        text-align: justify;

    }



        .main .app:first-letter {

            float: left;

            font: 70px/70px var(--display);

            text-transform: uppercase;

            margin: 5px 15px 0px 10px;

            -webkit-text-stroke: 1px var(--white);

            color: var(--clear);

            text-shadow: 0px 0px 0px rgba(var(--blue), .5);

        }



        .main .app b {

            font-weight: 700;

            letter-spacing: 2px;

        }



        .main .app i {

            font: italic 14px/22px var(--display);

            color: rgba(var(--white), 1);

        }



    .main .infocont {

        grid-area: info;

        position: relative;

        padding: 50px 0px 100px 100px;

    }



        .main .infocont .info {

            position: sticky;

            top: 100px;

            display: flex;

            flex-flow: row wrap;

            justify-content: space-between;

            align-content: space-between;

        }



            .main .infocont .info .bloop {

                flex: 1 0 calc(50% - 26px);

                padding: 20px 10px;

                margin: 3px;

                background: rgba(var(--blue), .15);

                display: flex;

                flex-flow: row wrap;

                align-content: center;

                justify-content: center;

                font: 200 10.5px/10.5px var(--sans);

                letter-spacing: 3px;

                text-transform: uppercase;

                text-align: center;

            }



                .main .infocont .info .bloop top {

                    display: block;

                    width: 100%;

                    padding-bottom: 15px;

                    position: relative;

                }



                    .main .infocont .info .bloop top:after {

                        position: absolute;

                        bottom: -3px;

                        left: calc(50% - 25px);

                        content: '';

                        width: 50px;

                        height: 3px;

                        background: rgba(var(--blue), .5);

                    }



                .main .infocont .info .bloop bot {

                    display: block;

                    width: 100%;

                    padding-top: 15px;

                    font: bold 11px/18px var(--display);

                }



            .main .infocont .info .bloop-max {

                flex: 1 0 calc(80% - 26px);

                padding: 20px 10px;

                margin: 3px;

                background: rgba(var(--blue), .15);

                display: flex;

                flex-flow: row wrap;

                align-content: center;

                justify-content: center;

                font: 200 10.5px/10.5px var(--sans);

                letter-spacing: 3px;

                text-transform: uppercase;

                text-align: center;

            }



                .main .infocont .info .bloop-max top {

                    display: block;

                    width: 100%;

                    padding-bottom: 15px;

                    position: relative;

                }



                    .main .infocont .info .bloop-max top:after {

                        position: absolute;

                        bottom: -3px;

                        left: calc(50% - 25px);

                        content: '';

                        width: 50px;

                        height: 3px;

                        background: rgba(var(--blue), .5);

                    }



                .main .infocont .info .bloop-max bot {

                    display: block;

                    width: 100%;

                    padding-top: 15px;

                    font: bold 11px/18px var(--display);

                }



    .main .ooc {

        grid-area: ooc;

        padding: 50px 100px;

        background: rgba(var(--blue), .15);

        display: flex;

        flex-flow: row wrap;

        align-items: center;

        justify-content: space-between;

        font: 200 10.5px/10.5px var(--sans);

        letter-spacing: 3px;

        text-transform: uppercase;

        text-align: center;

    }



        .main .ooc player {

            margin-right: 20px;

        }



            .main .ooc player b,

            .main .ooc warnings b {

                font: bold 11px/18px var(--display);

            }



        .main .ooc warnings {

            margin-left: auto;

        }

.motto {

    line-height:1.6;

    width:100%;

    text-align:center;

    font-size: 32px;

    font-family: 'Pacifico', sans-serif;

}



.logo-stob {

    z-index: 99 !important;

    position: absolute;

    top: -139px;

    right: 10px;

}



.klikni-pre-info{

    font: 300 12px/22px var(--sans);

    letter-spacing: 1.5px;

    color: darkslategray;

    float: right;  

    margin-right: 100px;

    margin-top: 55px;

}



@media all and (min-width:300px) and (max-width: 850px) {

    .main {

         width: 100%; 

         display:block;

    }

        .main .infocont {

            padding:0px;

        }

        .main .app {

             width: 90%; 

             padding: 15px; 

        }

}