html{
    cursor: url(mouse/defult.png)35 35,auto;
    background-image:url(images/image2/background.jpg);
    background-repeat: no-repeat;
    background-size:100% 100vh;
    background-attachment:fixed;
    scroll-behavior:smooth;
}

::-webkit-scrollbar {
    width: 13px;
  }

::-webkit-scrollbar-track {
    background: #cbc5c2;
  }

::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 10px;
    border: 2px solid #ffffff;
}
body{
    animation: fade-in 1s;
}
@keyframes fade-in {
    0% { opacity: 0; }

    100% { opacity: 1; }
}
#logo{
    position: fixed;
    right:0;
    top:0;
    width:10%;
    transition: width 0.5s;
}
p{
    text-align: center;
    font-family: fantasy;
    background-color:rgba(0, 0, 0, 0.272);
}
.w1{
    padding: 30px;
    position: relative;
    top:28px;
    left: -20px;
    margin-top: 5vw;
    margin-left: 10%;
    margin-right: 54%;
    color: azure;
    font-size:2vw;
    border-radius: 50px;
    backdrop-filter: blur(5px);
}
.w2{
    padding: 20px;
    margin-top: 33vw;
    margin-left: 50%;
    margin-right: auto;
    color: azure;
    font-size:2vw;
    border-radius: 50px;
    backdrop-filter: blur(5px);
}
.w3{
    padding: 30px;
    margin-top: 35vw;
    margin-left: 35%;
    margin-bottom: 28vw;
    margin-right: auto;
    position: relative;
    left: -18vw;
    color: azure;
    font-size:2.5vw;
    border-radius: 60px;
    backdrop-filter: blur(5px);
}
.goose{
    width: 5vw;
}
#fox{
    width:6vw;
}
a:hover{
    cursor: url(mouse/select.png)35 35, auto;
}
#logo:hover{
    width:11%;
    transition: width 0.5s;
}
#logo:active{
    cursor: url(mouse/click.png)35 35, auto;
}
#fox:hover{
    width:7vw;
    transition: width 0.8s;
}
#fox:active{
    cursor: url(mouse/click.png)35 35, auto;
    width:5vw;
}
.goose:hover{
    width:6vw;
    transition: width 0.5s;
}
@media (max-width: 1080px) {
    html{
        background-image:url(images/vertical-Backgound/2.png);
        background-size:100% 100%;
    }
    .w1{
        padding: 50px;
        position: relative;
        top:28px;
        left: -20px;
        margin-top: 5vw;
        margin-left: 10%;
        margin-right: 10%;
        font-size:2.4em;
        border-radius: 50px;
        box-sizing: border-box;
        box-shadow:0 0 80px 0px #4a4a4ab7;
    }
    .w2{
        padding: 20px;
        margin-top: 70vw;
        margin-left: 8%;
        font-size:2.4em;
        border-radius: 50px;
        box-sizing: border-box;
        box-shadow:0 0 80px 0px #4a4a4ab7;
    }
    .w3{
        padding: 30px;
        margin-top: 70vw;
        margin-left: 10%;
        margin-bottom: 90vw;
        margin-right: auto;
        position: relative;
        left: -5vw;
        font-size:2.4em;
        border-radius: 50px;
        box-sizing: border-box;
        box-shadow:0 0 80px 0px #7d7d7db7;
    }
    .goose{
        width: 2.8em;
    }
    #fox{
        width: 3em;
    }
    #fox:hover{
        width:3.5em;
    }
    #fox:active{
        cursor: url(mouse/click.png)35 35, auto;
        width:3em;
    }
    .goose:hover{
        width:3em;
    }
    #logo{
        position: fixed;
        right:0;
        top:0;
        width:20%;
        transition: width 0.5s;
    }
    #logo:hover{
        width:21%;
        transition: width 0.5s;
    }
}
@media (prefers-reduced-motion: reduce){
    html{
        animation:none;
    }
    #logo, #logo:hover, #fox:hover, .goose:hover{
        transition: none;
    }
  }