*{margin: 0;box-sizing: border-box;}
a{color: white; text-decoration: none;}
a:hover{opacity: 33% ; transition: .45s}

body{
    font-family: "Roboto",sans-serif;
    padding: 1rem;
    background-color: black;
    color: white;
}
body::-webkit-scrollbar{display: none;}

h1{font-size: 0.875rem; font-weight: 600;}
h2{font-size: 0.875rem; font-weight: 400;}
p, a, .btn{font-size: 0.875rem;}
.bold {font-weight: 600;}

.header{display: flex; justify-content: space-between;}
.name{margin-top: 0.125rem;}
.ubi{display: none;}
.cta{display: flex; gap: 0.125rem; flex-direction: column; text-align: right;}

/* filters */
.filters{display:flex; gap: 1rem; margin-top: 2rem;overflow: scroll; margin-right: -1rem ; margin-left: -1rem ; padding-right: 1rem;padding-left: 1rem;}
.filters::-webkit-scrollbar{display: none;}
.filterDiv {display: none;}
.show {display: block;}
.btn {
    cursor: pointed;
    background: none; 
    color: white; 
    padding: 0; 
    border: none;
    display: inline-flex;
    white-space: nowrap;
    transition: .45s
    
}
.btn.active {opacity: 33.33%;}


/* projects */
img, video{width: 100%; height: auto;}

.projects-container {
    margin-top: 1rem;
    column-count: 2;
    column-gap: 0.5rem;
}

.project {
    grid-template-rows: 1fr auto;
    break-inside: avoid;
    margin-bottom: 0.5rem;
}

/* about */
.about{margin-top: 2rem; width: 100%;text-wrap: pretty;}
.contacts {text-transform: lowercase; display: block; margin-top: .25rem;}

/* copyright */
.copyright{position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%)}

/* responsive */
@media (min-width: 576px) {
    h1{font-size: 1rem;}
    h2{font-size: 1rem;}
    p, a, .btn{font-size: 1rem;}
}

@media (min-width: 768px) {
    .info-b{margin-top:0.125rem; display: flex; gap: .25rem;}
    .name{margin-top: 0;}
    .name::after{content: '.';}
    .ubi{display: block;} 
    .cta{gap: 1rem; flex-direction: row;}

    .projects-container {column-count: 2;}

    .about{width: 33.33%;}
}


@media (min-width: 992px) { 
    .projects-container {column-count: 3;}
}

@media (min-width: 1200px) { 
    .projects-container {column-count: 5;}
}

@media (min-width: 1400px) {}