html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

a:link, a:visited, a:focus, a:active {
    color:inherit;
    text-decoration:dotted;
    }

a:hover {
    color: gray;
}

body {
    padding: 0;
    margin: 0;
    background-color: #282828;
    color: #2A2B8A;
    font-family: Roboto, Arial, Helvetica, sans-serif;
}

/* Styles for PCs/Desktops (e.g., screens wider than 1024px) */

@media screen and (hover: hover) {

    #center {
        right: 8%;
        bottom: 10%;
        padding: 20px 20px 20px 20px;
        background-color: lightyellow;
        opacity: 0.5;
        z-index: 10;
    }

    #portfolio-box {
        margin-right: 10%;
        margin-bottom: 10%;
        margin-left: 10%;
        margin-top: 10%;
        background-color: lightyellow;
    }

    .header {
        position: fixed;
        z-index: 15;
        display: flex;
        top: 0%;
        left: 0%;
        width: 100%;
        background-color: #2A2B8A;
        height: 50px;
        opacity: 1.0;
        vertical-align: central;
        align-items: center;
        padding-left: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #headleft {
        float: left;
        width: 30%;
        z-index: 15;
        top: 0%;
        left: 0%;
        background-color: #2A2B8A;
        height: 50px;
        opacity: 1.0;
        vertical-align: central;
        align-items: center;
    }

    #headright {
        float: right;
        width: calc(70% - 30px);
    }

    .headtext {
        text-align: right;
        color: white;
        font-weight: bold;
        font-size: 12px;
        padding-right: 30px;
        letter-spacing: 2px;
    }

    #headclear {
        clear:both;
    }

    #buffer {
        margin-top: 100px;
    }

    .logoimage {
        height: 100%;
        width: 100%;
        object-fit: contain;
        object-position: left;
    }

    #container {
        width: 80%;
        max-width: 1000px;
        margin-top: 50px;
        margin-bottom: 50px;
        margin-left: 10%;
        margin-right: 90%;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 1.1px 2.2px 2.2px hsl(0deg 0% 0% / 0.27);
    }

    #first, #firstimg {
        width: 50%;
        float: left;
        height: 300px;
        background-color: transparent;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        overflow: hidden;
    }

    #second {
        width: 50%;
        float: right;
        min-height: 300px;
        background-color: #D5D1C6;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        overflow:hidden;
    }

    .itemhead {
        padding-top: 18px;
        padding-left: 25px;
        padding-right:18px;
        font-weight:bold;
        font-size: 22px;
        letter-spacing: 2px;
    }

    .itemdesc {
        padding-top: 18px;
        padding-left: 25px;
        padding-right: 18px;
        padding-bottom: 18px;
        font-size: 15px;
        letter-spacing: 2px;
    }

    #clear {
        clear: both;
    }

    #jp-title {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
    }

    #eng-title {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
        margin-top: 15px;
        margin-bottom: 30px;
    }

    #desc {
        font-family: Arial, Helvetica, sans-serif;
        font-kerning: normal;
        font-size: 14px;
        margin-bottom: 0px;
        margin-top: 10px;
    }

    .preview {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .previewimage {
        top: auto;
        left: auto;
        object-fit: cover;
        z-index: 3;
        opacity: 1.0;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        overflow: hidden;
    }

    .thumbnail {
        display: none;
    }

    .thumbnailimage {
        top: auto;
        left: auto;
        height: 100%;
        object-fit: cover;
        z-index: 3;
        opacity: 1.0;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        overflow: hidden;
    }

        .preview video {
            top: auto;
            left: auto;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 3;
            opacity: 1.0;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }


    .previewimage {
        top: auto;
        left: auto;
        width: 100%;
        object-fit: cover;
        z-index: 3;
        opacity: 1.0;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        overflow: hidden;
    }
}

/* Styles for mobile  */
/* @media screen and (max-width: 800px) { */
@media screen and (hover:none) {

    a:link, a:active, a:visited, a:focus {
        text-decoration:none;
    }

    #center {
        position: absolute;
        right: 8%;
        left: 8%;
        bottom: 8%;
        padding: 20px 20px 20px 20px;
        background-color: lightyellow;
        opacity: 0.5;
        z-index: 10;
    }

    #portfolio-box {
        margin-right: 10%;
        margin-bottom: 10%;
        margin-left: 10%;
        margin-top: 10%;
        background-color: lightyellow;
    }

    .header {
        position: fixed;
        z-index: 15;
        display:flex;
        top: 0%;
        left: 0%;
        width: 100%;
        background-color: #2A2B8A;
        height: 100px;
        opacity: 1.0;
        align-items:center;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom:20px;
    }

    #headleft {
        float: left;
        width: 30%;
        z-index: 15;
        top: 0%;
        left: 0%;
        height: 100px;
        opacity: 1.0;
        vertical-align: central;
        align-items: center;
    }

    #headright {
        float: right;
        width: calc(70% - 30px);
    }

    .headtext {
        text-align: right;
        color: white;
        font-weight: bold;
        padding-right: 30px;
        font-size: 27px;
        letter-spacing: 4px;
    }

    #headclear {
        clear: both;
    }

    #buffer {
        margin-top:180px;
    }

    #container {
        width: 80%;
        max-width: 1000px;
        margin-top: 10%;
        margin-bottom: 10%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 11px;
        overflow: hidden;
        box-shadow: 1.1px 2.2px 2.2px hsl(0deg 0% 0% / 0.27);
    }

    #first {
        width: 100%;
        height: 420px;
        position: relative;
        background-color: transparent;
        border-top-left-radius: 11px;
        border-top-right-radius: 11px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        overflow: hidden;
    }

    #firstimg {
        width: 100%;
        height: 420px;
        background-color: transparent;
        border-top-left-radius: 11px;
        border-top-right-radius: 11px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        overflow: hidden;
    }

    #second {
        width: 100%;
        min-height: 300px;
        background-color: #D5D1C6;
        border-bottom-left-radius: 11px;
        border-bottom-right-radius: 11px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        overflow: hidden;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 20px;
    }

    #clear {
        clear:none;
    }

    .itemhead {
        padding-top: 30px;
        padding-left: 30px;
        padding-right: 20px;
        padding-bottom: 30px;
        font-weight: bold;
        font-size: 45px;
        letter-spacing: 2px;
    }

    .itemdesc {
        padding-left: 30px;
        padding-right: 20px;
        padding-bottom: 30px;
        font-size: 32px;
        letter-spacing: 4px;
        line-height: 40px;
        
    }

    #jp-title {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
    }

    #eng-title {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 26px;
        font-weight: bold;
        margin-top: 15px;
        margin-bottom: 30px;
    }

    #desc {
        font-family: Arial, Helvetica, sans-serif;
        font-kerning: normal;
        font-size: 26px;
        margin-bottom: 0px;
        margin-top: 10px;
    }

    .pcvideo video {
        display: none;
    }

    .mobilevideo video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 3;
        opacity: 1.0;
    }

    .logoimage {
        height:100%;
        width: 100%;
        object-fit:contain;
        object-position:left;
    }

    .thumbnail {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        z-index:3;
    }

    .thumbnailimage {
        top: auto;
        left: auto;
        width: 100%;
        object-fit: cover;
        z-index: 3;
        opacity: 1.0;
        border-top-left-radius: 11px;
        border-bottom-left-radius: 11px;
        overflow: hidden;
    }

    .preview {
        position:absolute;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-top-left-radius: 11px;
        border-top-right-radius: 11px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .previewimg {
        top:0;
        left:0;
        width: 100%;
        border-top-left-radius: 11px;
        border-top-right-radius: 11px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

        .preview video {
            top: auto;
            left: auto;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 3;
            opacity: 1.0;
            border-top-left-radius: 11px;
            border-top-right-radius: 11px;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }

    .previewimage {
        top: auto;
        left: auto;
        width: 100%;
        object-fit:cover;
        z-index: 3;
        opacity: 1.0;
        border-top-left-radius: 11px;
        border-bottom-left-radius: 11px;
        overflow: hidden;
    }

}