@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

html {
    background-color:#646464;
    margin:0;
    font-family: Rubik;
}

a {
    color: #FFF;
    font-family: Rubik;

    
}

.topheader {
    width: 440px;
    height: 440px;
    background: #646464;
}

.catlogo {
    background: url(cat_logo.png) #646464 50% / cover no-repeat;
    width: 265px;
    height: 265px;
    aspect-ratio: 1/1;
    margin-left: 85px;
}

.directional{
    width: 440px;
    height: 83px; 
    background: #434343;
    margin-top: -150px;
    margin-bottom: 60px;
}

.worktext {
    width: 112px;
    height: 28px;
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    float: left;
    margin-left: 100px;
    margin-top: 25px;
}

.about{ 
    width: 112px;
    height: 28px;
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    float: left;
    margin-top: 25px;
}
.menu {
    width: 440px;
    height: 807px;
    background: #646464;
    position:relative;
    right: 0;
    display: none;
}

.works {
    width: 320px;
    height: 57px;
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-left: 60px;
    margin-top: 17px;
}



.close {
    width: 79px;
    height: 96px;
    aspect-ratio: 79/96;
    margin-top: -150px;
    margin-left: 360px;
    }

.graybar {
    width: 440px;
    height: 83px;
    background: #434343;
    margin-top: 154px;
}

.Paintings {
    width: 226px;
    height: 42px;
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 41px;
    margin-top: 56px;
    margin-left: 107px;
}

.Photography {
    width: 226px;
    height: 42px;
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
     margin-bottom: 41px;
     margin-left: 107px;
}

.Digital {
    width: 226px;
    height: 42px;
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
     margin-bottom: 41px;
     margin-left: 107px;
}

.Drawing{
    width: 226px;
    height: 42px;
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
     margin-bottom: 41px;
     margin-left: 107px;
}


.bottombox {
    width: 440px;
    height: 289px;
    background: #C2C0C2;
}

.recents {
    display: flex;
    width: 351px;
    height: 93px;
    flex-direction: column;
    justify-content: center;
    color: #000;
    text-align: center;
    font-family: Rubik;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-left: 45px;
}