html{
    height: 100%;
    width: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: #F9F7F7;
    color: #32353f;
    font-family: sans-serif;
}

p {
    font-size: 20px;
}
li {
    list-style-type: none;
}
a {
    color: #EF626C;
}

.navigation-bar {
    height: 10%;
    position: fixed;
    height: 30px;
    width: 100%;
    z-index: 2000;
}
#btnmenu {
    font-size: 48px;
    margin-left: 30px;
    margin-top: 30px;
    background: transparent;
    border-color: transparent;
}

.navigation-bar #navtext {
    float: right;
    text-align: center;
    font-size: 28px;
    margin-right: 10px;
/*    margin-right: 40px;*/
    margin-top: 40px;
    font-weight: bolder;
    opacity: 0;
    
}
.navigation-bar #navlogo {
    float: right;
    text-align: center;
    max-width: 100px;
    max-height: 100px;
    margin-top: 10px;
    margin-right: 15px;
    rotate:calc(-20deg);
    opacity:1;
}


.navigation-menu {
    margin: 0;
    background: #F9F7F7;
    height: 5%;
    width: 25%;
    height: 100%;
    position: fixed;
    z-index: 1000;
    box-shadow: 5px 10px 100px;
    transform: translate(-200%, 0%);
 /*   animation: menu-open 1s infinite;*/
}
.navigation-menu li {
    width: 100%;
    height: 50px;
    text-align: right;
}
.navigation-menu .menit {
    height: 100%;
    width: 100%;
    color: #32353f;
    font-size: 28px;
    font-weight: bold;
    margin-right: 30px;
    margin-top: 20px;
}
.navigation-menu .menit::after {
    content: url('/icons/pawh1.svg');
    margin-left: 30px;

}
.navigation-menu #lang {
    position: absolute;
    bottom: 10%;
    width: 100%;
}
.navigation-menu #lang a{
    text-align: center;
    display: block;
    margin: 0 auto;
}
.navigation-menu #copyright {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: 30px;

}
.navigation-menu #copyright p{
    font-size: 12px;
    opacity: 70%;
    text-align: center;
    display: block;
    margin: 0 auto;
    max-width: 100px;
    text-decoration: underline;
}
.navigation-menu #copyright hr{
    max-width: 70px;
}

.navigation-menu #navtext-alt {
    text-align: center;
    font-size: 28px;
    font-weight: bolder;
    visibility: hidden;
}
.banner{
    height: 100%;
    width: 100%;
    color: white;
    font-size: 50px;
    filter: blur(10px);
    animation-name: blur-banner;
    animation-duration: 2s;
    z-index: -1;
    margin: 0;
}
.banner-text {
    font-size: 86px;
    color: #26272b;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-name: fadein-banner;
    font-weight: bolder;
    text-align: center;
    animation-duration: 2s;
    text-decoration: underline;
    text-decoration:solid;
}


h1 {
    color: #26272b;
    font-size: 36px;
}
h1::before {
    content: url('/icons/pawh1.svg');
    margin-right: 20px;
}

.container {
    background: #F9F7F7;
    width: 70%;
    height: 100%;
    margin: auto;
    margin-bottom: 10%;
}
#head {
    width: 60%;
    margin-top: 30px;
}
.left {
    width: 60%;
    margin-top: 80px;
    float: left;
}
.left a{
    width: 60%;
    margin-top: 80px;
}
.left img {
    float: right;
    width: 30%;
    height: 30%;
    margin-top: 5%;
    margin-left: -10%;
}

.right {
    width: 60%;
    margin-top: 80px;
    float: right;
    text-align: right;
}


.scrl-dwn {
    position: fixed;
    bottom: 10%;
    left: 5%;
    opacity: 0%;
    animation: fadein-btn 1s forwards 2s, updown-btn 2s infinite 3s;
    width: 80px;
    height: 80px;
}
#btn-scrldwn {

    width: 100%;
    height: 100%;
}

.footer {
    text-align: center;
    margin-top: -10%;
}
.footer p{
    font-size: 14px;
    opacity: 70%;
    text-decoration: underline;
}
.navigation-menu #copyright hr{
    max-width: 70px;
}
/* Socials list */
.social .mastodon li:before {
    margin-right: 10px;
    content: url('/icons/mastodon.svg');
}
.social .X li:before {
    margin-right: 10px;
    content: url('/icons/x.svg');
}
.social .fa li:before {
    margin-right: 10px;
    content: url('/icons/fa.svg')
}
.social .telegram li:before {
    margin-right: 10px;
    content: url('/icons/telegram.svg')
}
.social .discord li:before {
    margin-right: 10px;
    content: url('/icons/discord.svg')
}
.social .mail li:before {
    margin-right: 10px;
    content: url('/icons/mail.svg')
}

/*Animations*/

@keyframes blur-banner {
    from { filter: blur(0px);}
    to {filter: blur(10px);}
}
@keyframes fadein-banner {
    from { opacity: 0;
            transform: translate(-50%, 50%);}
    to {opacity: 1;
            transform: translate(-50%, -50%);}
}

@keyframes fadeout-logo {
    to {opacity: 0;}
}
@keyframes fadein-logo {
    to {opacity: 1;}
}


/*Button for scrolling down*/
@keyframes fadein-btn {
    from {
        opacity: 0;}
    to {opacity: 1;}
}

/*Button for scrolling down*/
@keyframes updown-btn {
    0%, 100% {
        transform: translate(0%, 0%);
      }
      50% {
        transform: translate(0%, -20px);
      }
}

/* Animation for menu openning */
@keyframes menu-open {
    0% {
        transform: translate(-100%, 0%);
      }
      100% {
        transform: translate(0%, 0%);
      }
}


@media only screen and (min-height: 500px) and (max-height: 1100px){ 
.navigation-menu #lang {
    position: absolute;
    bottom: 23%;
}
}


@media only screen and (min-height: 200px) and (max-height: 500px){ 
    .navigation-menu #lang {
        position: absolute;
        bottom: 30%;
    }
}

/* Mala velicina ekrana */
@media only screen and (min-width: 200px) and (max-width: 500px){ 
    .navigation-menu {
        background: #F9F7F7;
        width: 100%;
     /*   animation: menu-open 1s infinite;*/
    }
    #navtext { 
        visibility: collapse;
    }
    .navigation-bar #navlogo {
        visibility: collapse;
    }
    .navigation-menu #navtext-alt {
        visibility: visible;
    }
    .banner-text {
        font-size: 34px;
    }
    .left {
        width: 100%;
    }
    .right {
        width: 100%;
    }
    h1 {
        font-size: 30px;
    }
}
@media only screen and (min-width: 500px) and (max-width: 1000px){ 
    .navigation-menu {
        background: #F9F7F7;
        width: 50%;
     /*   animation: menu-open 1s infinite;*/
    }
    .banner-text {
        font-size: 50px;
    }
    h1 {
        font-size: 30px;
    }
    .footer {
        text-align: center;
        margin-top: 0px;
    }
}
/* For banner */
@media only screen and (max-width: 720px){ 
    .banner {
        background: url("/images/crofurs1080.png") no-repeat top center fixed;
    }
}
@media only screen and (min-width: 720px) and (max-width: 2560px){ 
    .banner {
        background: url("/images/crofurs2k.png") no-repeat top center fixed;
    }
}
@media only screen and (min-width: 2560px){ 
    .banner {
        background: url("/images/crofurs4k.png") no-repeat top center fixed;
    } 
}