$background: #263238;
$foreground: #fff;
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.roboto {
    font-family: 'Roboto', sans-serif;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $background;
    color: $foreground;
    @extend .roboto;
}

.main {
    width: 100%;

    #search-bar {
        width: 50%;
        margin: 0 auto;
        height: 45px;

        input {
            height: inherit;
            width: 100%;
            background: lighten($background, 5);
            box-shadow: none;
            border: none;
            text-align: center;
            border-radius: 6px;
            outline: none;
            padding: 7px 14px;
            font-size: 18px;
            color: $foreground;

            &:focus {
                box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                transition: all 0.3s cubic-bezier(.25,.8,.25,1);
            }
            
        }
    }
}