*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Pixelify Sans',sans-serif;
    background:#000;
    overflow-x:hidden;
    cursor:url("ring.png") 16 16, auto;
}

a,
button{
    cursor:url("ring.png") 16 16, pointer;
}

.paper-left,
.paper-right{
    position:fixed;
    top:0;
    width:22vw;
    height:100vh;
    background:url("paper_bg.png") center/cover no-repeat;
    z-index:-2;
}

.paper-left{
    left:0;
}

.paper-right{
    right:0;
}

.site{
    max-width:1200px;
    margin:auto;
    min-height:100vh;
}

.green-bg{
    min-height:100vh;
    padding:25px;
    background:url("bubbles_bg.png") center/cover no-repeat;
}

.top{
    display:flex;
    gap:30px;
    align-items:flex-start;
}

.paint{
    width:520px;
    display:block;
}

.paint-mobile{
    display:none;
}

.mobile-tools-row{
    display:none;
}

.mobile-socials{
    display:none;
}

.paint-column{
    position:relative;
}

.profile{
    width:430px;
    background:#06009c;
    color:white;
    padding:25px;
}

.profile h1{
    font-size:64px;
}

.subtitle{
    font-size:28px;
    margin-bottom:20px;
}

.subtitle span{
    float:right;
}

.description{
    background:#d8d8d8;
    color:black;
    padding:15px;
    margin-bottom:20px;
    font-size:14px;
    line-height:1.4;
}

.profile ul{
    list-style:none;
    line-height:1.8;
    font-size:28px;
}

.small-links{
    display:flex;
    gap:20px;
    margin-top:20px;
}

.small-links a{
    width:180px;
    height:110px;
    background:#d8ff00;
    color:black;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:10px;
    font-size:24px;
}

/* КНОПКИ */

.socials{
    display:grid;
    grid-template-columns:repeat(2,120px);
    gap:15px;

    position:absolute;

    top:650px;
    left:150px;
}

.social{
    width:120px;
    height:120px;
    background:#06009c;
    border-radius:35px;
    color:white;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:72px;
    transition:.2s;
}

.social:hover{
    transform:scale(1.05);
}

/* КРАФТ */

.crafting{
    width:340px;
    background:#06009c;
    padding:20px;

    margin-top:20px;
}

.right-column{
    position:relative;
}

.log-button{
    position:absolute;

    top:40px;
    right:-170px;

    color:#06009c;

    text-decoration:none;

    font-size:42px;

    font-family:monospace;

    font-weight:bold;
}


.log-terminal{
    max-width:900px;

    margin:50px auto;

    background:#06009c;

    color:white;

    padding:30px;

    font-family:monospace;

    min-height:600px;
}

.log-terminal a{
    display:block;

    color:#d8ff00;

    text-decoration:none;

    margin:10px 0;
}

.log-terminal a:hover{
    color:white;

}

@media(max-width:900px){

.paint{
    display:none;
}

.paint-mobile{
    display:block;
    width:100%;
}

.mobile-tools-row{
    display:flex;
    gap:15px;
    align-items:flex-start;
    margin-top:15px;
}

.mobile-tools{
    width:120px;
    display:block;
}

.mobile-socials{
    display:grid;
    grid-template-columns:repeat(2,120px);
    gap:15px;
}

.mobile-socials{
    display:grid;
    grid-template-columns:repeat(2,120px);
    gap:15px;

    justify-content:center;
}

.socials{
    display:none;
}

.top{
    display:block;
}

.paint-column{
    position:static;
}

.profile{
    width:100%;
    margin-top:20px;
}

.crafting{
    width:100%;
    margin-top:20px;
}

.small-links{
    flex-direction:column;
}

.small-links a{
    width:100%;
}

.mobile-log{
    width:120px;
    height:120px;
    font-size:36px;
}
    
}