* {
    padding: 0;
    margin: 0;
    box-sizing:border-box;
    user-select: none;
}

body, html {
    height: 100%;
}

body {
    background-image: url(https://wallpapercave.com/wp/jo03lI2.jpg);
    background-size: 120%;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.window {
    position: absolute;
    background-color: #3c415370;
    backdrop-filter: blur(3px);
    box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.452), 0px 0px 2px 1px white inset;
    border: 1px solid black;
    border-radius: 7px;
    display: flex;
    padding: .8%;
    flex-direction: column;
    overflow: hidden;

    .title {
        position: relative;
        display: flex;
        align-items: center;
        height: 8%;
        margin-bottom: 2%;
        .wicon {
            object-fit: contain;
            height: 80%;
        }
        p {
            margin-left: 1%;
            filter: drop-shadow(0px 0px 5px white);
            font-size: 90%;
            font-family: Arial, Helvetica, sans-serif;
            color: white;
        }

    }

    .innerwindow {
        position: relative;
        overflow: hidden;
        border: 1px solid black;
        box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.541);
        border-radius: 4px;
        background-color: white;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #diary {
        .btnarray {
            padding: 2%;
            display: flex;
            font-family: Arial, Helvetica, sans-serif;
            width: 100%;
            height: 10%;
            background: linear-gradient(to bottom, white 0%, rgb(156, 156, 156) 80%, rgb(199, 199, 199) 100%);
            border-bottom: 1px solid gray;
            align-items: center;
            
            * {
                font-size: 1vw;
                margin-right: 4%;
            }
            div::first-letter {
                text-decoration: underline;
            }
            a {
                width: fit-content;
                height: 100%;
                margin-left: auto;
                filter: drop-shadow(0px 0px 5px black);
                img {
                    height: 100%;
                    object-fit: contain;
                }
            }

        }

        .content {
            padding: 2%;
            overflow-y: scroll;
            width: 100%;
            height: 100%;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            gap: 4%;
            div {
                margin-left: 2%;
            }
            p {
                margin-left: 6%;
            }
        }
    }

}

.ui {
    border: 3px solid black;
    background-image: url(https://wallpapercave.com/wp/PfgUkZM.png);
    background-size: contain;
    background-position: center;
    aspect-ratio: 16/10;
    width: 65%;
    display: flex;
    box-shadow: 0px 0px 8px 3px rgba(255, 255, 255, 0.452);
    position: relative;

    .fileicon {
        display: flex;
        flex-direction: column;
        position: absolute;
        width: 7%;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        cursor: pointer;
        color: white;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        img {
            object-fit: contain;
            width: 100%;
        }
        p {
            filter: drop-shadow(0px 0px 3px rgb(255, 255, 255));
            font-size: small;
            line-break: anywhere;
        }
    }

    .hotbar {
        width: 100%;
        border-top: 1px solid rgb(51, 51, 51);
        height: 8%;
        margin-top: auto;
        backdrop-filter: blur(3px);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.459) 0%,rgba(255, 255, 255, 0.459) 10%, rgba(255, 255, 255, 0.295) 20%, rgba(0,0,0,0) 80%);
        display: flex;
        align-items: center;

        .os {
            height: 80%;
            object-fit: contain;
            margin: 0% 1.5% 0% 1.5%;
        }

        .icon {
            margin-right: 1%;
            background: linear-gradient(130deg, rgba(255, 255, 255, 0.5) 0%, rgba(0,0,0,0) 40%), linear-gradient(310deg, rgba(255, 255, 255, 0.5) 0%, rgba(0,0,0,0) 40%);
            box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.726) inset;
            aspect-ratio: 1.5/1;
            border: .5px solid rgb(51, 51, 51);
            border-radius: 3px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: .6%;
            transition: .1s;
            #midas {
                height: 120%;
            }
            img {
                filter: drop-shadow(0px 0px 3px black);
                height: 100%;
                object-fit: contain;
            }
        }

        .icon:hover {
            background-color: rgba(238, 238, 238, 0.13);
        }

        .icon:active {
            background-color: rgba(0, 0, 0, 0.199);
        }

        .info {
            width: 19%;
            height: 100%;
            display: flex;
            margin-left: auto;
            margin-right: 1%;
            align-items: center;
            color: white;
            justify-content: space-evenly;
            align-items: center;
            .infoicons, .datentime{
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
            }
            .infoicons {
                margin-left: -10%;
                * {
                    font-size: 1.7vw;
                }
                #js {
                    font-size: 4vw;
                }
            }
            .datentime {
                margin-left: auto;
                flex-direction: column;
                font-family: Arial, Helvetica, sans-serif;
                font-size: .9vw;
            }
        }

        .home {
            width: 2%;
            border-left: 1px solid rgb(51, 51, 51);
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.438) 0%, rgba(0,0,0,0) 40%);
            height: 100%;
            box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, 0.534) inset;
        }

        .home:hover {
            background-color: rgba(238, 238, 238, 0.13);
        }

        .home:active {
            background-color: rgba(0, 0, 0, 0.199);
        }

    }

}

.mobile-tip {
    display: none;
}

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

    body {
        background: white;
    }

  .ui {
    display: none;
  }
  .mobile-tip {
    display: flex;
    width: 100%;
    height: 100%;
    background-image: url(https://wallpapercave.com/wp/lhJgkef.jpg);
    background-size: 400%;
    background-position: right;

    .note {
        position: absolute;
        aspect-ratio: 1/1.1;
        width: 55%;
        right: 10%;
        bottom: 20%;
        z-index: 0;
        border-radius: 10px;
        box-shadow: 0px 8px 9px 1px black;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%,rgb(219, 210, 124) 100%);
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .notebar {
            flex: 1;
            z-index: 1;
            background-image: linear-gradient(to bottom, rgb(146, 84, 57) 0%, rgb(95, 52, 34) 60%, rgb(70, 36, 22) 100%);
            box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.925);
            display: flex;
            justify-content: space-between;
            padding-inline: 3%;
            align-items: center;
            color: white;
            font-weight: bolder;
            font-family: Arial, Helvetica, sans-serif;
            text-shadow: 0px 0px 3px black;

            div {

                box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.548) inset, 0px 0px 3px 1px rgba(0,0,0,0.54);
                font-style: italic;
                font-size: 3vw;
                border: 1px solid rgba(202, 202, 202, 0.459);
                padding: 3% 5% 3% 7%;
                border-radius: 10px;

            }

            p {

                margin: auto;

            }

        }

        .content {
            font-family: Arial, Helvetica, sans-serif;
            z-index: 0;
            flex: 5;
            overflow-y: auto;
            margin-left: 8%;
            border-left: 2px solid rgb(189, 103, 100);
            padding-left: 4%;
            padding-top: 8%;

            div {
                margin-bottom: 5%;
                
                p {
                    margin-left: 7%;
                }
            }

        }


    }

    .fileicon {
        position: absolute;
        top: 0;
        left: 0;
        width: fit-content;
        width: 15%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        color: white;
        text-shadow: 0px 0px 6px black;

        img {
            aspect-ratio: 1;
            border: 1px solid white;
            width: 100%;
            padding: 11%;
            object-fit: contain;
            border-radius: 10px;
            backdrop-filter: blur(3px);
            box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.568) inset;
            filter: drop-shadow(0px 0px 5px black);
            background-color: rgba(255, 255, 255, 0.151);
        }
        p {
            margin-top: 3%;
            width: fit-content;
            filter: drop-shadow(0px 0px 5px black);
        }

    }

    .approw {

        display: flex;
        position: absolute;
        bottom: 0;
        margin: auto;
        width: 100%;
        height: 15%;

        .row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 2%;
            margin: 4%;
            flex: 1;
            overflow: hidden;
            background-color: rgba(211, 255, 252, 0.1);
            backdrop-filter: blur(2px);
            border-radius: 3px;
            box-shadow: 0px 0px 9px 1px rgba(241, 241, 241, 0.5) inset, 0px 0px 4px 1px rgba(0,0,0,.4);
            .icon {
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                padding: 4%;
                aspect-ratio: 1;
                color: white;
                overflow: hidden;
                img {
                    max-height: 10vh;
                    height: 100%;
                    object-fit: contain;
                }
                div {
                    font-size: 18vw;
                }
            }
        }

    }

    .bar {
        position: relative;
        z-index: 1;
        background-color: #181818;
        height: fit-content;
        width: 100%;
        display: flex;
        padding-left: 2%;
        padding-right: 2%;
        align-items: center;
        color: rgb(110, 110, 110);
        font-family: Arial, Helvetica, sans-serif;
        justify-content: space-between;
        div {
            height: 100%;
            text-align: center;
            display: flex;
            align-items: center;
            * {
                font-size: 4vw;
                font-weight: 600;
            }
            .material-symbols-sharp {
                font-size: 7vw;
            }
            #java {
                font-size: 8vw;
            }
        }
    }
  }
}