/*reset browser css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
}
.central-logo {
    width: 40%;
    left: 33vw;
}
#navbar {
    position:absolute;
    height: 100px;
    z-index: 9999;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    background-color: #ffffff;
    color: #fff;
    overflow: visible;
}
#navbar ul, #navbar ul li{
    float: none;
}
#navbar ul li a{
    padding: 3px;
    border-radius: 0;
}
#navbar img {

    position: absolute;
    width: 100px;
}
#navbar button {
    display: flex;
    justify-self: center;
}


main {
    margin-top: 50px;
}
/*bubbles*/
.bubble {
    position: absolute;
    border-radius: 100%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.bubble.left-top {
    width: 10%;
    opacity: 0.5;
    animation-name: left-top;
    animation-duration: 38s;
}
.bubble.right-top {
    width: 8%;
    opacity: 0.5;
    animation-name: right-top;
    animation-duration: 50s;
}
.bubble.projects {
    width: 27%;
    animation-name: projects;
    animation-duration: 50s;
}
.bubble.projects-bubble {
    width: 28%;
    animation-name: projects;
    animation-duration: 50s;
}
.bubble.contact {
    width: 25%;
    animation-name: contact;
    animation-duration: 50s;
}
.bubble.contact-bubble {
    width: 25%;
    animation-name: contact;
    animation-duration: 50s;
}
.bubble.bottom-right {
    width: 21%;
    animation-name: bottom-right;
    animation-duration: 40s;
}
.bubble.top-center {
    width: 16%;
    animation-name: top-center;
    animation-duration: 38s;
}
.bubble.bottom-left {
    width: 19%;
    animation-name: bottom-left;
    animation-duration: 35s;
}
.bubble.bottom-left2 {
    width: 14%;
    animation-name: bottom-left2;
    animation-duration: 40s;
}
.bubble.mini-center {
    width: 6%;
    opacity: 0.5;
    animation-name: mini-center;
    animation-duration: 52s;
}
.bubble.mini-right {
    width: 6%;
    animation-name: mini-right;
    animation-duration: 49s;
}
@keyframes left-top {
    0% {bottom: 70vh; left: 4vw; position:absolute}
    50% {bottom: 70vh; left: 6vw; position:absolute}
    100% {bottom: 70vh; left: 4vw; position:absolute}
}
@keyframes right-top {
    0% {bottom: 55vh; left: 85vw; position:absolute}
    50% {bottom: 55vh; left: 83vw; position:absolute}
    100% {bottom: 55vh; left: 85vw; position:absolute}
}
@keyframes contact {
    0% {bottom: 20vh; left: 70vw; position:absolute}
    50% {bottom: 20vh; left: 65vw; position:absolute}
    100% {bottom: 20vh; left: 70vw; position:absolute}
}

@keyframes projects {
    0% {bottom: 50vh; left: 8vw; position:absolute}
    50% {bottom: 50vh; left: 15vw; position:absolute}
    100% {bottom: 50vh; left: 8vw; position:absolute}
}
@keyframes projects-bubble {
    0% {bottom: 49.4vh; left: 8vw; position:absolute}
    50% {bottom: 49.4vh; left: 15vw; position:absolute}
    100% {bottom: 49.4vh; left: 8vw; position:absolute}
}
@keyframes bottom-right {
    0% {bottom: 10vh; left: 53vw; position:absolute}
    50% {bottom: 10vh; left: 55vw; position:absolute}
    100% {bottom: 10vh; left: 53vw; position:absolute}
}
@keyframes top-center {
    0% {bottom: 60vh; left: 55vw; position:absolute}
    50% {bottom: 60vh; left: 57vw; position:absolute}
    100% {bottom: 60vh; left: 55vw; position:absolute}
}
@keyframes bottom-left {
    0% {bottom: 25vh; left: 10vw; position:absolute}
    50% {bottom: 25vh; left: 12vw; position:absolute}
    100% {bottom: 25vh; left: 10vw; position:absolute}
}@keyframes bottom-left2 {
    0% {bottom: 10vh; left: 30vw; position:absolute}
    50% {bottom: 10vh; left: 28vw; position:absolute}
    100% {bottom: 10vh; left: 30vw; position:absolute}
}@keyframes mini-center {
    0% {bottom: 30vh; left: 40vw; position:absolute}
    50% {bottom: 30vh; left: 44vw; position:absolute}
    100% {bottom: 30vh; left: 40vw; position:absolute}
}@keyframes mini-right {
    0% {bottom: 40vh; left: 80vw; position:absolute}
    50% {bottom: 40vh; left: 76vw; position:absolute}
    100% {bottom: 40vh; left: 80vw; position:absolute}
}

#works {
    display: block;
}
/* Card styling */
#project-card {
    margin: 10px;
}



.icon {
    margin: 10px;
}
#copyEmailButton {
    margin: 0 auto;
    max-width: 100%;
    width: 30%;
}
.contacts-flex {
    flex-direction: column;
}


.text-about-me {
    width: 400px;
    overflow: hidden;
}
#readMoreButton {
    opacity: 1;
}
.collapsed {
    height: 300px; /* Limit height */
    overflow: hidden;
    position: relative;
}
.expanded {
    height: auto; /* Full height when expanded */
}
.mina img {
    margin-top: 30px;
}


.portal-container {
    height: 150px;
    position: relative;
    padding: 20px 0;
    margin: 0 auto;
}
.portal img {
    max-height: 100px;
}
.logos-wrapper {
    width: 80%;
    height: 150px;
    left: 50%; /* (+) Move to the center */
    transform: translateX(-50%); /* (+) Adjust back by half its own width */
  }
.portal-logos {
    gap: 0px;
}
.portal-logos img{
    min-width: 70px;
}
.left-portal {
    position: absolute;
    left: 0px;
}
.right-portal {
    position: absolute;
    right: 0px;
}