/* swipe set up */

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

nav {
    display: flex;
    justify-content: space-around;
    background-color: #444444;
    padding: 10px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

nav a { font-family: byington; font-size: 24px;
    color: white;
    text-decoration: underline;
    padding: 10px;
}

nav a:hover {
    background-color: #666666;
}

.content {
    margin-top: 60px; /* To ensure content is not hidden behind the fixed navbar */
    height: calc(100% - 60px);
    overflow-y: auto; /* Allows scrolling within the content area */
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

.slide-in-left {
    animation: slide-in-left 0.3s forwards;
}

.slide-in-right {
    animation: slide-in-right 0.3s forwards;
}

.slide-out-left {
    animation: slide-out-left 0.3s forwards;
}

.slide-out-right {
    animation: slide-out-right 0.3s forwards;
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slide-out-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes slide-out-right {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}










/* Text set up */

P1 	{font-family: Bookman Oldstyle; font-size: 24px; color: #FFFFFF;}

P2 	{font-family: Bookman Oldstyle; font-size: 24px; color: #000000;}

P3 	{font-family: Bookman Oldstyle; font-size: 20px; color: #666666;}

P4 	{font-family: Bookman Oldstyle; font-size: 18px; color: #444444;}

P5  {font-family: Bookman Oldstyle; font-size: 24px; color: #000000;  }


h1  {font-family: Times New Roman; font-size: 44px; color:#FFFFFF;  text-decoration: underline;}

h2  {font-family: Times New Roman; font-size: 36px; color:#FFFFFF; }


t1  {font-family: Bookman Oldstyle; font-size: 32px; color:#000000; font-weight: bold; text-decoration: underline; }

t2	{font-family: Bookman Oldstyle; font-size: 28px; color: #CC0000; font-weight: bold; font-style: italic;}

t3	{font-family: Bookman Oldstyle; font-size: 28px; color: #00CC00; font-weight: bold; font-style: italic;}

t4	{font-family: Bookman Oldstyle; font-size: 28px; color: #FFFFFF; font-weight: bold; text-decoration: underline; }