/* Reset some basic elements */
body, h1, h2, h3, p, ol, ul, li, figure, figcaption, blockquote, dl, dd, button{
  font-family: "Gentium Plus", serif;
  color: black
}

[data-theme="dark"] body,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] p,
[data-theme="dark"] ol,
[data-theme="dark"] ul,
[data-theme="dark"] li,
[data-theme="dark"] figure,
[data-theme="dark"] figcaption,
[data-theme="dark"] blockquote,
[data-theme="dark"] dl,
[data-theme="dark"] dd,
[data-theme="dark"] button {
  color: white;
}

[data-theme="light"] body,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] p,
[data-theme="light"] ol,
[data-theme="light"] ul,
[data-theme="light"] li,
[data-theme="light"] figure,
[data-theme="light"] figcaption,
[data-theme="light"] blockquote,
[data-theme="light"] dl,
[data-theme="light"] dd,
[data-theme="light"] button {
  color: black;
}


body{
  overflow: hidden !important;
}

/* background image for the body  using "background.png" */
.background {
    margin: 0;
    background-image: url('../assets/background.jpg'), linear-gradient(rgba(49,74,89,0.65),rgba(49,74,89,0.95));
    background-blend-mode: overlay;
    background-position-y: top;
    background-position-x: center; /* Center the image */
    background-repeat: repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    background-attachment: fixed;
    height: 100vh;
    overflow: hidden;
}
[data-theme="dark"] {
  .background {
    background-image: url('../assets/background-dark.jpg'), linear-gradient(rgba(49,74,89,0.65),rgba(49,74,89,0.95));
  }
}

.all-contents {
    height: 100%;
    overflow-y: auto; /* Enables vertical scroll on the content wrapper */
}

.toggleTheme-container{
  display: flex;
  justify-content: right;
  position: fixed;
  top: 10px;
  right: 5px;
}

.logo-container{
  display: flex;
  justify-content: center;
}

.logo {
  display: block;
  max-width: 250px;
  width: 20%;
  aspect-ratio: 1 / 1;
  background-image: url('../assets/logo.png');
  background-size: contain; /* This will make sure the image fits well within the container */
  background-repeat: no-repeat;
  background-position: center; /* Centers the background image */
}

[data-theme="dark"] {
  .logo {
    background-image: url('../assets/logo-dark.png');
  }
}


.image-cropper {
    max-width: 400px;
    height: auto;
    position: relative;
    overflow: hidden;
}

.image-cropper img{
    display: block;
    margin: 0 auto;
    height: auto;
    width: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.site-name {
  font-family: "Gentium Plus", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
}

.gentium-plus-regular {
  font-family: "Gentium Plus", serif;
  font-weight: 400;
  font-style: normal;
}

.gentium-plus-bold {
  font-family: "Gentium Plus", serif;
  font-weight: 700;
  font-style: normal;
}

.gentium-plus-regular-italic {
  font-family: "Gentium Plus", serif;
  font-weight: 400;
  font-style: italic;
}

.gentium-plus-bold-italic {
  font-family: "Gentium Plus", serif;
  font-weight: 700;
  font-style: italic;
}


.site-name-highlight {
  background: #F2F1F0;
  padding: 20px 10px 10px 10px;
  border-radius: 5px;
  margin: 5px 5px;
  -webkit-box-decoration-break: clone;
  -moz-background-inline-policy: clone;
  box-decoration-break: clone;
}

[data-theme="dark"] {
  .site-name-highlight {
    background: #0d0e0f;
  }
}


@media (min-width: 2301px) {
    .sidebar-menu {
        transform: translateX(0);
    }
    .menu-toggle {
        display: none; /* Hide the toggle button on large screens */
    }
}

/* Existing styles */
.menu-toggle {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    cursor: pointer;
    font-size: 24px;
    background: none;
    border: none;
    color: #1f1f1f !important;
    font-family: "Gentium Plus", serif;
    background-color: var(--color-background-offset-2) !important;
}

.sidebar-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background-color:  #f2f1f0CC;
    overflow: hidden;
    transform: translateX(-250px);
    transition: transform 0.3s ease;
}

[data-theme="dark"] {
  .sidebar-menu {
    background-color: #0d0e0fCC;
  }
}

.sidebar-menu.active {
    transform: translateX(0);
}

.sidebar-menu ul {
    list-style-type: none;
    padding: 25px 0;
}

.sidebar-menu span {
    margin-left: 10px;
}

.sidebar-menu ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    font-size: 18px;
    text-decoration:none;
    color: #1f1f1f;
}

[data-theme="dark"] {
  .sidebar-menu ul li a {
    color: #f5d1a6;
  }
}

.movable-window {
    width: 400px;
    height: 600px;
    position: fixed;
    top: 50px;
    left: 50px;
    z-index: 1000;
    resize: both;
    overflow: auto;
    outline:2px solid var(--color-info) !important;
    outline-offset: -2px;
}

.turing-window {
    width: 100%;
    height: 100%;
    outline:2px solid var(--color-info) !important;
}

.drag-header {
    cursor: move;
    background-color: var(--color-info) !important;
}

.turing-icon{
  justify-content: right;
  position: fixed;
  top: 60px;
  right: 5px;
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes typingBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.turing-window-inner {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure the inner window takes full height */
}

.chat-output {
    flex-grow: 1; /* Allows chat output to expand */
    overflow-y: auto; /* Enables vertical scrolling when necessary */
    margin: 0; /* Removes default margins */
    width: 100%; /* Ensures it uses the full width of its parent */
    scroll-snap-align: end none;
}

.chat-input {
    position: absolute; /* Position absolutely within the .turing-window-inner */
    bottom: 10px; /* 10 pixels from the bottom */
    left: 0; /* Aligns to the left edge */
    right: 0; /* Aligns to the right edge */
    margin: 0 4px; /* Adds a small margin on the left and right */
}

.chat-bubble-area-user {
    display: flex;
    flex-direction: column;
    align-items: right;
    margin: 0 5% 15px 15%;
}

.chat-bubble-area-ai {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin: 0 15% 15px 5%;
}

.chat-bubble-user {
    background-color: var(--color-brand);
    color: black;
    border-radius: 16px;
    padding: 10px 14px;
    display: inline-block;
    max-width: 100%;
    text-align: left;
    word-wrap: break-word;
    border-bottom-right-radius: 4px;
    animation: fadeIn 0.5s ease-in-out;
}

[data-theme="dark"]{
  .chat-bubble-user {
    color: white;
  }
}

.chat-bubble-ai {
    background-color: var(--color-info);
    color: black;
    border-radius: 16px;
    padding: 10px 14px;
    display: inline-block;
    max-width: 100%;
    text-align: left;
    word-wrap: break-word;
    border-bottom-left-radius: 4px;
    animation: fadeIn 0.5s ease-in-out;
}

[data-theme="dark"]{
  .chat-bubble-ai {
    color: white;
  }
}

.chat-bubble-timestamp {
    display: inline-block;
    margin: 5px 0;
    font-size: 10px;
    color: #999;
}


.typing-indicator {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.typing-indicator span {
    height: 10px;
    width: 10px;
    background-color: #ccc;
    border-radius: 50%;
    display: inline-block;
    margin: 0 3px;
    animation: bounce 1.4s infinite both;
    animation: typingBlink 1.4s infinite;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}

.portfolio-item-image {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 10px;
}

.button-grid {
    display: flex;
    justify-content: space-around; /* This will space out the buttons evenly */
    flex-wrap: wrap; /* Allows buttons to wrap onto the next line on small screens */
}

.button-grid-width {
    flex: 1 1 0px; /* Grow to fill the container, don’t shrink, and start out without any additional width */
    margin: 5px !important; /* Optional: adds some space around each button */
    text-align: center; /* Ensures text is centered in each button */
    min-width: 100px; /* Minimum width for each button, adjust as needed */
    padding: 10px 20px; /* Adjust padding to control the button size */
}

.portfolio-grid {
    padding-top: 10px;
    padding-bottom: 100px;
    display: flex;
    flex-wrap: wrap;
    gap: calc(40px);
}

.portfolio-image-container {
    width: calc(33.333% - 40px);
    box-sizing: border-box;
    float: left;
    position: relative;
}

/*.portfolio-image-container:nth-child(3n+3) {
    margin-top: calc(20%);
}

.portfolio-image-container:nth-child(3n+2) {
    margin-top: calc(10%);
    margin-bottom: calc(10%);
}

.portfolio-image-container:nth-child(3n+1) {
    margin-bottom: calc(20%);
}*/


.portfolio-image-wrap {
    width: 100%;
    padding-bottom: 100%; /* This maintains a 1:1 aspect ratio */
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    filter: blur(0);
    background-color: white;
}
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.7); /* Dark background with opacity */
    color: white;
    visibility: hidden;
    opacity: 0;
    display: grid;
    align-items: center;
}

.portfolio-overlay h2 {
    color: white;
}

.portfolio-image-container:hover .portfolio-overlay {
    visibility: visible;
    opacity: 1; /* Show the overlay with full opacity on hover */
}

.portfolio-image-container-hover .portfolio-overlay {
    visibility: visible;
    opacity: 1; /* Show the overlay with full opacity on hover */
}

.portfolio-image-container:hover {
    animation: grow 0.3s ease-in-out forwards; /* Apply the grow keyframe animation */
}


.portfolio-image-container:not(:hover) {
    animation: shrink 0.3s ease-in-out forwards; /* Apply the shrink keyframe animation */
}

@keyframes grow {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05);
    }
}

@keyframes shrink {
    from {
        transform: scale(1.05);
    }
    to {
        transform: scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .portfolio-image-container {
        width: calc(50% - 40px);
    }
}

@media (max-width: 480px) {
    .portfolio-image-container {
        width: 90%;
        margin-left: 5%;
    }
}

@view-transition {
  navigation: auto;
}