body {
    color: #333;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}

main {
    margin: 40px;
}

h1 {
     font-size: 30px;
     margin-bottom: 40px;
}

.button_container {
    border: 1px solid #ddd;
    margin: 0 10px 10px 0;
    padding: 20px;
    width: 300px;
    height: 300px;
    float: left;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
}

/* 1) Apple*/
#btn_apple{
    display:inline-flex; align-items:center; gap:10px;
    margin-top:100px; padding:12px 24px; border-radius:999px;
    background:#000; color:#fff; text-decoration:none; font-weight:700;
    transition:transform .2s, box-shadow .2s, color .2s;
  }
  #btn_apple i{ font-size:26px; line-height:1; }
  #btn_apple:hover{ background:#fff; color:#000; box-shadow:0 0 0 3px #000 inset; }
  
  /* 2) Coca-Cola*/
  #btn_cocacola{
    display:inline-block; margin-top:110px; padding:12px 28px;
    background:#e61c2b; color:#fff; font-weight:800; font-style:italic;
    letter-spacing:.02em; border-radius:36px; text-decoration:none; position:relative;
    transition:transform .2s, box-shadow .2s;
  }

  #btn_cocacola:hover{ 
      transform:translateY(-2px); 
      box-shadow:0 10px 18px rgba(230,28,43,.25); 
    }
  
  /* 3) Nike*/
#btn_nike{
    margin-top: 80px;
    display: flex;
    flex-direction: column; 
    align-items: center;        
}

.nikeText{
    width: 200px;
    transform: translateY(38px);
    transition: transform 0.5s ease;
}

#btn_nike:hover .nikeText{
    transform: translateY(-2px) scale(0.9);
}

.nikeImg {
    opacity: 0;
    transition: opacity 0.5s ease; 
    width: 150px;
    position:relative;
    bottom:14px;
}

#btn_nike:hover .nikeImg {
    opacity: 1; 
}
  
  
  /* 4) Tesla*/
  #btn_tesla{
    display:inline-block; margin-top:110px; padding:12px 34px;
    color:#cc0000; text-decoration:none; border:3px solid #cc0000; border-radius:8px;
    letter-spacing:.35em; font-weight:700; background:transparent; transition:all .25s;
  }
  #btn_tesla:hover{ background:#cc0000; color:#fff; box-shadow:0 0 16px rgba(204,0,0,.4); }
  
  /* 5) Samsung*/
  #btn_samsung{
    display:inline-block; margin-top:110px; padding:12px 30px; border-radius:28px;
    background:#1428a0; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.12em;
    transition:filter .2s, transform .2s;
  }
  #btn_samsung:hover{ 
      filter:brightness(1.15); 
      transform:translateY(-2px);
      scale:1.2;
     }
  
  /* 6) Cartoon Network*/
  #btn_cartoon{
    display:inline-flex; align-items:center; justify-content:center;
    width:150px; height:150px; margin:auto; margin-top:60px; border-radius:12px;
    text-decoration:none; color:#000; font-weight:900; font-size:48px;
    background:
      linear-gradient(90deg,#000 50%,#fff 50%) 0 0/50% 50%,
      linear-gradient(90deg,#000 50%,#fff 50%) 0 100%/50% 50%,
      linear-gradient(90deg,#fff 50%,#000 50%) 100% 0/50% 50%,
      linear-gradient(90deg,#fff 50%,#000 50%) 100% 100%/50% 50%;
    box-shadow:0 0 0 6px #000 inset;
    transition:transform .2s;
  }
  #btn_cartoon span{ background:#fff; padding:0 8px; box-shadow:0 0 0 6px #000; }
  #btn_cartoon:hover{ transform:rotate(-10deg) scale(1.05); }
  
  /* 7) IBM*/
#btn_ibm{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  
    width: 160px;
    height: 80px;
  
    margin-top: 90px;
    margin-left:50px;
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    letter-spacing: .2em;
    border-radius: 8px;
  
    background:
      repeating-linear-gradient(
        to bottom,
        #1261fe 0, #1261fe 4px,
        #0f54d8 4px, #0f54d8 8px
      );
    box-shadow: 0 6px 14px rgba(15,84,216,.25);
  
    overflow: hidden;
    transition: box-shadow .35s ease, border-color .35s ease, filter .35s ease;
  }
  
  #btn_ibm .ibmText{
    opacity: 1;
    transition: opacity .35s ease, transform .35s ease;
  }
  
  #btn_ibm .ibmImg{
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    display: flex;
    align-items: center;
    justify-content: center;
  
    opacity: 0;            
    pointer-events: none;  
    transition: opacity .45s ease, filter .45s ease;
  }
  
  #btn_ibm .ibmImg img{
    max-width: 80%;
    height: auto;
    border-radius: 6px; 
  }
  
  #btn_ibm:hover{
    background: transparent;    
    box-shadow: none;           
    filter: none;
  }
  
  #btn_ibm:hover .ibmText{
    opacity: 0;
    transform: scale(.9);
  }
  
  #btn_ibm:hover .ibmImg{
    opacity: 1;;
  }
  
  
  /* 8) Harley-Davidson*/
  #btn_harley{
    display:inline-block; margin-top:105px; padding:14px 28px; text-decoration:none;
    color:#ff6600; background:#111; border:3px solid #ff6600; border-radius:6px;
    text-transform:uppercase; font-weight:800; letter-spacing:.08em;
    box-shadow:0 0 0 3px #111 inset; transition:all .2s;
  }
  #btn_harley:hover{ 
      background:#ff6600; color:#111; 
    }
 #btn_harley span{
     display:block;
     transform: translateX(-10px); 
     transition: transform .4s ease; 
 }
  #btn_harley:hover span{
        transform: translateX(10px);
    }
  
  /* 9) Instagram*/
#btn_instagram {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 100px;
    padding: 12px 22px;
    color: #000;                  
    background: #fff;
    border: 2px solid #000;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    font-family: sans-serif;
    transition: all 0.4s ease;
  }
  
  #btn_instagram .instagramText {
    font-size: 22px;
    transition: color 0.4s ease;
  }
  
  #btn_instagram:hover {
    color: #fff;
    border-color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    box-shadow: 0 0 10px rgba(214, 36, 159, 0.5);
  }
  
  #btn_instagram:hover .instagramText{
    color: #fff;
  }
  
  
  /* 10) NPR*/
#btn_npr {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 90px;
    text-decoration: none;
    font-weight: 800;
    font-size: 32px;
    text-transform: lowercase;
  }
  
  #btn_npr .block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background: #ccc;      
    color: #fff;
    transition: all 0.4s ease;
  }
  
  #btn_npr:hover .n {
    background: #d62021;   
  }
  
  #btn_npr:hover .p {
    background: #1a1a1a;  
  }
  
  #btn_npr:hover .r {
    background: #2a6ebb;   
  }