body{
    border: #3a2f2f solid 3px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(58, 47, 47, 0.6);
    background: #170f0f;
    background: linear-gradient(179deg, rgba(23, 15, 15, 1) 18%, rgb(38, 18, 18) 66%, rgba(6, 2, 2, 0.84) 91%);
    color:#090707;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 100px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    .container{
      width: 980px;
      margin: 30px auto;
    }

    /* ===== TOP BLACK BOX ===== */
    .box{
      background: #604f4f;
      padding: 12px;
      border-radius: 10px;
    }


    .textbox{
      display: block;            
      width: 420px;
      padding: 12px 14px;
      margin-bottom: 12px;
      border: 1px solid #bbb;
      border-radius: 4px;
      font-size: 16px;
      box-sizing: border-box;
    }


    .survey{
      width: 700px;
      background: #fff;
      border: 1px solid #999;
      padding: 14px 16px;
      margin-top: 6px;
      box-sizing: border-box;
      white-space: nowrap;         
    }

    .survey-text{
      display: inline-block;        
      width: 520px;                 
      vertical-align: middle;      
      margin: 0;
      font-size: 18px;
      line-height: 1.25;
      white-space: normal;        
    }

    .survey-buttons{
      display: inline-block;     
      width: 140px;
      vertical-align: middle;       
      text-align: right;
    }

    .survey-buttons button{
      display: inline-block;
      padding: 6px 14px;
      margin-left: 10px;
      border: 2px solid #000;
      background: #eee;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

    /* Google box */
    .google{
      width: 700px;
      background: #fff;
      border: 1px solid #999;
      padding: 16px;
      margin-top: 12px;
      box-sizing: border-box;
    }

    .google img{
      width: 220px;
      display: block;
      margin: 0 auto 12px;       
    }

    .google input{
      width: 100%;
      padding: 14px 16px;
      border-radius: 26px;
      border: 1px solid #cfcfcf;
      font-size: 16px;
      box-sizing: border-box;
      outline: none;
    }

    /* ===== CHALLENGE EXERCISES ===== */
    .challenge{
      margin-top: 18px;
      background: #3f3030;
      padding: 24px;
      border-radius: 10px;
      color: #fff;
    }

    .challenge-title{
      margin: 0 0 16px;
      font-size: 34px;
      font-weight: 800;
      color: #ff2a2a;
      text-decoration: none;
    }


    .challenge-cols{
      font-size: 0;              
      white-space: nowrap;
    }

    .col{
      display: inline-block;
      vertical-align: top;
      width: 470px;
      font-size: 16px;            
    }

    .col + .col{
      margin-left: 20px;
    }


    .signup-card{
      background: linear-gradient(135deg, #2b0303, #d9bdbd);
      color: #000;
      width: 470px;
      padding: 18px;
      border-radius: 12px;
      box-sizing: border-box;
    }

    .signup-card input{
      display: block;
      width: 100%;
      padding: 16px;
      margin-bottom: 14px;
      border: 1px solid #196fa0;
      border-radius: 10px;
      font-size: 18px;
      box-sizing: border-box;
    }

    .signup-btn{
      width: 100%;
      padding: 18px;
      border: none;
      border-radius: 12px;
      background: #2b6ff3;
      color: #eedcdc;
      font-weight: 700;
      cursor: pointer;
      font-size: 20px;
    }

    :hover .signup-btn{
      background: #3e59a5;
    }


    .uber-card{
    background: linear-gradient(to right, rgb(86, 63, 63) 0%, rgb(81, 17, 17) 100%);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      color: #000;
      width: 450px;
      padding: 18px;
      border-radius: 12px;
      box-sizing: border-box;
    }

    .uber-title{
      margin: 0 0 18px;
      font-size: 36px;
      font-weight: 900;
      letter-spacing: -1px;
      line-height: 1;
    }

    .uber-card input{
      display: block;              
      width: 100%;                 
      padding: 18px 16px;
      margin-bottom: 14px;
      border: none;
      background: #efefef;
      font-size: 18px;
      box-sizing: border-box;
    }

    .uber-actions{
      white-space: nowrap;
    }

    .uber-actions button{
      display: inline-block;
      padding: 14px 20px;
      border: none;
      cursor: pointer;
      font-size: 16px;
      margin-right: 12px;
      border-radius: 2px;
    }

    .btn-black{ background:#000; color:#fff; }
    .btn-gray{ background:#e5e5e5; color:#000; }