/*body {*/
/*    margin: 60px auto;*/
/*    width: 70%;*/
/*    background-color: #50E3C2;*/
/*    background-image:*/
/*        radial-gradient(at 47% 33%, hsl(162.00, 77%, 40%) 0, transparent 59%),*/
/*        radial-gradient(at 82% 65%, hsl(198.00, 100%, 50%) 0, transparent 55%);*/
/*}*/

:root {
    --primary-color: #DCD7D0;
    --secondary-color: #F2C0BA;
    --background-color: #425A71;
    --navbar-color: #5B7B9A;
    --links-color: #F8624F;
}


/* Main structure */
body {
    margin: 60px auto;
    width: 70%;
    background-color: var(--background-color);
    background-image: linear-gradient(
      90deg,
      hsl(209deg 26% 35%) 1%,
      hsl(209deg 26% 39%) 63%,
      hsl(209deg 26% 44%) 80%,
      hsl(210deg 26% 48%) 90%,
      hsl(260deg 18% 62%) 95%,
      hsl(332deg 31% 72%) 98%,
      hsl(6deg 68% 84%) 100%
    );
}

a {
    text-decoration: none;
    color: var(--links-color);
}
a:hover {
    text-decoration: underline;
}
h1 {
    font-size: 2em;
    color: var(--secondary-color);
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
}
p {
    font-size: 1.5em;
    color: var(--primary-color);
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
}

p.center {
    text-align: center;
}


/* Navigation bar */
.navbar {
  width: 100%;
  background-color: var(--navbar-color);
  background-image: linear-gradient(
    90deg,
    hsl(209deg 26% 35%) 1%,
    hsl(209deg 26% 39%) 63%,
    hsl(209deg 26% 44%) 80%,
    hsl(210deg 26% 48%) 90%,
    hsl(260deg 18% 62%) 95%,
    hsl(332deg 31% 72%) 98%,
    hsl(6deg 68% 84%) 100%
  );
  overflow: auto;
  display: flex;
  align-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 7px;
  border-bottom: solid;
  border-width: 20%;
  border-color: var(--primary-color);
}

}

.linknavbar a {
  text-align: center;
  color: white;
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
}

.linknavbar a:hover {
  background-color: #000;
}

.active {
  background-color: #04AA6D;
}


/* Footer bar */
.footbar {
  width: 100%;
  background-color: rgba(255, 122, 89, 0.0);
  overflow: auto;
  display: flex;
  align-items: center;
  z-index: 1000;
  padding: 5px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 20px;
  border-top: solid;
  border-width: 20%;
  border-color: var(--primary-color);
  font-size: 10px;
  font-style: italic;
  font-weight: 250;
}


/* Raccoon image */
.raccoon-image {
    width: 900px; /* Set the width of the image */
    height: auto; /* Maintain aspect ratio */
    z-index: -1; /* Ensure the image is behind other content */
}


/* PhD top of the page */
.phd-title {
    font-size: 26px;
    font-weight: 700;
    font-style: italic;
    color: var(--secondary-color);
}

.phd-supervisors {
    font-size: 25px;
    font-weight: 700;
    color: var(--primary-color);
}

.phd-randomtxt {
    font-size: 22px;
    font-weight: 300;
    color: var(--primary-color);
}

.phd-links {
    font-size: 25px;
    font-weight: 400;
    color: var(--links-color);
}


/* phd box, wrapper for a category of the phd page */
.phd-box{
    
    .phd-box-title {
        text-transform: uppercase;
        font-size: 22px;
        font-weight: 700;
        margin-top: 15px;
        margin-bottom: 0px;
        color: var(--secondary-color);
    }
    .phd-box-title p {
        color: var(--secondary-color);
    }
    .phd-box-subtitle {
        text-transform: uppercase;
        font-size: 19px;
        font-weight: 700;
        margin-top: 5px;
        margin-bottom: 0px;
    }
    .phd-box-place {
        font-size: 19px;
        font-weight: 700;
        margin-top: 10px;
        margin-bottom: 0px;
    }
    .phd-box-date {
        font-size: 17px;
        font-weight: 500;
        margin-top: 3px;
        margin-bottom: 0px;
        line-height: 200%;
    }
    .phd-box-text {
        font-size: 14px;
        font-weight: 250;
        margin-top: 4px;
        margin-bottom: 0px;
        line-height: 200%;
    }
    
    phd-box-icon {
        text-align: justify;
        text-anchor: middle;
        width: 100px;
    }

    .phd-box-icon img {
        display: block;
        margin: 0 auto;
    }
    
    .phd-box-icon p {
        text-align: justify;
        text-anchor: middle;
    }
}

/* Profile card */
.profile-card {
    backdrop-filter: blur(16px) saturate(181%);
    -webkit-backdrop-filter: blur(16px) saturate(181%);
    width: 300px;
    background-color: rgba(255, 255, 255, 0.74);
    border-radius: 12px;
    border: 50% solid var(--secondary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

.profile-card h2 {
    font-size: 25px;
    color: var(--background-color);
}

.profile-card p {
    color: var(--background-color);
}

.profile-card-header img {
    width: 150px;
    height: 150px;
    /*border-radius: 57% 43% 70% 30% / 37% 40% 60% 63% ; /* Makes the image shaped */
    border-radius: 50% ; /* Makes the image circular */
    object-fit: cover; /* Ensures the image covers the container */
}

.profile-card-logo-container {
    position: relative; /* This makes the container a positioned element */
    display: inline-block; /* This keeps the container's size based on the main image */
}

.profile-card-logo-img {
    display: block; /* Block level to avoid any extra spacing issues */
    max-width: 100%; /* Ensures the image scales correctly */
    height: auto; /* Maintains the aspect ratio */
}

.profile-card-inset-logo {
    position: absolute; /* Positions the inset image relative to the container */
    bottom: 0px; /* 10px from the bottom */
    right: 10px; /* 10px from the right */
    width: 20%; /* Scales the inset image, adjust as needed */
    border: none;
}


.profile-card-body {
    padding: 20px;
}

.profile-card-footer {
    background-color: #f4f4f4;
    padding: 7px 0;
}

.profile-card-footer a {
    text-decoration: none;
    color: #1e90ff;
    margin: 0 0px;
    font-weight: bold;
}

.profile-card-footer a:hover {
    text-decoration: underline;
}


/* Long arrow */
.arrow-container {
    display: flex; /* Aligns arrow and text horizontally */
    align-items: center; /* Vertically center-align text and arrow */
}

.arrow {
    margin-right: 10px; /* Space between arrow and text */
}



/* Summary of the 'About' page with icons */
.icon-container {
    text-align: center; /* Centers the content inside the container */
    margin-bottom: 20px; /* Adjusts the space below the image */
}

.icon-container img {
    display: block;
    margin: 0 auto; /* Centers the image itself */
}

.icon-caption {
    margin-top: 10px; /* Margin between the image and the caption */
    font-size: 18px; /* Adjust the font size as needed */
    color: var(--primary-color); /* Optional: change the text color */
}

a.icon-caption {
    font-size: 20px; /* Adjust the font size as needed */
    color: var(--primary-color); /* Optional: change the text color */
    text-decoration: none;
    font-weight: 600;
}
a.icon-caption a:hover {
    text-decoration: none;
}


/* Progress bar with circles */
.progress-wrapper {
    display: flex; /* Aligns text and progress bar horizontally */
    align-items: center; /* Centers them vertically */
}

.progress-text {
    margin-right: 10px; /* Space between text and progress bar */
    font-size: 16px; /* Adjust font size as needed */
    color: #333; /* Text color */
}

.progress-container {
    display: flex; /* Aligns circles horizontally */
    justify-content: space-between; /* Spaces circles evenly */
    width: 300px; /* Width of the entire progress bar */
    margin-left: 100px;
}

.progress-circle {
    width: 18px; /* Size of each circle */
    height: 18px;
    border-radius: 50%; /* Makes the elements circular */
    background-color: var(--background-color); /* Color for empty circles */
    border: solid;
    border-width: 200%;
    border-color: var(--primary-color);
}

.progress-circle.filled {
    background-color: var(--primary-color); /* Color for filled circles */
}


/* CV box, wrapper for a category of the CV */
.cv-box{
    
    .cv-box-title {
        text-transform: uppercase;
        font-size: 25px;
        font-weight: 700;
        margin-top: 15px;
        margin-bottom: 0px;
        color: var(--secondary-color);
    }
    .cv-box-title p {
        color: var(--secondary-color);
    }
    .cv-box-subtitle {
        text-transform: uppercase;
        font-size: 20px;
        font-weight: 700;
        margin-top: 5px;
        margin-bottom: 0px;
    }
    .cv-box-place {
        font-size: 19px;
        font-weight: 700;
        margin-top: 10px;
        margin-bottom: 0px;
    }
    .cv-box-date {
        font-size: 17px;
        font-weight: 500;
        margin-top: 3px;
        margin-bottom: 0px;
        line-height: 200%;
    }
    .cv-box-text {
        font-size: 16px;
        font-weight: 200;
        margin-top: 4px;
        margin-bottom: 0px;
        line-height: 200%;
    }
    
    cv-box-icon {    
        text-align: justify;
        text-anchor: middle;
        width: 100px;
    }

    .cv-box-icon img {
        display: block;
        margin: 0 auto;
    }
    
    .cv-box-icon p {
        text-align: justify;
        text-anchor: middle;
    }
}


/* Articles styling */
.article-wrapper {
}
    
article-title {
    margin-top: 10px;
    font-size: 23px;
    font-weight: 700;
    color: var(--secondary-color);
}

.article-authors {
    font-size: 18px;
    font-weight: 500;
    color: var(--primary-color)
}

.article-abstract {
    font-size: 18px;
    font-weight: 250;
    color: var(--primary-color)
}

.article-links {
    font-size: 18px;
    font-weight: 300;
    color: var(--links-color)
}
        







/* rows & columns */
.row {
  display: flex;
}

.column_2 {
    flex: 50.0%;
    padding: 5px;
}

.column_3 {
  flex: 33.33%;
  padding: 5px;
}

.column_4 {
  flex: 25.0%;
  padding: 5px;
}

.column_8 {
  flex: 12.5%;
  padding: 5px;
}