/* Style for all three component pages */
body {
    width: 98vw;
    margin: 0%;
}

.main {
    width: 97vw;
    height: 100vh;
    float: center;
    margin-left: 0.7%;
    padding-top: -2vh;
} 

h1 {
    text-align: center;
    text-decoration: underline;
}

.componentimage {
    float: left;
    margin-right: 1.5vw;
}

.componentimage img {
    width: 30vw;
    border-radius: 1vw;
    box-shadow: .4vw 0.6vh 0.8vw black;
}

.info {
    font-size: 1.6vw;
}

.info p {
    text-indent: 4vw;
    font-size: 1.6vw;
}

.info-list {
    margin-left: 40vw;
    font-size: 1.6vw;
}

.bridgeItems {
    font-weight: bold;
}

.footnote {
    background-color: darkseagreen;
    border-radius: 1vw;
}

#noteSource {
    font-size: .85vw;
    text-align: center;
}

/* Samsung Surface Pro 7 portrait */
@media only screen and (max-width: 920px) and (max-height: 1380px) {
    .componentimage {
        float: left;
        margin-right: 1.5vw;
    }
    
    .componentimage img {
        width: 35vw;
        margin-left: -1vw;
        border-radius: 1vw;
        box-shadow: .4vw 0.6vh 0.8vw black;
    }

    .info p {
        font-size: 3vw;
        margin-left: 1vw;
    }

    .info-list {
        font-size: 3vw;
        margin-left: 5vw;
    }
}

/* iPad Mini landscape */
@media only screen and (max-width: 1030px) and (max-height: 775px) {
    .info p {
        font-size: 2.5vw;
        text-indent: 4vw;
        margin-left: 1vw;
    }

    .info-list {
        font-size: 2.5vw;
        margin-left: 4vw;    
    }
}

/* iPad Mini portrait */
@media only screen and (max-width: 775px) and (max-height: 1030px) {
    .info p {
        font-size: 3.2vw;
        text-indent: 4vw;
        margin-left: 1vw;
    }

    .info-list {
        font-size: 3.2vw;
        margin-left: 4vw;    
    }
}

/* Galaxy S8 landscape */
@media only screen and (max-width: 750px) and (max-height: 370px) {
    .info p {
        font-size: 2.5vw;
        text-indent: 4vw;
        margin-left: 1vw;
    }

    .info-list {
        font-size: 2.5vw;
        margin-left: 4vw;    
    }
}

/* Galaxy S8 portrait */
@media only screen and (max-width: 370px) and (max-height: 750px) {
    .componentimage img {
        width: 40vw;
        margin-left: 0.8vw;
        border-radius: 1vw;
        box-shadow: .4vw 0.6vh 0.8vw black;
    }    
}

/* Samsung Galaxy Fold landscape */
@media only screen and (max-width: 730px) and (max-height: 550px) {
    .componentimage {
        float: left;
        margin: 0vh 1.5vw 0vh 1vw;
    }
    
    .componentimage img {
        width: 40vw;
        border-radius: 1vw;
        box-shadow: .4vw 0.6vh 0.8vw black;
    }

    .info-list {
        margin-left: 5vw;
    }
}

/* Samsung Galaxy Fold portrait */
@media only screen and (max-width: 550px) and (max-height: 730px) {
    .componentimage {
        float: left;
        margin: 0vh 1.5vw 0vh 1vw;
    }
    
    .componentimage img {
        width: 40vw;
        border-radius: 1vw;
        box-shadow: .4vw 0.6vh 0.8vw black;
    }

    .info p {
        font-size: 3vw;
        text-indent: 4vw;
        margin-left: 1vw;
    }

    .info-list {
        font-size: 3vw;
        margin-left: 4vw;    
    }
}

/* Google Pixel 5 landscape */
@media only screen and (max-width: 860px) and (max-height: 400px) {
    .info p {
        font-size: 2vw;
        text-indent: 4vw;
        margin-left: 1vw;
    }

    .info-list {
        font-size: 2vw;
        margin-left: 35vw;    
    }
}

/* Google Pixel 5 portrait */
@media only screen and (max-width: 400px) and (max-height: 860px) {
    .componentimage img {
        margin-left: 0.8vw;
    }
}

/* Samsung A51 landscape */
@media only screen and (max-width: 920px) and (max-height: 420px) {
    .info p {
        font-size: 2vw;
        text-indent: 4vw;
        margin-left: 1vw;
    }

    .info-list {
        font-size: 2vw;
        margin-left: 35vw;    
    }
}

/* Samsung A51 portrait */
@media only screen and (max-width: 420px) and (max-height: 920px) {
    .componentimage img {
        margin-left: 0.8vw;
    }
}

@media only screen and (max-width: 479px) {

    .componentimage {
        float: center;
        margin: 0vh 0vh 1.5vh 1vw;
    }

    .componentimage img {
        width: 95vw;
        border-radius: 1vw;
        box-shadow: .4vw 0.6vh 2vw black;
    }
    
    .info p {
        font-size: 3.5vw;
        text-indent: 4vw;
        margin-left: 1vw;
    }

    .info-list {
        font-size: 3.5vw;
        margin-left: 4vw;    
    }

    .footnote {
        font-size: 2.75vw;
        border-radius: 2vw;
    }
    
    #noteSource {
        font-size: 2.25vw;
        text-align: center;
    }
}