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

.central-logo {
    width: 40%;
    left: 33vw;
}
/*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: 75vh; left: 85vw; position:absolute}
    50% {bottom: 75vh; left: 83vw; position:absolute}
    100% {bottom: 75vh; left: 85vw; position:absolute}
}
@keyframes contact {
    0% {bottom: 33vh; left: 70vw; position:absolute}
    50% {bottom: 33vh; left: 65vw; position:absolute}
    100% {bottom: 33vh; 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: 70vh; left: 55vw; position:absolute}
    50% {bottom: 70vh; left: 57vw; position:absolute}
    100% {bottom: 70vh; 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: 30vh; left: 80vw; position:absolute}
    50% {bottom: 30vh; left: 76vw; position:absolute}
    100% {bottom: 30vh; left: 80vw; position:absolute}
}


#works{
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Create columns with a minimum width of 400px */
    max-width: 600px;
}
#project-card {
    width: 250px;
}
#project-card img {
    height: 150px;
}



.icon {
    max-width: 40%; /* Keep the icon size as it is */
}
.portal-container {
    height: 150px;
}
.portal img {
    max-height: 150px;
}
.logos-wrapper {
    width: 77%;
    height: 190px;
    left: 50%; /* (+) Move to the center */
    transform: translateX(-50%); /* (+) Adjust back by half its own width */
  }
.portal-logos {
    gap: 10px;
}
.portal-logos img{
    min-width: 80px;
}
.left-portal {
    position: absolute;
    left: 20px;
}
.right-portal {
    position: absolute;
    right: 20px;
}






#copyEmailButton {
    font-size: smaller;
    min-width: 15vw;
}