:root{
    --bg:#181818;
    --panel:#1d1d1de6;
    --border:#444;
    --text:#ececec;
}

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

body{
    background:#181818;
    color:var(--text);
    font-family:Inter,sans-serif;
    overflow-x:hidden;
}

/* LEFT IMAGE */

.side{
    position:fixed;
    left:0;
    top:0;
    width:38vw;
    height:100vh;

    background:url("https://f2.toyhou.se/file/f2-toyhou-se/images/120259909_qXxrIe2R0GzHJVu.jpg")
    left center/cover no-repeat;

    z-index:-2;
}

.fade{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100vh;

    background:
    linear-gradient(
        90deg,
        rgba(24,24,24,0) 0%,
        rgba(24,24,24,.25) 28%,
        rgba(24,24,24,.82) 48%,
        #181818 70%
    );

    z-index:-1;
}

/* PAGE */

.page{
    width:1120px;
    margin:55px auto;
}

/* BANNER */

.banner{
    height:185px;

    background:url("https://i.imgur.com/odCBkmZ.jpeg")
    center/cover;

    border:1px solid #333;
}

/* MAIN */

.layout{

    margin-top:18px;

    display:grid;

    grid-template-columns:

    220px
    620px
    150px;

    gap:18px;
}

/* LEFT */

.left{
    padding-top:10px;
}

.avatar{

    width:170px;
    height:170px;

    border-radius:50%;

    display:block;

    margin:-90px auto 20px;

    border:5px solid #181818;
}

.left h1{

    font-size:58px;

    font-weight:300;

    margin-bottom:10px;
}

.left p{

    color:#d2d2d2;

    font-size:18px;
}

/* PANEL */

.panel{

    background:var(--panel);

    border:1px solid var(--border);

    backdrop-filter:blur(8px);

    padding:24px;

    min-height:500px;
}

.panel h2{

    letter-spacing:3px;

    font-size:18px;

    margin-bottom:18px;

    padding-bottom:12px;

    border-bottom:1px solid #444;
}

.about{

    line-height:1.9;

    margin-bottom:35px;

    font-size:18px;
}

.panel ul{

    margin-left:20px;
}

.panel li{

    margin:15px 0;

    line-height:1.8;

    font-size:18px;
}

/* RIGHT */

.gallery img{

    width:100%;

    border-radius:14px;

    border:1px solid #444;

    display:block;

    margin-bottom:18px;

    filter:grayscale(100%);

    transition:.3s;
}

.gallery img:hover{

    filter:none;

    transform:scale(1.03);
}