@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*{
    box-sizing: border-box;
}

body{
    background-color: #0E1111;
    margin:0;
    padding:0;
}

.cv-container{
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    color: #CFCFCF;
}

.name_title{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}
.name{
    font-size: 4rem;
    margin: 0;
    margin-top: 1.5rem;
    padding: 0;
}
.title{
    margin: 0;
    margin-top: 0.5rem;
    color: #858585;
}
.sidebar-socials{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: #121515;
    position: fixed;
    top: 42vh;
    width: clamp(50px, 4vw, 300px);
    height: clamp(50px, 16vh, 300px);
    right: clamp(-0.5rem, -1vw, -150px);
    z-index: 1;
    padding: 1.5rem 0 1.5rem 0;
    border-radius: clamp(0.5rem, 1rem, 2rem);;
}
.sidebar-s-item{
    color: #858585;
    padding-right: clamp(-0.5rem, -1vw, -150px);
}
.content-grid{
    display: grid;
    width: 90vw;
    grid-auto-columns: minmax(30px, auto);;
    grid-auto-rows: minmax(30px, auto);
    gap: 1rem;
}
.cv-content{
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
    background-color: #121515;
    border-radius: 1rem;
}
.cv-content a {
    color: #CCE6E6;
}
.cv-content h3{
    text-align: center;
    margin: 1rem;
}
.cv-content h4{
    padding-left: 2rem;
    margin: 1rem;
    margin-top: 0;
}
.cv-content p{
    justify-content: center;
    padding-left: 2rem;
    font-size: 1.25rem;
    margin: 1rem;
    margin-top: 0;
}

.cv-content.experience{
    grid-column: 1/7;
    grid-row: 1/2;
}
.cv-content.volunteer{
    grid-column: 7/11;
    grid-row: 1/3;
}
.cv-content.education{
    grid-column: 1/7;
    grid-row: 2/9;
}
.cv-content.languages{
    grid-column: 7/11;
    grid-row: 9/10;
}
.cv-content.projects{
    grid-column: 1/7;
    grid-row: 9/11;
}

.fade-in {
    opacity: 0;
    transform: translateY(20vh);
    visibility: hidden;
    transition: opacity 0.6s ease-out, transform 1.2s ease-out;
    will-change: opacity, visibility;
}
.fade-in.is-visible {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-delay: 0.3s;
}
#background{
    position: fixed;
    filter: blur(1px);
    z-index: -1;
}