:root{
    --bg:#fff;
    --muted:#5f6368;
    --input:#f1f3f4;
    --accent: #1a73e8;
    font-family: "Roboto", Arial, sans-serif;
    }
    html,body{height:100%;}
    body{
    margin:0;
    background:var(--bg);
    color:#202124;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    }
    .content{
    width:100%;
    max-width:760px;
    padding:24px;
    box-sizing:border-box;
    text-align:center;
    }
    .logo{
    font-size:92px;
    font-weight:700;
    letter-spacing:-6px;
    margin-top:60px;
    margin-bottom:30px;
    user-select:none;
    line-height:1;
    }
    .logo span{display:inline-block}
    .logo .g{color:#4285F4}
    .logo .o1{color:#EA4335}
    .logo .o2{color:#FBBC05}
    .logo .g2{color:#4285F4}
    .logo .l{color:#34A853}
    .logo .e{color:#EA4335}
    .search-box{
    display:flex;
    align-items:center;
    border-radius:24px;
    background:var(--input);
    padding:10px 14px;
    box-shadow:0 1px 6px rgba(32,33,36,0.08);
    margin:0 auto;
    max-width:640px;
    }
    .search-box input{
    border:0;
    outline:none;
    background:transparent;
    font-size:18px;
    flex:1;
    padding:8px 10px;
    }
    .search-icon{
    width:24px;
    height:24px;
    opacity:0.6;
    margin-right:8px;
    }
    .buttons{margin-top:18px}
    .btn{
    border:1px solid #dadce0;
    background:#f8f9fa;
    padding:10px 16px;
    border-radius:4px;
    margin:0 6px;
    font-size:14px;
    cursor:pointer;
    }
    .btn:hover{box-shadow:0 1px 2px rgba(60,64,67,0.2)}
    .footer{margin-top:80px;color:var(--muted)}
    @media(max-width:480px){
    .logo{font-size:64px}
    .search-box{margin:0 12px}
    }