@import url("app.css");
@import url("nav.css");
@import url("page.css");
@import url("link.css");
@import url("viewport.css");

#content {
    display: flex;
    min-height: calc(100vh - 100px);
    align-items: center;
    justify-content: center;
}

blockquote {
    margin-left: 0;
}

blockquote p {
    opacity: .8;
    padding: 10px;
    border-left: #aed6f1 solid 6px;
}

table {
    width: 100%;
}

thead {
    background: #f2f3f4;
}

th {
    text-align: left;
}

.box {
    display: flex;
    margin: 10px;
    align-items: center;
}

.box input[type=range] {
    width: 100%;
}

.box label {
    text-align: right;
    width: 50px;
}

#toolbar {
    height: 50px;
    padding: 0 26px;
    align-content: center;
}

#annotations {
    width: 960px;
    height: calc((100% - 600px)/2 - 52px);
    margin: 0 auto;
    bottom: 26px;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
}

#annotations ul {
    width: 600px;
    height: 100%;
    margin-left: 0;
    padding: 0;
    overflow: auto;
}

#annotations li {
    padding: 10px;
    list-style: none;
    border-top: 1px solid #ccc;
}

#annotations a {
    display: block;
}

/**
 * iPhone 5             : 320 x 568
 * iPhone 6/7/8         : 375 x 667
 * iPhone 11 Pro        : 375 x 812
 * Pixel 7              : 412 x 915
 * iPhone 6/7/8 Plus    : 414 x 736
 * iPhone 11            : 414 x 896
 * iPhone 12/14         : 390 x 844
 * iPhone 14/15 Pro Max : 430 x 932
 */
@media
only screen and (min-width: 320px) and (max-width: 430px) and (orientation: portrait),
only screen and (min-width: 568px) and (max-width: 932px) and (orientation: landscape) {
    
}

/**
 * iPad Mini       :  768 x 1024
 * iPad 10.2       :  810 x 1080
 * iPad Air (2020) :  820 x 1180
 * iPad Air        :  834 x 1112
 * iPad Pro 11     :  834 x 1194
 * iPad Pro 12.9   : 1024 x 1366
 */
@media
only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait),
only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    
}