body {
        font-family: 'Montserrat', sans-serif;
        background-color: #f8f9fa;
      }
      .container {
        max-width: 1200px;
        margin: 0 auto;
		    border-radius: 20px;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
      }

      header h1 {
        display:inline-block;


      }
      .logo {
        font-size: 1.5em;
        font-weight: 600;
        color: #333;
      }
      .logo img {
        height: 80px;
        margin-right: 10px;
        aligh-items: center;
      }

      nav {
        display: flex;
      }
      nav a {
        font-size: 0.9em;
        color: #999;
        text-decoration: none;
        margin-right: 20px;
        transition: color 0.3s;
      }
      nav a:hover {
        color: #333;
      }
      main {
        display: flex;
		    flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 500px;
      }
      main h1 {
        font-size: 3em;
        font-weight: 600;
        color: #333;
      }
      .sites {
		    display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 30px;
        width: 250px;
        max-width: 600px;
        border-radius: 15px;
      }
     
      .sites  img {
          width: 210px;
          --c: #3c4962;
        /* the border color */
          --b: 4px;
        /* the border thickness*/
          --g: 28px;
        /* the gap on hover */
        padding: calc(var(--g) + var(--b));
          --_g: #0000 25%,var(--c) 0;
            background: conic-gradient(from 180deg at top var(--b) right var(--b),var(--_g)) var(--_i,200%) 0 /200% var(--_i,var(--b)) no-repeat, conic-gradient( at bottom var(--b) left var(--b),var(--_g)) 0 var(--_i,200%)/var(--_i,var(--b)) 200% no-repeat;
            transition: .5s, background-position .5s .5s;
            cursor: pointer;
        border-radius: 10px;
}
 img:hover {
     --_i: 100%;
     transition: .5s, background-size .5s .5s;
}

      footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        background-color: #f2f2f2;
		    border-radius: 20px;
      }
      footer p {
        font-size: 0.9em;
        color: #999;
      }
      footer a {
        font-size: 0.9em;
        color: #333;
        text-decoration: none;
        transition: color 0.3s;
      }
      footer a:hover {
        color: #0070f3;
      }