* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* this makes sure padding doesn't increase box size */
}

body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: grey;
             margin: 0;
            padding: 0;
        }

        #pdf-container {
            display: flex;
            /*align-items: center;*/
            align-items: flex-start;
            justify-content: center;
            width: 100%;
            min-height: 90vh;
            position: relative;
            margin: 0.3% 0 0 0;
            padding: 0;
        }

        iframe {
            border: none;
            height: 90vh;
            width: 70%;
            margin: 0 auto;
            display: block;
            vertical-align: top;
        }
        
        #pdf-iframe {
            border-bottom: grey 10px solid;
        }

        #language-buttons {
            padding: 15% 0 0 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            position: absolute;
            left: 0;
            width: 7%;
        }

        button {
            padding: 10px 20px;
            cursor: pointer;
            width: 80%;
        }
        
        
        #slo {
            background: #FFEBE6;
        }
        #en {
            background: #E6FFF5;
        }
        #se {
            background: #FFF4E6;
        }
        #nl {
            background: #E6F7FF;
        }
        #pt {
            background: #F9E6FF;
        }
        
        .lang:hover {
            width: 100%;
            filter: saturate(500%); /* Default saturation */
            transition: filter 0.3s; /* Smooth transition for the filter effect */
            transition: width 0.3s; /* Smooth transition for the filter effect */
        }
        
        .active {
            filter: saturate(500%); /* Increased saturation for the active state */
            width: 100%;
        }
        
        
    /*         - Pastel Pink*/
    /*#E6FFF5 - Pastel Mint*/
    /* - Pastel Peach*/
    /* - Pastel Sky Blue*/
    /* - Pastel Lavender*/

        .comment-wrapper {
            /*border-top: 5px grey solid;*/
            padding: 10px 0 0 0;
            width: 70%;
            background: #18292f;
        }

        .commentbox {
            width: 70%;
            margin: 0 auto;
        }
        /*.logout p !important {*/
        /*    color: pink;*/
        /*}*/
        
        /*button.btn.primary-button !important {*/
        /*    color: yellow;*/
        /*}*/

        /* Responsive CSS for small screens */
        @media (max-width: 768px) { 
            #pdf-container {
                flex-direction: column;
            }
            iframe {
                width: 100%;
            }
            
            #language-buttons {
                padding: 0;
                position: static;
                flex-direction: row;
                gap: 3px;
                margin-bottom: 5px;
            }
            button {
                padding: 3px 3px;
            }
            commentbox {
                width: 100%;
            }
        }