@font-face {
    font-family: 'Ceoruse';
    src: url('/fonts/ceoruse.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

* {
    max-height: 100vh;
    max-width:100vw;

    box-sizing: border-box;
  }

html,body{
    background-color: #410787;
    margin:0;
    overflow: hidden;
    }
body {
    font-family: 'Lexend Exa', serif;
    font-weight: 400; /* Regular weight */
    color: white;

    min-height: 100vh;
    height: 100vh;
    margin: 0;

    background-image: url("/images/background-1x.png");
    background-position: top;

    background-size: cover;      
    background-repeat: no-repeat; 

    .container{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    
        .content{
            width: 100%;

            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            height: 60vh;
    
            #title {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 40px;
            
                .title-name {
                    font-family: 'Ceoruse', sans-serif;
                    font-weight: 500;
                    font-size: 4vw;
                }
                .title-year {
                    font-family: 'Ceoruse', sans-serif;
                    font-weight: 500;
                    font-size: 8vw;
                }
            }
            
            #avatar {
                flex: 0.8;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-image: url("/images/Group.png");
                background-position: center;
            
                background-size: contain;      
                background-repeat: no-repeat; 

                .avatar-img{
                    height: 60%;
                    aspect-ratio: 1 / 1; 
                    border-radius: 50%;
                    background-position: center;
                
                    background-size: cover;      
                    background-repeat: no-repeat; 
                }
            }
    
            #info {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
            
            
                .info-container{
            
                    background: url('/images/top-right.png') no-repeat calc(100% - 50px) top, url('/images/bottom-left.png') no-repeat left bottom;
                    background-size: 50% auto;
            
            
                    padding: 5% 0% 10% 10%; 
                    box-sizing: border-box;
            
                    width: 80%;
                    max-width: 100%;
            
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    gap: 1rem;
                    margin-left: 50px;
                    margin-left: 20px;
                
            
                    .info-name{        
                        font-family: 'Lexend Exa', serif;
                        font-size: 2vw;
                        font-weight: 400;
                    }
                    .info-position{        
                        font-family: 'Lexend Exa', serif;
                        font-size: 1.5vw;
                        font-weight: 300;
                        line-height: 1.5;
                    }
            
                }
            
            }
        }
        
        
    
    }
    &.horizontal{
        background-image: url("/images/background-1x-doc-2.png");
        background-position: top;

        .container{
            justify-content: center;
            align-items: flex-end;

            .content{
                height: 70%;
                flex-direction: column;
                #title {
                    flex-direction: row;
                    gap: unset;
                
                    .title-name {
                        font-family: 'Ceoruse', sans-serif;
                        font-weight: 500;
                        font-size: 8vw;
                    }
                }

                #avatar {
                    flex: 2;
                    /* background-image: url("/images/ava.png"); */
                    background-position: center;
                
                    background-size: contain;      
                    background-repeat: no-repeat;
                    height: 100%;
                    width: 100%;

                    .avatar-img{
                        height: 80%;
                        aspect-ratio: 1 / 1; 
                        border-radius: 50%;
                        background-position: center;
                    
                        background-size: cover;      
                        background-repeat: no-repeat; 
                    }
                }

                #info {
                    flex: 2;
                    
                    .info-container{
                        gap: 1rem;
                        background: url('/images/top-right.png') no-repeat calc(100% - 10%) top, url('/images/bottom-left.png') no-repeat calc(100% - 90%) bottom;
                        background-size: 30% auto;
                        padding: 3vmax 10% 5vmax 10%; 
                        align-items: center;
                        width: 100%;

                        .info-name{        
                            font-size: 5vw;
                            font-weight: 600;
                            text-align: center;
                        }
                        .info-position{        
                            font-size: 3vw;
                            text-align: center;
                        }
                    }
                }
            }
        }
    
    }

    &.no-top{
        background-image: url("/images/background-1x.png");
        background-position: bottom;

        .container{

            .content{
                height: 100%;
            }
        }
    
    }
}