@font-face { 
font-family: 'friend';
src: url(friend/Friend.otf);
}


body {
font-family: 'friend', sans-serif;
    background-color: #defdf9; /* #c3beef */
    color: #333; 
    margin: 0;
}

header {
    background-color: #16013c; 
    text-align: center;
    padding: 20px;
    border-bottom: 5px solid #defdf9; 
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #16013c; 
    overflow: hidden;
    width: auto;
    text-align: center;
    position: -webkit-sticky; /* nav bar moving */
    position: sticky;
    top: 0;
}

nav li {
    float: left;
    border-right: 1px solid #cca9e8;
}

nav a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    width: 100px;
}

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

div.about-me {
    padding: 20px;
}

div.entries {
    padding: 20px;
}

article {
    margin-bottom: 20px;
    border: 4px solid #cca9e8; 
    border-radius: 5px; 
    padding: 15px;
    background-color: #fff;
    font-size: 20px;
}

footer {
    background-color: #16013c; 

    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: 5px solid #defdf9; 
}

img {
padding: 5px;
    border-radius: 8px;
    width: 300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

h1 {
    text-align: center;
    color: white;
   
}

h2 {
    text-align: center;
    color: black;
    font-weight: bold;
}

h3 {
    text-align: center;
    color: black;
    font-weight: bold;
}


h2.welcome{
    text-align: center;
    color: black;
    font-weight: bold;
}

div.project-archive{
    margin-bottom: 20px;
    border: 4px solid #0f7173; 
    border-radius: 10px; 
    padding: 15px;
    background-color: #fff; 
}

div.gallery{
width: 80%;
margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

}


figure.wide {flex:2;}

div.project {
    padding-right: 300px;
    padding-left: 300px;
    padding-top: 50px;
    display: flex;
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding-left: 40px;
   padding-right: 100px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

.project article img {
    width: 80%; /* You can adjust the percentage or use fixed width like 300px */
    height: auto; /* Keeps the aspect ratio consistent */
    margin: 0 auto; /* Adds some space between images */
    display: block;
}

.image-row {
    display: flex; /* Use flexbox to place images side by side */

    gap: 50px; /* Space between the images */
    padding: 10px 82px; /* Add some padding around the row */
    width: 50%;
}

iframe {
    display: block; /* Make iframe behave like a block element */
    margin: 0 auto; /* Automatically calculate left and right margins for centering */
}
.image-center {
    display: block;
    justify-content: center;
    width: 50%;
}

span.pers.on {color: white}

div.port-header {color: black;}

.custom-cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.custom-cursor.active {
  transform: scale(1.5);
}

.project {
    opacity: 0;
    transition: opacity 1s ease;
}

.project.fade-in {
    opacity: 1;
}

.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #333;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  display: none;
  font-size: 16px;
}

.scroll-to-top:hover {
  background: #444;
}

.project img {
  transition: transform 0.3s ease;
}