/* global styles */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    
    /* header styles */
    header {
      background-color: #333;
      color: #fff;
      display: flex;
      justify-content: space-between;
      padding: 1rem;
    }
    
    header h1 {
      font-size: 2rem;
      margin: 0;
    }
    
    header nav {
      display: flex;
      align-items: center;
    }
    
    header nav a {
      color: #fff;
      text-decoration: none;
      margin: 0 1rem;
    }
    
    /* main content styles */
    main {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2rem;
    }
    
    main h2 {
      font-size: 1.5rem;
      margin-top: 0;
    }
    
    main p {
      font-size: 1rem;
      line-height: 1.5;
    }

    .hero img {
        height: 200px;
        width: auto;
    }

    /* Define the styles for the icons */
      .icon {
        width: 100px;
        height:100px;
        margin: 10px;
        display: inline-block;
        object-fit: fill;
        
      }
      .html { background-image: url('/images/html-icon.png'); }
      .css { background-image: url('images/css-icon.png'); }
      .javascript { background-image: url('javascript-icon.png'); }
      .python { background-image: url('python-icon.png'); }
      .java { background-image: url('java-icon.png'); }
    


    /* footer styles */
    footer {
      background-color: #333;
      color: #fff;
      display: flex;
      margin: auto;
      justify-content: center;
      align-items: center;
      height: 3rem;
      position: fixed;
      bottom: 0;
      width: 100%;
    }
    
    footer p {
      margin: 0;
    }