/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column; /* Ensure elements are stacked vertically */
    align-items: center;
    height: 100vh;
    background-color: black; /* Set the background color */
    background-image: url('asset/image2.png'), url('asset/image3.png'), url('asset/image4.png'), url('asset/image5.png');
    background-repeat: repeat;
    background-position: top left, top right, bottom left, bottom right; /* Position each image */
}

.menu {
    position: relative; /* Change position to relative */
    width: auto; /* Set width to auto */
    margin: 0 auto; /* Center the menu horizontally */
    max-width: 90%; /* Limit the maximum width of the menu */
    padding: 20px 0; /* Add padding to the top and bottom of the menu */
    z-index: 2; /* Ensure menu appears above other content */
}

.menu ul {
    list-style-type: none; /* Remove default list styles */
    margin: 0;
    padding: 0;
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: center; /* Center align menu items horizontally */
    align-items: center; /* Align items vertically */
}

.menu li {
    margin: 0 20px; /* Add spacing between menu items */
}

.menu a {
    text-decoration: none; /* Remove underline from links */
    color: #fff; /* Text color of the links */
    font-family: 'Raleway', sans-serif; /* Use Raleway font */
    font-size: 18px; /* Adjust font size */
    font-weight: 400; /* Make the text bold */
    transition: color 0.3s; /* Add transition for smooth color change */
    position: relative; /* Set position to relative to contain pseudo-element */
}

.menu a::before {
    content: "/"; /* Add content for the pseudo-element */
    color: #72FFEE; /* Change color of the slash */
    position: absolute; /* Set position to absolute */
    left: -15px; /* Adjust positioning of the slash */
    margin-right: 5px; /* Add margin between the slash and text */
}

.menu .logo {
    color: #fff; /* Text color of the logo */
    font-family: 'Rubik', sans-serif; /* Use Rubik font */
    font-size: 64px; /* Adjust font size */
    font-weight: 500; /* Make the text bold */
    margin-left: 50px;
    margin-right: 50px;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Align children with space between */
    width: 85%; /* Set width to 100% to cover the entire page */
    padding: 0 100px; /* Add padding to the left and right */
    margin-top: 1%;
    margin-bottom: 1%;
    line-height: 1.5; /* Add space between lines */

    @media screen and (max-width: 1024px) {
        padding: 0 50px; /* Adjust padding for screens up to 1024px */
    }

    @media screen and (max-width: 768px) {
        padding: 0 20px; /* Adjust padding for screens up to 768px */
    }
}

.header h1 {
    color: #fff; /* Text color of the header */
    font-size: 24px; /* Adjust font size */
    margin-bottom: 10px; /* Add space between header and divider */
}

.intro {
    font-size: 24px;
    font-weight: 300;
    color: #fff;
    font-family: 'Saira', sans-serif; /* Set font family to Saira */
}

.name {
    font-family: 'Press Start 2P', cursive; /* Apply Press Start 2P font */
    font-size: 62px;
    font-weight: bold;
    color: #72FFEE;
    text-align: center; /* Center-align text */
}

.divider {
    color: rgba(255, 255, 255, 0.2); /* Set color with 20% opacity */
    font-size: 100px; /* Set font size to 100px */
    font-family: 'Raleway', sans-serif; /* Change font family to Raleway */
    font-weight: bold; /* Make the text bold */
}

.divider::after {
    content: '/'; /* Add content for the pseudo-element */
    color: rgba(255, 255, 255, 0.2); /* Color of the divider with 20% opacity */
    font-size: 100px; /* Adjust the font size */
    margin: 0 5%; /* Set a percentage-based margin */
}

@media screen and (min-width: 768px) {
    .divider::after {
        margin: 0 10%; /* Increase the margin for larger screens */
    }
}

@media screen and (min-width: 1024px) {
    .divider::after {
        margin: 0 15%; /* Further increase the margin for even larger screens */
    }
}


.download-cv-container {
    position: relative;
}

.download-cv {
    color: #fff;
    font-size: 14px;
    font-family: 'Press Start 2P', cursive;
    position: absolute;
    top: 50%; /* Position the element vertically in the middle */
    left: 50%; /* Position the element horizontally in the middle */
    transform: translate(-50%, -50%); /* Center the element precisely */
    z-index: 1;
    cursor: pointer; /* Add cursor pointer to indicate clickable */
    padding: 10px 20px; /* Add padding to improve clickability */
    text-decoration: none;
}

.download-cv:hover {
    color: #72FFEE; /* Change color on hover */
}

.material-icons-rounded {
    font-family: 'Material Symbols Rounded'; /* Set the font family */
    color: #fff; /* Set the color of the icons */
    user-select: none; /* Prevent selection */
}

/* Container for arrow images */
.arrow-container {
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 40px; /* Adjust margin as needed */
}

.arrow {
    margin: 0 10px; /* Adjust spacing between arrows */
}

/* Center arrow */
.arrow-center {
    font-size: 60px; /* Adjust the font size as needed */
    position: absolute;
    bottom: 0; /* Align the arrow to the bottom of the container */
    left: 50%; /* Position the arrow in the center */
    transform: translateX(-50%); /* Center the arrow horizontally */
}

/* Left arrow */
.arrow-left {
    font-size: 40px; /* Adjust the font size as needed */
    width: 20px;
    position: absolute;
    bottom: 20px; /* Adjust the spacing from the bottom */
    left: 25px; /* Position the arrow at the left edge of the container */
    opacity: 0.5;
}

/* Right arrow */
.arrow-right {
    font-size: 40px; /* Adjust the font size as needed */
    position: absolute;
    bottom: 20px; /* Adjust the spacing from the bottom */
    right: 25px; /* Position the arrow at the right edge of the container */
    opacity: 0.5;
}


.about-me-container {
    width: calc(100% - 20px); /* 40px is the total padding of the header (20px on each side) */
    padding: 0 20px; /* Match the padding of the header */
    box-sizing: border-box; /* Ensure padding is included in the width */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Align items vertically */
    justify-content: center; /* Distribute items evenly */
}

.about-me-text {
    flex: 1; /* Allow text to take remaining width */
}

.about-me-content {
    flex-grow: 1; /* Allow content to grow to fill available space */
    padding-right: 20px;
    max-width: 40%; /* Set the maximum width */
}

.video-container {
    max-width: 500px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 5%; /* Adjust margin as needed */
    height: 40%;
}

.video-container iframe {
    width: 100%;
    height: 100%;
}

.about-me-content h2 {
    font-family: 'Press Start 2P', cursive;
    font-size: 24px;
    color: #7291FF;
    margin-bottom: 20px; /* Add space between title and text */
}

.about-me-content p {
    font-size: 16px;
    line-height: 1.5;
    font-family: 'rubik';
    font-weight: 300;
    color: #ffffffe8; /* Adjust text color */
}

.about-me-avatar {
    position: relative;
}

.about-me-avatar::after {
    content: "/";
    color: #fff;
    font-size: 400px;
    font-family: 'raleway';
    font-weight: 800;
    position: absolute;
    top: 50%;
    left: 10%; /* Position the "/" to the right of the avatar container */
    transform: translateY(-50%); /* Center the "/" vertically */
    margin-left: 10px; /* Adjust the spacing between the avatar container and the "/" */
    opacity: 0.1;
    z-index: -1;
}

.avatar-divider {
    position: absolute;
    color: #fff; /* Set color of the "/" */
    font-size: 400px; /* Adjust font size if needed */
    font-family: 'raleway';
    font-weight: 800;
    margin-left: 50px; /* Add space between avatar and "/" */
    opacity: 0.1;
}

.circle-container {
    position: relative;
    width: 400px; /* Adjust container width */
    height: 400px; /* Adjust container height */
}

.circle {
    position: absolute;
    background-image: url("data:image/svg+xml,%3csvg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' fill='none' rx='500' ry='500' stroke='white' stroke-width='1' stroke-dasharray='16%2c 14%2c 13' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
    transition: transform 0.3s ease; /* Add transition for smooth animation */

    animation: clockwise 25s linear infinite; /* Add spinning animation */
}

/* Define colors and dimensions for each circle */
.inner {
    width: 220px; /* Adjust width */
    height: 220px; /* Adjust height */
    top: 90px;
    left: 90px;
}

.middle {
    width: 260px; /* Adjust width */
    height: 260px; /* Adjust height */
    top: 70px; /* Adjust vertical position */
    left: 70px; /* Adjust horizontal position */
}

.outer {
    width: 300px; /* Adjust width */
    height: 300px; /* Adjust height */
    top: 50px; /* Adjust vertical position */
    left: 50px; /* Adjust horizontal position */
}

.avatar-container {
    position: absolute;
    width: 200px; /* Adjust width */
    height: 200px; /* Adjust height */
    top: 100px; /* Adjust vertical position */
    left: 100px; /* Adjust horizontal position */
    background-image: url("asset/rectangle.png");
    transform: rotate(340deg);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar {
    width: 180px; /* Adjust width */
    height: 180px; /* Adjust height */
    background-image: url("asset/profile_c1.png");
    background-size: cover; /* Make the background image cover the entire area */
    border-radius: 47%; /* Ensure the avatar is circular */
    position: relative; /* Adjusted position */
    z-index: 1; /* Ensure avatar appears above the avatar container */
    top: 120px; /* Adjust the distance from the top */
    left: 110px; /* Adjust the distance from the left */
}

/* Set border color for each circle */
.inner {
    background-image: url("data:image/svg+xml,%3csvg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' fill='none' rx='500' ry='500' stroke='%23ffffff85' stroke-width='1' stroke-dasharray='16%2c 14%2c 13' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
}

.middle {
    background-image: url("data:image/svg+xml,%3csvg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' fill='none' rx='500' ry='500' stroke='%23ffffff50' stroke-width='1' stroke-dasharray='16%2c 14%2c 13' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
    animation: anticlockwise 25s linear infinite; /* Add spinning animation for the middle circle */
}

.outer {
    background-image: url("data:image/svg+xml,%3csvg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' fill='none' rx='500' ry='500' stroke='%23ffffff25' stroke-width='1' stroke-dasharray='16%2c 14%2c 13' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
}

/* Animation for spinning */
@keyframes clockwise {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Animation for spinning pink anti-clockwise */
.circle-container:hover .middle {
    animation: anticlockwise 25s linear infinite; /* Add spinning animation */
}

/* Animation for spinning anti-clockwise */
@keyframes anticlockwise {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg); /* Adjust for anti-clockwise rotation */
    }
}

.about-me-skills {
    display: flex;
    flex-wrap: wrap; /* Allow skills to wrap to the next line */
    gap: 10px; /* Add some space between skills */
    width: calc(70% - 20px);
    justify-content: center;
}

.skill {
    position: relative;
    display: flex;
    align-items: center;
    background-color: transparent;
    color: #dddddd;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    flex: 1; /* Allow skills to grow to take available space */
    /* border-left: 3px solid #7291FF; Add purple border to the left */

    /* Define background image for dashed border */
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%23333' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    background-size: 100% 100%; /* Ensure the background image covers the container */
    border-radius: 10px; /* Add border radius */
}

.skill:after {
  content: '';
  position: absolute;
  left: 0px;
  height: 70%;
  border-radius: 100px;
  border-left: 3px solid #7291FF;
}

.skill img {
    width: 30px; /* Adjust image size as needed */
    height: auto;
    margin-right: 10px; /* Add space between image and text */
}

.skill p {
    margin: 0; /* Remove default margin */
    text-align: center; /* Center-align text */
}

.work h2 {
    font-size: 30px;
    font-weight: bold;
    text-align: center; /* Center-align text */
    margin-bottom: 2%;
    width: 100%; /* Ensures the text takes full width */
    font-family: 'Press Start 2P', cursive;
    color: #ff72e0;
    margin-bottom: 20px; /* Add space between title and text */
}

.work-item-container {
    position: relative; /* Set position to relative */
    width: auto; /* Set the width to auto */
    max-width: 60%; /* Set a maximum width to 60% */
    color: white !important; /* Set font color to white */
    background-color: transparent; /* Set transparent background */
    padding: 20px; /* Add padding */
    margin: 0 5px; /* Add margin */
    box-sizing: border-box; /* Include padding and border in width calculation */
    border-radius: 10px; /* Add border radius */
}

.work-item-container-image {
    position: relative; /* Set position to relative */
    width: auto; /* Set the width to auto */
    align-items: center;
    max-width: 60%; /* Set a maximum width to 60% */
    color: white !important; /* Set font color to white */
    background-color: transparent; /* Set transparent background */
    padding: 10px 20px; /* Add padding */
    margin-right: 20px;
    box-sizing: border-box; /* Include padding and border in width calculation */
    border-radius: 10px; /* Add border radius */
}

.work-item-container-image::after {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 30%;
    width: 2px; /* Adjust the width of the left border */
    background-color: #7291FF; /* Set the color of the left border */
    border-radius: 10px 0 0 10px; /* Ensure rounded corners */
}

/* Define background image for dashed border */
.work-item-container {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%23333' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    background-size: 100% 100%; /* Ensure the background image covers the container */
    border-radius: 10px; /* Add border radius */
    width: 90%;
}

.work-item-container-image {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%23333' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    background-size: 100% 100%; /* Ensure the background image covers the container */
    border-radius: 10px; /* Add border radius */
}

.work-item-container img {
    max-width: 100%; /* Ensure the image fits within its container */
    display: block;
}

.work-item-container .date {
    position: absolute; /* Set position to absolute */
    font-family: 'Rubik', cursive;
    top: 10px; /* Adjust top position */
    right: 10px; /* Adjust right position */
    color: #C3C3C3; /* Set font color to white */
    background-color: transparent; /* Semi-transparent background */
    padding: 12px 12px; /* Add padding */
    border-radius: 5px; /* Add border radius */
}

.work {
    margin-top: 4%;
}



.work-item {
    display: flex;
    justify-content: center; /* Center the items horizontally */
    flex-wrap: nowrap; /* Allow items to wrap to the next line */
    margin-top: 20px; /* Add some space between items */
}

.work-item img {
    max-width: 200px;
}

.work-details {
    flex: 1;
    
}

.work-details a {
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer; /* Add cursor pointer to indicate clickable */
    
}

.work-details h3 {
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer; /* Add cursor pointer to indicate clickable */
    
}

.work-details p {
    font-family: 'Rubik', cursive;
    font-weight: 300;
    font-size: 16px;
    color: #ffffffe8;
    line-height: 1.5;
    padding-top: 10px;
}

.work-item-container {
    width: 100%;
    margin-right: 20px; /* Adjust the margin as needed */
}

/* To avoid extra margin on the last item */
.work-item-container:last-child {
    margin-right: 0;
}

@media screen and (max-width: 768px) {
    .work-item-container {
        width: 100%; /* Set width to 100% for smaller screens */
        margin-right: 0; /* Remove margin for smaller screens */
    }
}


  
.connect {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 7%;
    width: 100%; /* Ensures the section takes full width */
    max-width: 600px; /* Optional: Set a maximum width if needed */
}

.connect-container {
    position: relative;
}

.connect h2 {
    position: absolute; /* Set position to absolute */
    top: -30px; /* Adjust as needed to position the text above the circles */
    left: 50%; /* Align the text to the center */
    transform: translateX(-50%); /* Center the text horizontally */
    font-family: 'Press Start 2P', cursive; /* Apply Press Start 2P font */
    font-size: 30px;
    font-weight: bold;
    color: white;
    text-align: center; /* Center-align text */
    margin-bottom: 2%;
    width: 100%; /* Ensures the text takes full width */
}

.connect-icons {
    position: absolute;
    top: 50%; /* Position the element vertically in the middle */
    left: 50%; /* Position the element horizontally in the middle */
    transform: translate(-50%, -50%); /* Center the element precisely */
    z-index: 1;
    cursor: pointer; /* Add cursor pointer to indicate clickable */
    padding: 10px 20px; /* Add padding to improve clickability */
}
  

@media screen and (max-width: 768px) {
    /* Styles for screens smaller than 768px (e.g., tablets and mobile devices) */
    .header {
        flex-direction: column; /* Stack header items vertically */
        align-items: center; /* Center align items */
        padding: 0 20px; /* Reduce padding on the sides */
        margin-top: 50px; /* Adjust margin as needed */
      }

    .intro {
        font-size: 18px; /* Adjust font size for smaller screens */
    }

    .name {
        font-size: 36px; /* Adjust font size for smaller screens */
    }
  
    .about-me-content {
      max-width: 100%; /* Make content full width on smaller screens */
      padding-right: 0px; /* Reduce right padding for smaller screens */
    }
  
    .about-me-container {
        flex-direction: column; /* Change flex direction to stack items vertically */
        align-items: center; /* Center align items horizontally */
      }
    
    .about-me-avatar {
       order: -1; /* Move the avatar container above the content */
       margin-bottom: 20px; /* Add some space between the avatar and the content */
    }

    .video-container iframe {
        width: 100%;
        height: 150px; /* Adjust height as needed */
        border-radius: 5px;
        margin-top: 10px;
    }

    .arrow-container {
        justify-content: center; /* Center the arrows horizontally */
        position: relative;
        margin-top: 40px; /* Adjust margin as needed */
      }
    
      /* Adjust individual arrow positions if necessary */
      .arrow-left {
        left: 25px;
        right: auto;
      }
    
      .arrow-right {
        right: 25px;
        left: auto;
      }
    
      .arrow-center {
        left: 50%;
        transform: translateX(-50%);
      }

      .intro {
        text-align: center; /* Center align text */
      }
    
      .divider {
        display: none; /* Hide the divider on mobile */
      }
    
      .download-cv-container {
        margin-top: 20px; /* Add margin to separate from intro */
      }

      .menu {
        position: relative;
        padding: 20px 0;
    }

    .menu ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .menu .logo-container {
        order: -1; /* Place the logo on top */
        margin-bottom: 20px; /* Add space below the logo */
    }

    .menu li {
        margin: 10px 0;
    }

    .menu li:last-child {
        margin-bottom: 0; /* Remove bottom margin from the last item */
    }

    .work-item {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center-align items */
    }

    .work-item-container {
        max-width: 90%;
        margin: 0 0 20px; /* Add margin to separate items */
    }

    .work-item-container-image {
        max-width: 90%;
        margin: 0 0 20px; /* Add margin to separate items */
    }

    .work-item img {
        max-width: 100%; /* Ensure images fit within their containers */
        margin: 0 auto 0px; /* Center-align images and add space below */
    }

    .work-details {
        text-align: left; /* Center-align text */
    }

    .work-details h3 {
        text-align: left; /* Align title to the left */
        margin-bottom: 20px; /* Add space between title and description */
    }

    .work-details p {
        text-align: left; /* Align description to the left */
        margin: 0; /* Remove default margin */
    }

    .about-me-skills {
        display: flex;
        flex-direction: column; /* Stack items as a column */
        width: 88%;
        padding-top: 3%;
        padding-bottom: 6%;
    }

    .connect {
        display: flex; /* Use flexbox for layout */
        flex-direction: column; /* Display circles in a column */
        align-items: center; /* Align circles in the center horizontally */
    }

}

/* For screens larger than 768px (web) */
@media screen and (min-width: 769px) {
    .menu {
        width: auto; /* Set width to auto */
        margin: 0 auto; /* Center the menu horizontally */
        max-width: 90%; /* Limit the maximum width of the menu */
    }
    
    .menu ul {
        display: flex;
        justify-content: center; /* Spread items out */
        align-items: center;
        gap: 20px;
    }
    
    .menu li {
        margin: 0 20px; /* Adjust margin for all list items */
    }
    
    .logo-container {
        margin-left: auto; /* Push the logo to the right */
    }
    
    .menu li:nth-child(3) {
        margin-right: calc(20px - 10px); /* Calculate margin to match the space between second link and logo */
    }
}

@media only screen and (max-width: 1024px) {
    /* Adjust the margin between sections */
    .work {
        margin-bottom: 40px;
    }

    .about-me-content {
        margin-bottom: 30px;
    }

}

.img-portfolio{
    max-width: 100% !important; /* Prevents overflow on small screens */
    height: auto;  /* Maintains aspect ratio */
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 600px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}