body {
            background-color: black;
            margin: 0;
            padding: 0;
            font-family: Helvetica, sans-serif;
            text-align: center;
        }

        header {
            background-color: black;
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .logo img {
        width: 30%;
        max-width: 30%;
        height: auto;
    }

        nav {
            background-color: black;
            margin: -10px;
            margin-bottom: 30px;


        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        nav li {
            display: inline;
            margin-right: 20px;
        }

        nav a {
            text-decoration: none;
            color: #d9d9d9;
            font-size: 18px;
        }

        nav a:hover {
            text-decoration: underline;
            color: #00dfdf;
        }

        .logo {
            margin-top: 20px;
            margin-bottom: -20px;
        }

/* Home */ 

   button {
        background-color: #007bff; /* Blue background color */
        color: white;              /* White text color */
        margin-top: 50px;
        padding: 27px 20px;        /* Padding for the button */
        border: none;              /* Remove the default button border */
        cursor: pointer;           /* Change cursor to a pointer on hover */
        border-radius: 33px;
    }

    button:hover {
        background-color: orange; /* Darker blue on hover */
        font-size: 108%;
        color: black;
        }

/* About */ 
        /* Container styles */
        .container {
            background-color: #1e1e1e; /* Dark background color */
            border-radius: 15px;      /* Rounded edges */
            margin: 20px auto;
            padding: 20px;
            width: 80%;
            color: #d9d9d9;
        }

        /* Two-column row */
        .two-column-row {
            display: flex;
            flex-wrap: wrap; /* Allow the columns to wrap on smaller screens */
            justify-content: left;
            align-items: left;

        }

        .left-column {
            flex: 1;
            padding: 20px;
            background-color: #1e1e1e; /* Background color for the left column */
            color: #d9d9d9;
            text-align: left;
        }

        .left-column h1 {
            font-size: 5rem;
            margin-top: 25%;
        }

        .right-column {
            flex: 1;
            padding: 20px;
            background-color: #1e1e1e; /* Background color for the right column */
            color: #d9d9d9;
            text-align: left;
        }

        .right-column img {
            width: 60%;
        }

        /* Main article */
        .main-article {
            margin: 20px auto;
            padding: 20px;
            background-color: #1e1e1e; /* Background color for the main article */
            color: #d9d9d9;
        }
        .main-article p {
            text-align: left;
            font-size: 1.5rem;

        }

        /* Adjust the image size */
        .right-column img {
            max-width: 100%;
            height: auto;
            background-color: #1e1e1e;
        }

 
        /* Media query for smaller screens */
        @media (max-width: 768px) {
            .container {
                border-radius: 0; /* Remove rounded edges on smaller screens */
                padding: 10px;    /* Reduce padding on smaller screens */
                background-color: #1e1e1e;
            }

            .two-column-row {
                flex-direction: column; /* Stack columns vertically on smaller screens */
            }

            .left-column,
            .right-column {
                flex: auto; /* Take up the available width */
                padding: 10px;
            }
        }

/* Contact */ 

        /* Form container */
        .form-container {
            max-width: 60%;
            margin: 20px auto;
            padding: 20px;
            background-color: #2e2e2e; /* Dark background color */
            border-radius: 35px;      /* Rounded edges */
        }

        /* Form input styles */
        input[type="text"],
        input[type="email"],
        textarea {
            width: 50%; /* Limit width to 50% */
            padding: 10px;
            margin: 0 0 15px 0; /* Add margin to the Message field */
            border: none;
            background-color: #fff;
            border-radius: 5px;
        }

        /* Form label styles */
        label {
            display: block;
            text-align: left;
            color: #fff;
        }

        /* Form submission message */
        .thank-you-message {
            display: none;
            font-size: 24px;
            color: #00dfdf;
        }


/* Portfolio */

        .grid {
            background-color: black;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin: 20px;
        }

         .cell {
            background-color: #aaa;
            color: #000;
            text-align: center;
            padding: 20px;
        }
        .cell img {
            max-width: 100%;
        }

        div .tip {
            background-color: yellow;
            padding: 20px;
            display: none;
        }

        span:hover + div .tip {
            display: block;
        }

        .img-wrap {
         position: relative;
         height: auto;
         max-width: 100%;
         }

        .img-description {
          position: relative;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(29, 106, 154, 0.72);
          color: #fff;
          visibility: hidden;
          opacity: 0;
        }

        .img-wrap:hover .img-description {
          visibility: visible;
          opacity: 1;
        }