/* General Values */
:root{
    --main-bg-color: #0f0c29;
    --primary-color: #111822;
    --secondary-one-color: #34D330;
    --secondary-two-color: #111822;
    --main-cursor-color: rgba(122, 233, 255, 1.0);
    --text-color: rgba(255 ,255 ,255 ,1.0 );
    --text-style: normal;
    --font-family: ui-serif;
}


/* General Style */

body{
    /* background-color: var(--main-bg-color); */
    /* background: #0f0c29; */ /* fallback for old browsers */
  /* background: -webkit-linear-gradient(to right, #0f0c29, #302b63, #24243e); */ /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, var(--main-bg-color), #302b63, #24243e);
    cursor: none;
    min-height: 100vh;
    margin: 0;
    /* background-image: url(https://dogstudio.co/app/themes/portfolio-2018/static/assets/images/home/background-m.png);
    background-repeat: no-repeat;
    background-size: cover; */
}

p,span,h1,h2,h3,h4,h5,h6,a,blockquote{
    color: var(--text-color);
}

button {
    appearance: auto;
    writing-mode: horizontal-tb !important;
    /* font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-weight: ;
    font-stretch: ;
    font-size: ;
    font-family: ; */
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: buttonface;
    margin: 0em;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonborder;
    border-image: initial;
}

/* Cursor Style */

/* body .cursor {
    pointer-events: none;
}

body .cursor__ball {
    position: fixed;
    top: 0;
    left: 0;
    mix-blend-mode: difference;
    z-index: 1000;
}

body .cursor__ball circle {
    fill: var(--main-cursor-color);
} */


/* #Cursor
================================================== */

.cursor,
.cursor2,
.cursor3{
position: fixed;
border-radius: 50%;	
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
left: 0;
top: 0;
}
.cursor{
background-color: #fff;
height: 0;
width: 0;
z-index: 99999;
}
.cursor2,.cursor3{
height: 36px;
width: 36px;
z-index:99998;
-webkit-transition:all 0.3s ease-out;
transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
transform:scale(2) translateX(-25%) translateY(-25%);
border:none
}
.cursor2{
border: 2px solid #fff;
box-shadow: 0 0 22px rgba(255, 255, 255, 0.6);
}
.cursor2.hover{
background: rgba(255,255,255,.1);
box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
@media screen and (max-width: 1200px){
.cursor,.cursor2,.cursor3{
    display: none
}
}


/* Index Styles */
.main-title{
    position:absolute;
    top: 1vh;
    left: 2vw;
    width: 50vw;
    font-size: 1.5rem;
    font-style: var(--text-style);
    font-family: var(--font-family);
}

.BR-title{
    position:absolute;
    top: 70vh;
    left: 30vw;
    width: 50vw;
    font-size: 2.5rem;
    font-style: var(--text-style);
    font-family: var(--font-family);
}

.bg-index{
    width:100%;
    height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 300% 300%;
    background-image: linear-gradient(
        -45deg,
        rgba(37, 113, 148, 0.2) 0%,
        rgba(56, 70, 139, 0.2) 25%,
        rgba(54, 17, 68, 0.2) 51%,
        rgba(80, 24, 45, 0.2) 100%
    );
    animation: AnimateBG 10s ease infinite;
}

@keyframes AnimateBG {
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
}

body > canvas {
    position: absolute;
    top: 0px;
    left: 0px;
}

/* Site Volume */
@media (max-width:50.9275em){
    .site-volume{
        right:15px;
        bottom:25px
    }
}

.site-volume {
    position: fixed;
    right: 45px;
    bottom: 35px;
    height: 30px;
    width: 30px;
    z-index: 989;
    border: 0 none;
    outline: none;
    background: transparent;
    cursor: pointer;
    pointer-events: all;
}

.site-volume:before{
    content:"";
    background-color:#fff
}

.site-volume .pulsing-ui, .site-volume:before {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 6px;
    width: 6px;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    border-radius: 50%;
}

.site-volume .pulsing-ui{
    transition:opacity .3s cubic-bezier(.25,.46,.45,.94);
    opacity:0
}

.site-volume .pulsing-ui:after,.site-volume .pulsing-ui:before{
    position:absolute;
    top:50%;
    left:50%;
    height:30px;
    width:30px;
    content:"";
    z-index:-1;
    -webkit-transform:translate(-50%,-50%) scale(0);
    transform:translate(-50%,-50%) scale(0);
    -webkit-animation:1.6s linear infinite;
    animation:1.6s linear infinite;
    border:2px solid #fff;
    border-radius:50%;
    -webkit-animation-name:u14c2d417;
    animation-name:u14c2d417
}

.site-volume .pulsing-ui:before{
    -webkit-animation-delay:.5s;
    animation-delay:.5s
}

.site-volume.is-playing .pulsing-ui{
    opacity:1;

    background: white;

}



  @-webkit-keyframes u14c2d417{
      0%{
          -webkit-transform:translate(-50%,-50%) scale(0);
          transform:translate(-50%,-50%) scale(0);
          opacity:1
        }to{
            -webkit-transform:translate(-50%,-50%) scale(1);
            transform:translate(-50%,-50%) scale(1);
            opacity:0
        }
    }
    
    @keyframes u14c2d417{
        0%{
            -webkit-transform:translate(-50%,-50%) scale(0);
            transform:translate(-50%,-50%) scale(0);
            opacity:1
        }to{
            -webkit-transform:translate(-50%,-50%) scale(1);
            transform:translate(-50%,-50%) scale(1);opacity:0
        }
    }

    .u-visually-hidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }