:root{
    --scroll:1;
    --info-height:250px;

    scroll-behavior: smooth;
}

*{
    margin:0;
    padding:0;
    color:white;
}

*[sideways]{
    display: flex;
    align-items: center;
    margin:0;
}
*[clear]{
    clear:both;
}

.link-style{    
    text-decoration: underline;
}


::-webkit-scrollbar{
    background-color: #FFFFFF05;
}
::-webkit-scrollbar-thumb{
    background-color: #FFFFFF2B;
    border-radius: 2px;
}

body{ 
    background-color: #111;
    font-family: 'Roboto', sans-serif;
    overflow: overlay;
    overflow-x: hidden; 
    max-width: 100%;
}

#container{
    width:100%;
    height:fit-content;
    height: -moz-fit-content;
    min-height: 1000px;
    overflow-x: visible; 
}

/* BACKGROUND */
#background{
    display:contents;
    position: relative;


    width:100%;
    height:100%;
}
#background > * {position: absolute; z-index: -1; transition-duration: 0s;}

/* Title */
@keyframes bright{
    from { filter:brightness(1.0);}
    to { filter:brightness(1.7);}
}

@keyframes counter{
    from { filter:brightness(1.0);}
    to { filter:brightness(0.7);}
}


#splash{
    animation: bright 5s alternate infinite;

    width:100vw;
    height:100vh;

    display: flex;

    background-image: url("./assets/background/banner.webp");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

header{    
    animation: counter 5s alternate infinite;

    font-family: 'Raleway', sans-serif;
    font-size:100px;

    height: fit-content;
    height: -moz-fit-content;

    margin:auto;
    text-align: center;
}

h1{    
    font-family: 'Raleway', sans-serif;
    text-align: center;
    font-size: xx-large;
}


#email{
    font-size: 30px;
}


#links{
    margin-top: 20px;

    display:flex;
    justify-content: center;
    align-content: center;
}
.invert{
    filter:invert(1);
}
#languages{
    display:flex;
    justify-content: space-evenly;
    background-color: #FFFFFF0F;

    padding:10px;
    margin:auto;

    width: fit-content;
    width: -moz-fit-content;
    max-width: 900px;

    border-radius: 5px;
}
#languages > *{
    max-width:50px;
    max-height:50px; 
    margin:10px;   
    filter: contrast(1.3);
}

/* Contents */
#content{
    width:60%;
    max-width:900px;
    min-height:800px;

    margin:auto;
    margin-top:20px;
    padding:10px;

    background-color: #FFFFFF0F;

    border-radius: 10px;
}


/* Project sections */
.project{
    display:none;

    width:90%;

    margin:auto;
    margin-bottom:50px;
    padding-top:7px;

    background-color: #FFFFFF0F;

    border-radius: 10px;

    min-height: 150px;
}

.project > *{
    margin:7px;
    margin-top:0px;   
    overflow-y: hidden;
}

.project img{
    float:left;

    max-width: 100px;
    max-height: 100px;

    margin-right: 10px;
    margin-bottom: 10px;
}

.project .more-info{
    transition-duration: 0.5s;

    clear:both;
    text-align: center;

    margin:0;

    width:100%;
    height:40px;

    background-color: #FFFFFF0F;
    
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.more-info:hover{
    background-color: #FFFFFF25;
    cursor: pointer;
}

.more-info span {   
    overflow: hidden; 
    font-size: 40px;
    transition-duration: 1s;
}

@keyframes expand {
    from {
        padding-top:0;
        padding-bottom:0;
        height:0px;
        overflow: hidden;
    }    
    99%{        
        overflow: hidden;
    }
    to {
        display:block;height:var(--info-height);   
        overflow: auto;     
    }
}
@keyframes contract {
    from {
        display:block; height:var(--info-height);
        overflow: auto;
    }
    1%{        
        overflow: hidden;
    }
    to {
        padding-top:0;
        padding-bottom:0;
        height:0px;
        overflow: hidden;
    }
}

.info{    
    animation-name: expand;
    animation-duration: 1s;
    animation-fill-mode: forwards;

    clear:both;
    text-align: justify;

    width:calc(100% - 20px);

    margin:0;
    padding:10px;

    background-color: #FFFFFF0C;  
}

.button{
    transition-duration: 0.2s;

    background-color: #FFFFFF20;
    padding:4px;
    margin-right:5px;
    border-radius: 5px;
    
    width:fit-content;
    width: -moz-fit-content;
}
.button:hover{
    background-color: #FFFFFF2B;
}