/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#ffffff;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
    width:100%;
}

/* Portrait layout (default) */
.app {
    position:relative;             /* position in the center of the screen */
    left:0%;
    top:0%;
    text-align:left;
    padding:10px 10px 10px 10px;     /* image height is 200px (bottom 20px are overlapped with text) */

                                   /* offset horizontal: half of text area width */
}

.titlelink {
    display: inline;
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        overflow-wrap: break-word;
        background-position:left center;
        padding:10px 10px 10px 10px;  /* padding-top + padding-bottom + text area = image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

h1 {
    font-size:200%;
    font-weight:normal;
    margin:0px;
    overflow:visible;
    padding:0px;
    text-align:left;
}

.refrain {
    font-style: italic;
    margin:0px;
}

p.song.no-chords {
    margin: 0;
}

p.song.show-chords p {
  line-height:2.3em;
  margin-bottom:2em;
}

.chord { /* some general properties of chords */
  position: relative;
  display:inline-block;
  overflow:visible;
  font-weight:bold;
  font-family:Arial, Helvetica, sans-serif;
  white-space: nowrap;
}

.display-chord { /* The chord above the line */
  top: -1em;
  width: 0;
}

.spacing-chord { /* The invisible chord to make enough space. */
  color: #ffffff;
}