/* Font Importing */
@font-face {
    font-family: 'Outfit';
    src: url('/fonts/Outfit-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit';
    src: url('/fonts/Outfit-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit';
    src: url('/fonts/Outfit-Extrabold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit';
    src: url('/fonts/Outfit-Extralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit';
    src: url('/fonts/Outfit-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit';
    src: url('/fonts/Outfit-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit';
    src: url('/fonts/Outfit-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit';
    src: url('/fonts/Outfit-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit';
    src: url('/fonts/Outfit-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

/* Font Importing */

body {
    font-family: 'Outfit', fallback, sans-serif;
    margin: 0;
}

body a {
    color: #526b80;
    text-decoration: none;
    transition: 0.75s;
    font-weight: 600;
}

body a:hover {
    display: inline-block;
    transform: scale(1.05);
    transition: 0.2s cubic-bezier(.47, .22, .13, 1);
}

p {
    font-size: 1.15rem;
    font-weight: 300;
}

.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    margin-top: 2rem;
    /* This gives it some space around the edges. Adjust as needed. */
}

.main h1 {
    margin-bottom: 15px;
    /* This gives some space between the header and the paragraph. Adjust as needed. */
}

.main p {
    width: 40rem;
    text-align: left;
}

/* ----------------- Navbar */
.navbar {
    font-size: 1.15rem;
    display: flex;
    justify-content: center;
    overflow: visible;
    position: relative;
    margin-top: 6rem;
    /* This is required to position the arrow correctly. */
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    overflow: visible;
}

.navbar li {
    margin: 0 10px;
}

.navbar img {
    width: 1.6rem;
}

.navbar a {
    display: block;
    text-align: center;
    padding: 16px 18px;
    text-decoration: none;
    color: black;
    transition: 0.75s;
}

.navbar a:hover {
    color: black;
    transform: scale(1.1);
    transition: 0.2s cubic-bezier(.47, .22, .13, 1);
}

.navbar li.active a {
    color: black !important;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.dropdown-arrow {
    opacity: 0;
    visibility: hidden;
    /* Add a smooth transition for when it appears */
    position: absolute;
    bottom: 100%;
    /* left value will be set by JavaScript */
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid black;
    transition: left 0.35s cubic-bezier(0.44, 0, 0.02, 1), opacity 0.6s ease;
    animation: scaleIn 1s cubic-bezier(.47, .22, .13, 1);
}

.journal-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    padding: 20px;
    margin-top: 2rem;
}

.portfolio-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 2rem;
    grid-auto-flow: row;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.video {
    position: relative;
    padding: 1.5rem;
}

.video .video-description {
    text-align: center;
}

.journal-entry {
    width: 40rem;

    padding: 1.5rem 1.5rem 2rem 1.5rem;
    margin-bottom: 20px;

    background-color: white;
    border-bottom: 2px solid black;

    text-align: justify;

}

.journal-entry p {
    font-size: 1.15rem;
    color: #333;
}