//set maximum width
//1396px * 644px
const MAX_CONTAINER_WIDTH = 1396.00;
const MAX_CONTAINER_HEIGHT = 644.00;
const CONTAINER_HEIGHT_RATIO = MAX_CONTAINER_HEIGHT / MAX_CONTAINER_WIDTH;

const CONTAINER_containerTitle_SIZE = 30;
const CONTAINER_FIRST_LINE_SIZE = 38;
const CONTAINER_SECOND_LINE_SIZE = 60;

const newContainer = document.querySelector('.resize-container');

if(newContainer){
    let initialWidth = newContainer.offsetWidth;

    const containerTitle = document.querySelector('.resize-container > h2');
    const containerFirstLine = document.querySelector('.resize-container > p:first-of-type');
    const containerSecondLine = document.querySelector('.resize-container > p:nth-of-type(2)');


    //default sizes
    newContainer.style.height = initialWidth * CONTAINER_HEIGHT_RATIO + 'px';
    containerTitle.style.fontSize = initialWidth * (CONTAINER_containerTitle_SIZE / MAX_CONTAINER_WIDTH) + 'px';
    containerFirstLine.style.fontSize = initialWidth * (CONTAINER_FIRST_LINE_SIZE / MAX_CONTAINER_WIDTH) + 'px';
    containerSecondLine.style.fontSize = initialWidth * (CONTAINER_SECOND_LINE_SIZE / MAX_CONTAINER_WIDTH) + 'px';

    window.addEventListener('resize', () => {
        let currentWidth = newContainer.offsetWidth;
        newContainer.style.height = currentWidth * CONTAINER_HEIGHT_RATIO + 'px';
        containerTitle.style.fontSize = currentWidth * (CONTAINER_containerTitle_SIZE / MAX_CONTAINER_WIDTH) + 'px';
        containerFirstLine.style.fontSize = currentWidth * (CONTAINER_FIRST_LINE_SIZE / MAX_CONTAINER_WIDTH) + 'px';
        containerSecondLine.style.fontSize = currentWidth * (CONTAINER_SECOND_LINE_SIZE / MAX_CONTAINER_WIDTH) + 'px';
    })
}