/* CSS Document */

/* 
    10jun2023
        Add Google Fonts
*/


html {
    font-size: 28px
}

body {
    padding-top: 100px;
    background-color: gray;
    /* font-family: 'Abril Fatface', cursive; */

}

.ic_swap1 {
    line-height: 0.17;
    display: none;
}

.main,
.ic_swap1,
.ic_swap2 {
    text-align: center;
    /* font-size: 28px; */
    font-weight: bold;
    color: white;
    text-shadow: 3px 2px 2px gray;
    text-size-adjust: none;
}

img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* Auto Fit to Devices */
/* 
    iPhone XR: 414 x 896
    iPhone 12 Pro: 390 x 844
    iPad Air: 820 x 1180
    PC Full HD: 1920 x 1080
    2K: 2048 x 1080

    min-width: 768px
    min-width: 992px
    min-width: 1200px

*/

/* Samll devices. (landscape phones) */
/* Swap First Row */
@media only screen and (max-width: 576px) {
    .ic_swap1 {
        display: inline;
    }

    .ic_swap2 {
        display: none;
    }
}

/* Medium devices (tablets, 768 px and up) */

/* Large devices (desktop) */
@media only screen and (min-height: 750px) {
    body {
        padding-top: 200px;
    }
}

@media only screen and (min-width: 992px) {

    .main,
    .ic_swap1,
    .ic_swap2 {
        font-size: 3vw;
    }

    img {
        width: 100%;
        height: 100%;
    }
}

/* Extra large devices */
@media only screen and (min-height: 880px) {
    body {
        padding-top: 260px;
    }
}

@media only screen and (min-width: 1200px) and (min-height: 880px) {

    body {
        padding-top: 260px;
    }

    .main,
    .ic_swap1,
    .ic_swap2 {
        font-size: 1.36rem;
    }

    img {
        width: 100%;
        height: 100%;
    }
}

/* When super-high */
@media only screen and (min-height: 1000px) {
    body {
        padding-top: 380px;
    }
}