:root{
    --main:rgb(10, 65, 85);
    --bordo: rgba(162, 23, 100, 0.484);
    --clr-1: #7e057c;
    --clr-2: #690782;
    --clr-3: #FF00C8;
    --clr-4: #00ffd9;
    --clr-5: #2d96c7;
    --clr-6: #0b4747;
    --clr-7: #540543;
    --clr-8: #380445;
    --clr-9: rgb(238, 209, 103);
    --clr-10: rgb(151, 166, 12);
    --clr-11: rgb(200, 240, 90);
    --clr-12: rgb(187, 148, 5);
    --clr-13: rgb(227, 127, 11);
    --clr-14: rgb(193, 39, 1);
}

/*=============================================
    body
=============================================*/

body{
    margin: 0%;
    padding: 0%;
    width: 100%;
    height: 100%;
    background-image: url(/photos/1.webp);
    background-repeat: no-repeat;
    background-size: cover;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    align-items: center;
    justify-content: center;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    backdrop-filter: blur(7px);
    background-color: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

/*=============================================
    main
=============================================*/

main{
    width: 100%;
    margin: 0%;
    padding: 0%;
}

/*=============================================
    header
=============================================*/

    header{
        background-color: transparent;
        display: flex;
        height: 5%;
        padding: 1%;
        width: 100%;
    }

    header .name{
        width: 87%;
        height: 100%;
        margin: 0%;
        padding: 0%;
    }
    
    header h4{
        height: 100%;
        width: auto;
        font-weight: bold;
        font-size: 2.3rem;
        margin: 0%;
        padding: 0%;
        
    }

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

    header h4 a:hover{
        color: rgb(223, 223, 223);
        text-shadow: 1px 1px 20px cyan;
        
    }

    /*on scroll*/
    .navbar {
        background-color: var(--main);
        position: sticky;
        top: 0;
        transition: 0.1s;
        z-index: 2;
        padding: 1%;
        justify-content: space-around;
        flex-wrap: nowrap;
        width: 100%;
    }

    @media only screen and (max-width: 550px) {
        header {
            background-color: var(--main);
        }

    }

    
/*=============================================
    menu
=============================================*/

    .menu{
        float: right;
        width: 13%;
        height: 100%;
        text-align: center;
        justify-content: center;
        margin: 0%;
        padding: 0%;
    }

    @media only screen and (max-width: 1700px) {

        header .name {
            width: 85%;
        }

        .menu {
            width: 15%;
        }
    }

    @media only screen and (max-width: 1400px) {

        header .name {
            width: 83%;
        }

        .menu {
            width: 17%;
        }
    }

    @media only screen and (max-width: 1250px) {

        header .name {
            width: 80%;
        }

        .menu {
            width: 20%;
        }
    }

    @media only screen and (max-width: 1000px) {
        .navbar {
            padding: 1.5%;
        }

        .name h4 a {
            font-size: 2.1rem;
            margin-left: 1%;
        }

        header .name {
            width: 77%;
        }

        .menu {
            width: 23%;
        }
    }

    @media only screen and (max-width: 1000px) {

        header .name {
            width: 75%;
        }

        .menu {
            width: 25%;
        }
    }

    @media only screen and (max-width: 800px) {

        header .name {
            width: 90%;
        }

        .menu {
            width: 10%;
            padding: 0.3% 0.5%;
        }

        .navbar {
            padding-top: 2%;
        }
        
    }

    @media only screen and (max-width: 600px) {
        header .name {
            width: 88%;
        }
    
        .menu {
            width: 12%;
            padding: 0.4% 0.5%;
        }
    }

    @media only screen and (max-width: 500px) {
        header .name {
            width: 88%;
        }

        .menu {
            width: 10%;
            padding: 0.5% 0.5%;
        }

        .name h4 a {
            font-size: 2.0rem;
            margin-left: 3%;
        }
    }

    @media only screen and (max-width: 450px) {
        header .name {
            width: 86%;
        }

        .menu {
            width: 14%;
            padding: 0.8% 0.5%;
        }
    }

    @media only screen and (max-width: 370px) {
        header .name {
            width: 84%;
        }

        .menu {
            width: 16%;
            padding: 0.8% 0.5%;
        }

        .navbar {
            padding: 2.5%;
        }
    }

    /*--burger--*/

    #burger{
        display: none;
    }

    @media only screen and (max-width: 800px){

        #burger {
            display:block;
        }

        .tabs{
            display: none;
        }
    }

    .container {
        display: inline-block;
        cursor: pointer;
        position: relative;
    }

    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #ffffff;
        margin: 6px 0;
        transition: 0.4s;
        border-radius: 1vw;
    }

    .bar2 {
        transition: 0.2s;
    }

    .change .bar1 {
        transform: translate(0, 11px) rotate(-45deg);
    }

    .change .bar2 {
        opacity: 0;
    }

    .change .bar3 {
        transform: translate(0, -11px) rotate(45deg);
    }

    .change{
        position: fixed;
        z-index: 6;
        width: auto;
        right: 2%;
    }

    /*--tabs--*/
    #tablinks{
        padding: 0%;
        margin: 0%;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tabs #tablinks{
        list-style-type: none;
        display: flex;
        width: 100%;
        height: 100%;
        margin: 1% 0%;
    }

    .tabs #tablinks a{
        margin: 0%;
        padding: 0%;
        text-decoration: none;
        color: white;
    }

    .tabs #tablinks li{
        width: 100%;
        height: 100%;
        text-align: center;
        font-weight: 300;
        color: white;
        font-size: 1.6rem;
        margin: 0%;
        padding: 0%;
        cursor: pointer;
    }

    .tabs #tablinks li:hover{
        text-shadow: 2px 2px 20px cyan;
        transition: 0.2s;
    }

    @media only screen and (max-width: 1250px) {
        .tabs #tablinks {
            margin: 1.5% 0%;
        }
    }

/*======================================
    menu_informations 
======================================*/

    .menu_informations{
        position: fixed;
        z-index: 5;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(10, 65, 85, 0.489);
        background-size: cover;
        background-repeat: no-repeat;
        display: none;
    }

    .menu_informations::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(10px);
        background-color: rgba(0, 0, 0, 0.3);
        z-index: -1;
    }

    .arches{
        background-color: rgba(77, 14, 102, 0.619);
        position: absolute;
        color: white;
        font-weight: bold;
        z-index: 3;
        width: 50%;
        height: auto;
        margin: 5% 25%;
        border-radius: 2vw;
        padding: 3%;
        box-shadow: 1px 1px 30px rgb(101, 176, 177);
    }

    .arches ul{
        list-style-type: none;
        padding: 1%;
        font-size: 2.0rem;
    }

    .arches ul.subpages li{
        margin: 1%;
        padding: 1%;
        border-radius: 0.5vw;
        background-color: rgba(95, 143, 144, 0.238);
    } 

    .arches ul.subpages li:hover {
        background-color: rgba(20, 162, 164, 0.619);
        box-shadow: 1px 1px 20px rgb(5, 5, 5);
    }

    .arches ul.socials{
        display: flex;
        width: 40%;
        height: auto;
        padding: 0%;
        margin: 0% 30%;
    }

    .arches ul.socials li{
        width: 25%;
        margin: 3%;
        justify-content: center;
        position: relative;
    }

    .arches ul.socials li img{
        width: 100%;
        border-radius: 5vw;
        position: relative;
    }

    .arches ul.socials li img:hover {
       opacity: 0.8;
       box-shadow: 1px 1px 20px rgb(0, 0, 0);
    }

    @media only screen and (max-width: 800px) {
        
        .arches {
            width: 60%;
            margin: 15% 20%;
        }

        .arches ul {
            font-size: 1.8rem;
        }

        .arches ul.socials {
            margin: 0% 15%;
            width: 70%;
            padding: 0%;
        }

        .arches ul.socials li {
            width: 25%;
            margin: 2%;
            justify-content: center;
        }
    }

    @media only screen and (max-width: 600px) {
        .arches {
            width: 80%;
            margin: 20% 10%;
        }

        .arches ul.socials {
            margin: 0% 20%;
            width: 60%;
        }
    }

    @media only screen and (max-width: 500px) {
        
        .arches {
            width: 95%;
            margin: 20% 2.5%;
        }
    
    }

    @media only screen and (max-width: 400px) {

        .arches {
            margin: 25% 2.5%;
        }

        .arches ul {
            font-size: 1.7rem;
        }
    }

    @media only screen and (max-width: 350px) {

        .arches ul.socials {
            margin: 0% 17%;
            width: 68%;
        }

        .arches ul {
            font-size: 1.6rem;
        }

    }

/*=============================================
    main content
=============================================*/

.main_content{
    margin-left:15%;
    margin-right:15%;
    width: 70%;
    padding-bottom: 10%;
}

@media only screen and (max-width: 1140px) {
    .main_content {
        margin-left: 10%;
        margin-right: 10%;
        width: 80%;
        padding-bottom:10%;
    }
}

@media only screen and (max-width: 1000px) {
    .main_content {
        margin-left: 0%;
        margin-right: 0%;
        width: 100%;
        padding-bottom: 0%;
    }
}

/*===============================================
    typing text
===============================================*/

.tptext{
    /*background-color: rgba(12, 14, 28, 0.953);*/
    /*box-shadow: 2px 2px 5px white;*/
    color: white;
    font-weight: bold;
    width: 100%;
    min-height: 40vw;
    padding: 15% 2%;
    font-size: 5.2vw;
    text-shadow: 2px 2px 20px cyan;
    display: flex;
    margin-bottom: 10%;
}


@media only screen and (max-width: 1600px){
    .tptext {
        padding: 13% 2%;
    }
}

@media only screen and (max-width: 1400px) {
    .tptext {
        font-size: 5.4vw;
    }
}


@media only screen and (max-width: 1140px) {
    .tptext {
        font-size: 5.6vw;
        margin-bottom: 15%;
        padding: 15% 2%;
    }
}

@media only screen and (max-width: 1000px) {
    .tptext {
        width: 80%;
        font-size: 6.0vw;
        margin-top: 0%;
        margin-left: 10%;
        margin-right: 10%;
        margin-bottom: 10%;
    }
}

@media only screen and (max-width: 800px) {
    .tptext {
        font-size: 6.1vw;
    }
}

@media only screen and (max-width: 700px) {
    .tptext {
        width: 85%;
        font-size: 9.0vw;
        margin-left: 7.5%;
        margin-right: 7.5%;
        margin-top: 8%;
        margin-bottom: 15%;
        min-height: 80vw;
    }
}



@media only screen and (max-width: 550px) {
    
    .tptext{
        display: none;
    }

    /*.tptext {
        width: 95%;
        text-align: left;
        font-size: 11vw;
        margin-top: 8%;
        margin-bottom: 15%;
        min-height: 80vw;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }*/
}



/*=============================================
    something aboout me
=============================================*/

section.smthabme{
    background-color: rgba(8, 8, 8, 0.659);
    width: 100%;
    padding: 0%;
    text-align: white;
    border-radius: 0.5vw;
    position: relative;
    display: flex;
}

section.smthabme::after, section.smthabme::before{
    inset: -.5rem;
    content: '';
    position: absolute;
    z-index: -1;
    background-color: rgb(99, 2, 68);
    filter: blur(2.5rem);
}

@media (max-width: 1000px) {
    section.smthabme::after, section.smthabme::before {
        inset: -0.0rem;
    }
}

.smthabme img{
    height: 100%;
    width: auto;
    border-radius: 1vw 0vw 0vw 1vw;
}

.smthabme #ProfPic2{
    display: none;
}

section.smthabme .avatar{
    width: 30%;
    overflow: hidden;
}

.smthabme .descr{
    padding: 4%;
    width: 70%;
}

.smthabme .descr h4{
    color: rgb(191, 5, 141);
    font-weight: lighter;
}

.smthabme .descr h2 {
    font-weight: bold;
    color: rgb(255, 255, 255);
}

.smthabme .descr p{
    font-weight: lighter;
    color: rgba(255, 255, 255, 0.648);
    font-size: 1.05rem;
    margin-bottom: 5%;
}

@media only screen and (max-width: 1750px) {

    .smthabme .descr {
        padding: 3%;
        margin: 0% 0% 0% 0%;
    }
}

.smthabme .descr a{
    color: rgb(255, 171, 242);
}

.smthabme .descr button{
    border-radius: 0.5vw;
    padding: 2% 10%;  
    font-weight: 700;
    font-size: 1.1rem;
    transition: 0.5s;
    color: rgb(255, 255, 255);
    background-color: rgb(3, 144, 183);
    box-shadow: 1px 1px 10px rgb(0, 0, 0);
    border-color: rgba(114, 114, 114, 0.299);
    
}

.smthabme .descr button:hover {
    background-color: rgb(28, 146, 186);
    box-shadow: 0.5px 0.5px 20px rgb(141, 158, 199);
}

.smthabme .descr a:hover {
    color: rgb(0, 242, 255);
    transition: 0.5s;
}

.smthabme .descr button:hover:after {
    background-color: rgb(116, 3, 67);
    transition: 0.5s;
}

@media only screen and (max-width: 1400px) {

    section.smthabme .avatar {
        width: 40%;
    }

    .smthabme .descr {
        width: 60%;
    }

    .smthabme .descr h4 {
        font-size: 1.3rem;
    }

    .smthabme .descr h2 {
        font-size: 1.9rem;
    }

    .smthabme .descr p {
        font-size: 1.0rem;
        margin-bottom: 4%;
    }

    .smthabme .descr button {
        padding: 2% 10%;
        font-size: 1.0rem;
    }

}

@media only screen and (max-width: 1250px) {
    .smthabme .descr h2 {
        font-size: 1.6rem;
    }

    .smthabme .descr p {
        font-size: 0.9rem;
        margin-bottom: 4%;
    }
}


@media only screen and (max-width: 1000px) {

    section.smthabme .avatar {
        width: 35%;
    }

    .smthabme .descr {
        width: 62%;
    }

    .smthabme .descr h4 {
        font-size: 1.4rem;
    }

    .smthabme .descr h2 {
        font-size: 1.7rem;
    }

    .smthabme .descr button {
        border-radius: 1vw;
    }
}


@media only screen and (max-width: 760px) {
    section.smthabme .avatar {
        width: 40%;
    }

    .smthabme .descr {
        width: 60%;
        margin-top: 2%;
    }

    .smthabme .descr h4 {
        font-size: 1.2rem;
    }

    .smthabme .descr h2 {
        font-size: 1.5rem;
    }

    .smthabme .descr p {
        font-size: 0.95rem;
        margin-bottom: 5%;
    }

    .smthabme .descr button {
        font-size: 1.2rem;
        margin: 2% 0%;
    }
}

@media only screen and (max-width: 680px) {

    .smthabme #ProfPic1 {
        display: none;
    }

    .smthabme #ProfPic2 {
        display: block;
    }

    section.smthabme {
        display: block;
        width: 100%;
        margin-left: 0%;
        margin-right:0%;
        border-radius: 1vw;
        margin-bottom: 0%;
    }

    section.smthabme .avatar {
        width: 100%;
        overflow: hidden;
        border-radius: 1vw;
    }

    section.smthabme .avatar img{
        width: 100%;
        height: auto;
    }

    .smthabme .descr {
        width: 100%;
        margin: 0%;
        margin-top: 2%;
        padding: 10% 6% 14% 6%;
    }

    .smthabme .descr button {
        margin: 1% 0%;
    }
}

@media only screen and (max-width: 450px) {
    section.smthabme {
        display: block;
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
        border-radius: 1vw;
        margin-bottom: 0%;
    }

    .smthabme .descr h2 {
        font-size: 5.6vw;
    }

    .smthabme .descr button {
        padding: 3% 12%;
        margin: 2% 0%;
        font-size: 1.1rem;
    }
}

@media only screen and (max-width: 400px) {
    .smthabme .descr p {
        font-size: 4.1vw;
    }
}

@media only screen and (max-width: 350px) {
    .smthabme .descr p {
        font-size: 4.3vw;
    }
}



/*==================================================================
==================================================================*/

/*==================================================================
    !!!!Fotter!!!!!
==================================================================*/

/*==================================================================
==================================================================*/


/*============================================
    contact
============================================*/

/*Contact container*/

#Contact {
    background-color: rgba(0, 0, 0, 0.797);
    color: rgb(224, 224, 224);
    padding: 5%;
    width: 100%;
    position: relative;
    z-index: 1;
}

/*Contact h3 and p*/
#Contact h3 {
    width: 60%;
    padding: 2%;
    border-bottom: 2px solid rgba(255, 255, 255, 0.753);
    font-weight: bold;
}

#Contact p {
    font-weight: lighter;
    font-size: 1.2rem;
}

@media screen and (max-width: 1700px) {
    #Contact h3 {
        width: 70%;
    }
}

@media screen and (max-width: 1600px) {
    #Contact h3 {
        width: 80%;
    }
}

@media screen and (max-width: 1300px) {
    #Contact h3 {
        width: 80%;
    }
}

@media screen and (max-width: 1200px) {
    #Contact h3 {
        width: 60%;
    }
}

@media screen and (max-width: 1000px) {
    #Contact h3 {
        width: 50%;
    }

}

@media screen and (max-width: 850px) {
    #Contact h3 {
        width: 40%;
    }
}

@media screen and (max-width: 700px) {
    
    #Contact{
        padding: 5% 0%;
    }

    #Contact h3 {
        width: 50%;
    }
    
    #Contact p {
        font-size: 1.0rem;
    }
}

@media screen and (max-width: 575px) {
    #Contact {
        padding: 5% ;
    }
}

@media screen and (max-width: 550px) {
    #Contact h3 {
        width: 60%;
    }
}

@media screen and (max-width: 450px) {
    #Contact h3 {
        width: 70%;
        font-size: 1.5rem;
    }

    #Contact p {
        font-size: 4.1vw;
    }

}

@media screen and (max-width: 350px) {
    #Contact p {
        font-size: 4.3vw;
    }
}

/*--col_one--*/
#Contact .col_one p {
    padding: 2% 0%;
    width: 100%;
}

#Contact .col_one button {
    font-size: 1.3rem;
    font-weight: 400;
    padding: 3% 10%;
    border-radius: 1rem;
    background-color: #039cb7;
    position: relative;
    color: rgb(0, 0, 0);
    border: none;
    color: white;
}

#Contact .col_one button::after {
    content: '';
    position: absolute;
    inset: -.1rem;
    background-color: rgb(179, 251, 254);
    z-index: -1;
    filter: blur(10px);
    border-radius: 0.5vw;
}

#Contact .col_one button:hover {
    background-color: rgb(116, 3, 67);
    color: rgb(255, 255, 255);
    transition:color 0.5s;
    transition: 0.5s;

}

#Contact .col_one button:hover:after{
    background-color: rgb(116, 3, 67);
    transition: 0.5s;
}

@media screen and (max-width: 1400px) {
    #Contact .col_one button {
        padding: 3% 11%;
    }
}

@media screen and (max-width: 1200px) {
    
    #Contact .col_one p {
        padding: 2% 5% 2% 0%;
    }

    #Contact .col_one button {
        padding: 1.5% 5%;
    }
}

@media screen and (max-width: 1200px) {

    #Contact .col_one button {
        padding: 2% 9%;
    }
}

@media screen and (max-width: 768px) {
    #Contact .col_one {
        padding-bottom: 5%;
    }

    #Contact .col_one button {
        padding: 2.5% 10%;
        border-radius: 0.7vw;
    }
}

@media screen and (max-width: 550px) {
    #Contact .col_one {
        padding-bottom: 10%;
    }

    #Contact .col_one button {
        padding: 2.5% 9%;
        border-radius: 0.9vw;
    }
}

@media screen and (max-width: 450px) {
    #Contact .col_one p {
        padding: 2% 2% 2% 2%;
    }

    #Contact .col_one button {
        padding: 2.5% 8%;
        border-radius: 2vw;
    }
}

/*--col_two--*/

#Contact .col_two .phrap {
    padding: 2% 0% 4% 0%;
}

#Contact .col_two .phrap div.donate{
    margin: 5% 0%;
    display: block;
}

#donate, #crypto{
    color: rgb(19, 18, 18);
    font-weight: 500;
    border: none;
    border-radius: 0.5rem;
    padding: 2% 5%;
    width: 60%;
    font-size: 1.2vw;
    position: relative;
}

#donate:hover {
    background-color: rgba(245, 252, 144, 0.893);
    transition: background-color 1s;
}

#crypto{
    background-color: rgb(20, 11, 11);
    color: rgb(243, 242, 242);
}

#donate{
    background-color: rgb(251, 251, 61);
}

#crypto:hover {
    background-color: rgb(43, 43, 43);
    transition: background-color 1s;
}

@property --rotate {
    syntax: "<angle";
    initial-value: 132deg;
    inherits: false;
}

@keyframes rotation {
    0% {
        --gradient-angle: 0deg;
    }

    100% {
        --gradient-angle: 360deg;
    }
}

#donate::before, 
#donate::after{
    content: " ";
    position: absolute;
    inset: -.2rem;
    background-image: linear-gradient(var(--rotate),
        var(--clr-12),
        var(--clr-13),
        var(--clr-14),
        var(--clr-9),
        var(--clr-9),
        var(--clr-10),
        var(--clr-11),
        var(--clr-12));
    position: absolute;
    z-index: -1;
    animation: spin 5s linear infinite;
    border-radius: 0.5rem;
}

#crypto::before,
#crypto::after {
    content: " ";
    position: absolute;
    inset: -.2rem;
    background-image: linear-gradient(var(--rotate),
            var(--clr-8),
            var(--clr-7),
            var(--clr-6),
            var(--clr-5),
            var(--clr-4),
            var(--clr-3),
            var(--clr-2),
            var(--clr-1));
    position: absolute;
    z-index: -1;
    animation: spin 5s linear infinite;
    border-radius: 0.5rem;
}

#donate::after {
    filter: blur(2.5rem);
}

#crypto::after {
    filter: blur(2.5rem);
}

@property --rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false;
}

@keyframes spin {
    0% {
        --rotate: 0deg;
    }

    100% {
        --rotate: 360deg;
    }
}

@media screen and (max-width: 1600px) {
    #donate,
    #crypto {
        padding: 2% 5%;
        width: 70%;
        font-size: 1.4vw;
    }
}

@media screen and (max-width: 1300px) {
    #donate,
    #crypto {
        width: 80%;
        font-size: 1.4vw;
    }
}

@media screen and (max-width: 1199px) {
    #donate,
    #crypto {
        width: 50%;
        font-size: 1.6vw;
    }
}

@media screen and (max-width: 1080px) {
    #donate,
    #crypto {
        width: 60%;
        font-size: 1.8vw;
    }
}

@media screen and (max-width: 1000px) {
    #Contact .col_two p {
        padding: 1% 5% 1% 0%;
    }

    #donate,
    #crypto {
        padding: 1.5% 3%;
        width: 65%;
        font-size: 2vw;
    }
}

@media screen and (max-width: 901px) {
    #Contact .col_two p {
        padding: 1% 30% 1% 0%;
    }

    #donate,
    #crypto {
        width: 40%;
        font-size: 2vw;
    }
}

@media screen and (max-width: 800px) {
    #donate,
    #crypto {
        width: 45%;
        font-size: 2.5vw;
    }
}

@media screen and (max-width: 768px) {
    #Contact .col_two {
        padding-bottom: 5%;
    }
}

@media screen and (max-width: 650px) {
    #donate,
    #crypto {
        font-size: 3vw;
    }
}


@media screen and (max-width: 550px) {
    #Contact .col_two p{
        padding: 1% 20% 2% 0%;
    }

    #donate,
    #crypto {
        width: 55%;
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 440px) {
    #donate,
    #crypto {
        width: 60%;
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 400px) {
    #Contact .col_two p {
        padding: 1% 3% 8% 0%;
    }

    #donate,
    #crypto {
        padding: 2% 3%;
        width: 70%;
        font-size: 1.1rem;
    }
}

/*=============crypto buttons=====================*/

#cryptoButtons{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0%;
    left: 0%;
    background-color: rgba(0, 0, 0, 0.99);
    z-index: 1000;
}

#closeCrypto{
    padding: 1% 2%;
    width: 100%;
}

#closeCrypto .right{
    float: right;
}

#cryptoButtons .tablica{
   margin: 8% 0% 0% 36%;
}

#value {
    background-color: rgb(20, 11, 11);
    color: white;
    font-weight: 500;
    border: none;
    border-radius: 0.5rem;
    padding: 1%;
    width: 40%;
    font-size: 1.5rem;
    position: relative;
}

#value:hover {
    background-color: rgb(43, 43, 43);
    transition: background-color 1s;
}

#value::before,
#value::after {
    content: " ";
    position: absolute;
    inset: -.2rem;
    position: absolute;
    z-index: -1;
    animation: spin 5s linear infinite;
    border-radius: 0.5rem;
}

.donate .col .bitcoin::before,
.donate .col .bitcoin::after{
    background-image: linear-gradient(var(--rotate),
            yellow,
            rgb(255, 157, 0),
            rgb(135, 135, 8),
            rgb(152, 174, 11),
            rgb(218, 218, 117),
            rgb(247, 247, 173),
            rgb(254, 231, 82),
            rgb(170, 170, 115));
}

.donate .col .monero::before,
.donate .col .monero::after{
    background-image: linear-gradient(var(--rotate),
            rgb(253, 174, 174),
            rgb(236, 131, 131),
            rgb(205, 81, 81),
            rgb(150, 10, 10),
            rgb(126, 2, 2),
            rgb(119, 20, 50),
            rgb(151, 27, 83),
            rgb(111, 35, 58));
}

.donate .col .etc::before,
.donate .col .etc::after{
    background-image: linear-gradient(var(--rotate),
            rgb(181, 181, 250),
            rgb(118, 118, 205),
            rgb(52, 52, 183),
            rgb(22, 22, 140),
            rgb(29, 120, 172),
            rgb(67, 76, 107),
            rgb(34, 114, 163),
            rgb(116, 161, 220));
}

.donate .col .ltc::before,
.donate .col .ltc::after{
    background-image: linear-gradient(var(--rotate),
            rgb(20, 153, 206),
            rgb(27, 215, 203),
            rgb(103, 144, 155),
            rgb(75, 104, 121),
            rgb(7, 78, 101),
            rgb(121, 73, 149),
            rgb(163, 74, 211),
            rgb(135, 2, 172));
}

#value::after {
    filter: blur(2.5rem);
}

@media screen and (max-width: 1200px){

    #closeCrypto {
        padding: 2% 3%;
    }

    #cryptoButtons .tablica {
        margin: 8% 0% 0% 26%;
    }

    #value {
        padding: 1.5%;
        width: 60%;
    }
}

@media screen and (max-width: 800px) {
    #cryptoButtons .tablica {
        margin: 10% 0% 0% 22%;
    }

    #value {
        padding: 2%;
        width: 70%;
    }
}

@media screen and (max-width: 600px) {

    #closeCrypto {
        padding: 3% 3%;
    }

    #cryptoButtons .tablica {
        margin: 15% 0% 0% 22%;
    }
}

@media screen and (max-width: 500px) {

    #closeCrypto {
        padding: 3% 3%;
    }

    #cryptoButtons .tablica {
        margin: 15% 0% 0% 16%;
    }

    #value {
        padding: 2%;
        width: 80%;
    }
}

/*--col_three--*/

#Contact .col_three ul {
    list-style-type: none;
    margin: 0%;
    padding: 0%;
}

#Contact .col_three ul li {
    width: 100%;
    display: flex;
    text-align: left;
}

#Contact .col_three ul li h4 {
    width: 17%;
    padding: 1%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#Contact .col_three ul li h4 a{
    width: 100%;
    position: relative;
}


#Contact .col_three ul li h4 a:before{
    content: '';
    position: absolute;
    inset: -.2rem;
    background-color: transparent;
    z-index: -1;
    filter: blur(10px);
    border-radius: 0.5vw;
    border-radius: 3vw;
}

#Contact .col_three ul li h4 a:hover:before {
    background-color: rgb(174, 141, 175);
    filter: blur(10px);
}


#Contact .col_three ul li h4 a img {
    width: 100%;
    height: auto;
    border-radius: 3vw;
    position: relative;
}

#Contact .col_three ul li a {
    width: 80%;
    height: auto;
    margin: 4%;
    color: white;
    text-decoration: none;
}

#Contact .col_three ul li span {
    width: 100%;
    color: rgb(255, 255, 255);
    font-weight: lighter;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
}

#Contact .col_three ul li a span:hover {
    color: rgb(167, 21, 143);
}


@media screen and (max-width: 1600px) {
    
    #Contact .col_three ul li h4 {
        width: 20%;
    }

    #Contact .col_three ul li a {
        margin: 3%;
    }

}


@media screen and (max-width: 991px) {
    #Contact .col_three ul li h4 {
        width: 11%;
    }

    #Contact .col_three ul li a {
        margin: 3%;
    }
}

@media screen and (max-width: 768px) {

    
    #Contact .col_three {
        padding-bottom: 5%;
    }

    #Contact .col_three ul li h4 {
        width: 12%;
    }

    #Contact .col_three ul li h4 img {
        border-radius:5rem;
    }
}

@media screen and (max-width: 550px) {

    #Contact .col_three ul li h4 {
        width: 13%;
    }

    #Contact .col_three {
        padding-bottom: 8%;
    }

    #Contact .col_three ul li a {
        margin: 2.8%;
    }

    #Contact .col_three ul li span {
        margin: 0%;
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 450px) {

    #Contact .col_three ul li h4 {
        width: 15%;
    }

    #Contact .col_three ul li a {
        margin: 3%;
        margin-left: 2.5%;
    }

    #Contact .col_three ul li span {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 350px) {
    #Contact .col_three ul li a {
        margin: 1.5%;
    }
}


/*============================================
    fotter
============================================*/
.fotter {
    margin: 0%;
    padding: 0%;
    width: 100%;
    height: auto;
    color: rgb(151, 151, 151);
    text-align: center;
    display: flex;
    justify-content: center;
}

.fotter ul.icon_list {
    list-style-type: none;
    margin: 0%;
    padding: 0%;
    margin-bottom: 5%;
    margin-top: 5%;
}

@media screen and (max-width: 700px) {
    .fotter ul.icon_list li {
        font-size: 0.8rem;
        margin-bottom: 10%;
        margin-top: 0%;
    }
}

@media screen and (max-width: 500px) {
    .fotter ul.icon_list li {
        font-size: 0.7rem;
    }
}

.fotter ul.icon_list li img.col:hover {
    opacity: 0.8;
}

.fotter ul.icon_list li a {
    color: rgb(151, 151, 151);
    text-decoration: none;
}

.fotter ul.icon_list li a:hover {
    color: rgb(222, 37, 210);
    cursor: pointer;
    transition: 0.5s;
}

/*=========================================
    pages!!!!!
=========================================*/

/*=========================================
    posts
=========================================*/

.posts{
    padding: 0% 25% 10% 25%;
    width: 100%;
}

@media screen and (max-width: 1000px) {
    .posts {
        padding: 3% 15% 10% 15%;
    }
}

@media screen and (max-width: 700px) {
    .posts {
        padding: 5% 2% 10% 2%;
    }
}

.posts .post{
    background-color: rgb(237, 237, 237);
    width: 100%;
    border-radius: 2vw;
    padding: 3%;
    margin: 5% 0%;
    position: relative;
}

/*title*/
.posts .post .title{
    display: flex;
    padding-left: 1%;
    align-items: center;
    margin-bottom: 1%;
    width: 100%;
}

.posts .post .title .text{
    width: 88%;
}

.posts .post .title .text h3{
    font-size: 2.0rem;
    font-weight: bold;
    margin-left: 1%;
}

.posts .post .title .symbol{
    width: 10%;
}

.posts .post .title .symbol img{
    width: 100%;
}

@media screen and (max-width: 1400px) {
    .posts .post .title .symbol {
        width: 12%;
    }
}

@media screen and (max-width: 1100px) {
    .posts .post .title .symbol {
        width: 13%;
    }
}

@media screen and (max-width: 1000px) {
    .posts .post .title .symbol {
        width: 11%;
    }
}

@media screen and (max-width: 800px) {
    .posts .post .title .symbol {
        width: 13%;
    }
}

@media screen and (max-width: 700px) {
    .posts .post .title .text h3 {
        font-size: 1.8rem;
    }

    .posts .post .title .symbol {
        width: 12%;
    }
}

@media screen and (max-width: 550px) {
    .posts .post .title .text h3 {
        font-size: 1.7rem;
    }

    .posts .post .title .symbol {
        width: 13%;
    }
}

@media screen and (max-width: 450px) {

    .posts .post .title .symbol {
        width: 14%;
    }

    .posts .post .title .text h3 {
        font-size: 1.6rem;
    }

}

@media screen and (max-width: 350px) {

    .posts .post .title .symbol {
        width: 15%;
    }

    .posts .post .title .text h3 {
        font-size: 1.5rem;
    }

}


/*main photo*/

.posts .post .image{
    width: 100%;  
}

.posts .post .image img{
    width: 100%;
    border-radius: 0.5vw;
    background-color: rgb(26, 74, 74);
}

/*likes*/
.posts .post .like{
    padding: 2% 0% 0% 2%;
}

.like ul {
    padding: 0%;
    margin: 0%;
    padding: 0%;
}

.posts .post .like .heart:hover {
    content: url(/photos/icons/pink_heart.webp);
}

.posts .post .like .download:hover {
    content: url(/photos/icons/cyan_download.webp);
}

.posts .post .like ul{
    list-style-type: none;
    display: flex;
    justify-content: baseline;
}

.posts .post .like ul li{
    margin-right: 1%;
    text-align: center; 
}

.posts .post .like ul li img{
    width: 100%;
}

@media screen and (max-width: 650px) {
   
    .posts .post .like {
        padding: 2% 0% 0% 1%;
    }

    .posts .post .like ul li {
        margin-right: 0%;
        width: 9%;
    }
}

@media screen and (max-width: 500px) {

    .posts .post .like ul li {
        margin-right: 0%;
        width: 11%;
    }

}