*{
    cursor: none;
}
body{
    color: #fff;
    background-color:#161616;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.rightcollumn, .leftcollumn{
    background:#161616;
    width: 10%;
    height: 100vh;
    z-index: 999;
    position: absolute;
    top: 0;
}
.rightcollumn{
    right: 0;
}
.leftcollumn{
    left: 0;
}
.container{
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 100;
    background-color:#1b1b1b;
    /* transform: translate(-50%,-50%);
    left: 50%;
    top: 50%; */
}
.m-title{
    font-size: 250px;
    text-align: center;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 30%;
}
.pushoutL{
    margin-right: 500px;
}
.cursor{
    z-index: 500;
    position:fixed;
    background: rgb(255, 255, 255);
    width:50px;
    height: 50px;
    border-radius:50%;
    pointer-events: none;
    transform: translate(-50%,-50%);
    display:none;
}
.cursor:before{
    content:"";
    position:absolute;
    width:175px;
    height:175px;
    border-radius:50%;
    background:#fff;
    opacity:0.2;
    transform: translate(-50%,-50%);
    top:50%;
    left: 50%;
}
.arrow-cell{
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.arrow-down{
    width: 50px;
    height: 50px;
    margin-top: 600px;
    margin-left: auto;
    margin-right: auto;
    background: url(img/arrow.png);
    background-size: cover;
    background-position: center;
    animation: up 1s, arrow 1s 2s infinite;
    filter: grayscale(1);
}
.m-title ~ .cursor{
    opacity: .5;
}
.arrow-down:hover ~ .cursor{
    opacity: .5;
}
@keyframes up{
    0%{
        margin-top: 1000px;
        transform: rotate(180deg);
    }
}
@keyframes arrow{
    0%{
        transform: scale(1.2);
    }
}
a{
    text-decoration: none;
    color: #fff;
}
.main-project{
    font-size: 30px;
    padding-top: 50px;
    text-align: center;
}
.projects{
    display:flex;
    gap: 2rem;
    font-size: 30px;
    padding-top: 50px;
}
.x:hover{
    color:rgb(255, 50, 50);
    transition: .2s;
}
@media screen and (max-width: 800px) {
    .m-title{
        font-size: 125px;
    }
    .projects{
        font-size: 24px;
        gap: 1.5rem;
    }
    .cursor{
        z-index: 500;
        position:fixed;
        background: white;
        width:25px;
        height: 25px;
        border-radius:50%;
        pointer-events: none;
        transform: translate(-50%,-50%);
        display:none;
    }
    .cursor:before{
        content:"";
        position:absolute;
        width:85px;
        height:85px;
        border-radius:50%;
        background:#fff;
        opacity:0.2;
        transform: translate(-50%,-50%);
        top:50%;
        left: 50%;
    }
    .arrow-down{
        width: 35px;
        height: 35px;
        margin-top: 400px;
    }
}
@media screen and (max-width: 412px) {
    .m-title{
        font-size: 90px;
    }
    .projects{
        font-size: 18px;
        gap: 1rem;
    }
    .cursor{
        z-index: 500;
        position:fixed;
        background: white;
        width:18px;
        height:18px;
        border-radius:50%;
        pointer-events: none;
        transform: translate(-50%,-50%);
        display:none;
    }
    .cursor:before{
        content:"";
        position:absolute;
        width:61.2px;
        height:61.2px;
        border-radius:50%;
        background:#fff;
        opacity:0.2;
        transform: translate(-50%,-50%);
        top:50%;
        left: 50%;
    }
    .arrow-down{
        width: 30px;
        height: 30px;
        margin-top: 300px;
    }
}