@media screen{
    :root {
      --primary-color: #ad1010;
      --primary-color-light: #f3d4d4;
      --secondary-color: #537ba8;
      --secondary-color-light: #c2d2e2;
      --tertiary-color: #f1d592;
      --font-size-base: 16px;
      --font-family: 'Lexend', sans-serif;
      --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      --box-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.5);
      --text-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    }

    html {
        height: 100%;
        width: 100%;
    }

    body {
        height: 100%;
        /*width already 100%*/
        box-sizing: border-box;
    }

    .main-content {
        width: 100%;
        height: fit-content;
        box-sizing: border-box;
	}

    .main-content-element {
       width: 100%;
       height: auto;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       justify-content: space-between;
    }

    .row-element {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 104px;
    }

    .link {
		color: var(--secondary-color);
	}

    .top-nav-bar {
        position: fixed;
        top: 0;
        left: 0;
        box-sizing: border-box;
        padding: 8px;
        background-color: white;
        width: 100%;
		display: flex;
        align-items: center;
		justify-content: space-between;
	}
	
	.left-nav-buttons {
		display: flex;
        align-items: center;
		justify-content: space-between;
        padding-left: 4px;
	}

	.left-nav-button {
		font-family: var(--font-family);
		font-size: 14pt;
        color: var(--secondary-color);
        background-color: white;
		padding: 4px 12px 4px 12px;
		border: none;
		margin: 4px;
        font-weight: 400;
		text-decoration: none;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 8px;
        border-top-left-radius: 20px;
        border-top-right-radius: 8px;
        opacity: .5;
	}

	.left-nav-button:hover {
		opacity: 1;
		transition-duration: 0.8s;
	}

    .left-nav-button:active {
        transform: scale(1.1); /* Enlarge by 100% on click */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
    }

    .right-nav-buttons {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 4px;
    }

    .bottom-nav-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        padding: 8px;
        background-color: transparent;
        width: 100%;
		display: flex;
        align-items: center;
		justify-content: center;
	}

    .bottom-nav-button {
        color: transparent;
        border: none;
        font-family: var(--font-family);
        font-size: 14pt;
        font-weight: 500;
        background-clip: text;
        background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
        opacity: .8;
        text-shadow: var(--text-shadow);
    }

    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-7px);
        }
    }

    .bottom-nav-button:hover {
        animation: bounce 0.7s infinite;
        opacity: 1;
    }

    .bottom-nav-button:active {
        transform: scale(1.1); /* Enlarge by 100% on click */
        text-shadow:  0 4px 12px rgba(0, 0, 0, 0.5);
    }

    p {
        font-family: var(--font-family);
		margin-top: 8px;
		margin-bottom: 8px;
        font-weight:200;
        line-height: 2;
	}

    h1 {
        font-family: var(--font-family);
		margin-top: 8px;
		margin-bottom: 8px;
        margin-left: 0px; 
        margin-right: 0px;
        font-weight: 600;
        font-size: 44pt;
        color: var(--primary-color);
        text-shadow: var(--text-shadow);
	}

    h2 {
        font-family: var(--font-family);
        color: var(--secondary-color);
        font-size: 24pt;
        font-weight: 600;
        text-shadow: var(--text-shadow);
	}

    h3 {
        font-family: var(--font-family);
        font-weight: 500;
        text-shadow: var(--text-shadow);
	}

	h4 {
        font-family: var(--font-family);
		margin-top: 16px;
		margin-bottom: 16px;
	}

    .icon-button {
        color: transparent;
        border: none;
        font-size: 40px;
        background-clip: text;
        background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
        opacity: .8;
        text-shadow: var(--text-shadow);
    }

    .icon-button:hover {
        transition-duration: 1s;
        opacity: 1;
    }

    .icon-button:active {
        transform: scale(1.1); /* Enlarge by 100% on click */
        text-shadow:  0 4px 12px rgba(0, 0, 0, 0.5);
    }
}