:root{

    --cc-h-bg: #ffffff;
    --cc-r-bg: 255,255,255;

    --cc-h-main: #EBD775;
    --cc-r-main: 235,215,117;

    --cc-h-acc: #EBD775;
    --cc-r-acc: 235,215,117;

    --cc-h-offw: #ffffff;
    --cc-r-offw: 255,255,255;

    --cc-h-offb: #000000;
    --cc-r-offb: 0,0,0;

    --xvar: .7;

}

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:middle;
    background:transparent;
    color: var(--cc-h-offw);
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    scrollbar-width: none;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: inherit;
    cursor: inherit;
}

body{
    margin: 0;
    font-family: "Rubik", sans-serif;
    background: var(--cc-h-bg);
    color: var(--cc-h-offw);
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
    overflow-x: hidden;
    overflow-y: scroll;
}

body::-webkit-scrollbar{
    display: none;
}

#all{
    width: 100vw;

    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    /*padding-bottom: 50vh;*/
}



#bgtela{
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
}

#tela{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -1;
}

#con{
    cursor: pointer;
    color: rgba(0,0,0,.3);
    transition: 3s;
    font-size: 2vw;
}

#con:hover{
    transition: 3s;
    color: rgba(0,0,0,.7);
    transform: scale(1.6);
}

#hero{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 30vh;
}

#svglogo{
    position: absolute;
    opacity: 0;
    stroke: black;
    stroke-width: 3px;
    width: 80vw;
    height: 60vh;
    object-fit: contain;
    object-position: center center;
    stroke-linejoin: round;
    stroke-linecap: round;
}

#vbg{
    display: none;
    opacity: 0;
    position: absolute;
    width: 80vw;
    height: 60vh;
    object-fit: cover;
    object-position: center center;

    mask-image:url(stuff/mask.png);
    mask-position:center center;
    mask-repeat:no-repeat;
    mask-size:contain;

}

#grad {
    opacity: 0;
    display: none;
    width: 80vw;
    height: 60vh;
    position: absolute;
    background: linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
    background-size: 600% 100%;
    animation: gradient 16s linear infinite;
    animation-direction: alternate;

    mask-image:url(stuff/mask.png);
    mask-position:center center;
    mask-repeat:no-repeat;
    mask-size:contain;
}

@keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 100%}
}

.paint{
    /*display: none;*/
    width: 100vw;
    height: 100vh;
    /*background: rgba(0,0,0,.1);*/
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp{
    width: 70%;
    height: 70%;
    object-fit: contain;
    object-position: center center;
    filter: drop-shadow(0px 30px 70px rgba(0,0,0,.7));
    cursor: zoom-in;
    z-index: 16;
    /*transition: 1.6s;*/
}

#cp4{
    display:none;
}

/*.pp:hover{*/
/*    transform: scale(1.2);*/
/*    transition: 12s;*/
/*}*/

#overlay{
    cursor: zoom-out;
    display: none;

    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.9);
    /*background: #ffffff;*/
    opacity: 0;

    align-items: center;
    justify-content: center;
}

#overpic{
    z-index: 21;
    width: 98%;
    height: 98%;
    object-fit: contain;
    object-position: center center;
    opacity: 0;
}

#footer{
    background: rgba(178,174,0);
    /*background: rgba(255,253,238,.99);*/
    width: 100vw;
    height: 30vh;
    /*margin: 0 5vw;*/
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    opacity: .7;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 3vw;
    /*position: fixed;*/
    /*bottom: -31vh;*/
    position: relative;
    bottom: 0;
}



@font-face {
    font-family: 'Rubik';
    src: url('./fonts/rubik/rubik-v8-latin-300.woff2');
    src: url('./fonts/rubik/rubik-v8-latin-300.woff2') format('woff2'),
    url('./fonts/rubik/rubik-v8-latin-300.woff') format('woff'),
    url('./fonts/rubik/rubik-v8-latin-300.eot') format('embedded-opentype'),
    url('./fonts/rubik/rubik-v8-latin-300.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rubik';
    src: url('./fonts/rubik/rubik-v8-latin-700.woff2');
    src: url('./fonts/rubik/rubik-v8-latin-700.woff2') format('woff2'),
    url('./fonts/rubik/rubik-v8-latin-700.woff') format('woff'),
    url('./fonts/rubik/rubik-v8-latin-700.eot') format('embedded-opentype'),
    url('./fonts/rubik/rubik-v8-latin-700.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}




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

    .paint{
        height: 50vh;
    }

    .pp{

    }

    #con{
        color: rgba(0,0,0,.7);
        font-size: 6vw;
    }

    #con:hover{
        transform: scale(1.2);
    }

}