@font-face {
    font-family: Homestuck;
    src: url(assets/TYPOSTUCK\ \(Slightly\ better\ classic\ Homestuck\ font\)\(1\).ttf);
}


* {
    cursor: var(--cursor);
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    a {
        text-decoration: none;
        color: inherit;
    }
}

:root {
    --cursor: uhhh;
    --border-size: 6px;
    --border-color: rgb(114, 114, 114);
    --box-shadow: 0px 0px 27px -4px rgba(0,0,0,0.79);
    --background: linear-gradient(to bottom, rgba(168, 168, 168, 1) 0%, rgb(82, 82, 82) 100%);
    --box-light: 0px 0px 10px rgba(211, 211, 211, 1) inset;

    @media only screen and (min-width: 600px) {
        --vw: 710px;
    }

    @media only screen and (min-width: 768px) {
        --vw: 800px;
    }

    @media only screen and (min-width: 992px) {
        --vw: 920px;
    }

    @media only screen and (min-width: 1200px) {
        --vw: 1000px;
    } 
}

.mobile {
    display: none;
}

#note {
    image-rendering: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: absolute;
    object-fit: contain;
    display: flex;
    justify-content: center;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e5/Post-it-note-transparent.png);
    width: 25%;
    height: 45%;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat no-repeat;
    background-size: 100%;
    left: 50%;
    top: 50%;
    h1 {
        max-width: 75%;
        font-weight: 400;
        position: absolute;
        top: 10%;
        font-size: 90%;
        rotate: 1deg;
    }
}

.desktop-viewer {
    display: flex;
    .background {
        animation: slide 60s linear infinite alternate;
        position: fixed;
        top: 0;
        z-index: -1;
        height: 100%;
        width: 300%;
        background-size: 35%;
        background-image: url(https://opengameart.org/sites/default/files/oga-textures/146572/puffy_sky-blue_04-512x512.png);
    }
    .desktop {
        font-family: Homestuck;
        box-shadow: var(--box-shadow);
        margin: auto;
        margin-top: 5%;
        display: flex;
        flex-flow: column;
        width: calc(var(--vw)/1.15);
        height: calc(var(--vw)/2);
        overflow: scroll;
        border: var(--border-size) solid var(--border-color);
        .screen {
            display: flex;
            position: relative;
            height: 100%;                
            z-index: 2;
            overflow: hidden;
            .widget {
                .janela1, .janela2, .divider {
                    position: relative;
                    z-index: 1;
                }
                top: 15%;
                right: 20%;
                color: white;
                font-family:  Arial, Helvetica, sans-serif;               
                border-radius: 5px;
                width: 30%;
                height: fit-content;
                position: relative;
                z-index: -1;
                background: linear-gradient(to bottom, rgba(108, 184, 255, 0.9), rgba(12, 82, 173, 0.9));
                box-shadow: 0px 0px 17px -4px rgba(231, 231, 231, 0.79) inset;
                .janela1 {
                    font-size: 70%;
                    padding: 4%;
                    padding-bottom: 5%;
                    padding-top: 5%;
                    display:flex;
                    align-items: center;
                    gap: 9%;
                    .location {
                        display: flex;
                        align-items: center;
                        gap: 3%;
                    }                    
                }
                .divider {
                    background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 100%);
                    display:flex;
                    justify-content: center;
                    height: 1px;
                    opacity: 40%;
                }
                .janela2 {
                    background-color: rgba(12, 82, 173, 0.4);
                    font-size: 70%;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 2%;
                    border-radius: 0px 0px 5px 5px;
                    .info {
                        width: 80%;
                        align-items: center;
                        display: flex;
                        justify-content: end;
                        gap: 8%;
                        div {
                            justify-content: center;
                            align-items: center;
                            display: flex;
                        }
                        * {
                        font-size: .75vw;
                        }
                    }
                }
            }
            #widgeteffect {
                image-rendering: auto;
                position: absolute;
                object-fit: contain;
                width: 53%;
                left: 65%;
                bottom: 25%;
            }
            #widgeticon {
                image-rendering: auto;
                position: absolute;
                object-fit: contain;
                width: 40%;
                bottom: 40%;
                left: 74%;
            }
            ul {
                width: 100%;
                .profile {
                    left: 13%;
                    top: 5%;
                }
                .gerador {
                    left: 13%;
                    top: 3%;
                }
                .comms {
                    top: 5%;
                    left: 2%;
                }
                li {
                    list-style-type: none;
                    position: relative;
                    width: 15%;
                    a:hover {
                        h1 {
                            background: linear-gradient(to bottom, white, gray);
                            color: black;
                        }
                    }
                    a {
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        align-items: center;
                        h1 {
                            border: calc(var(--border-size)/3) solid var(--border-color);
                            font-size: 90%;
                            line-break: anywhere;
                            color: white;
                            font-weight: 200;
                            padding: 8%;
                            padding-bottom: 2%;
                            padding-top: 2%;
                            background: var(--background);
                            box-shadow: var(--box-light);

                        }                    
                        img {
                            object-fit: contain;
                            width: 40%;
                            margin-bottom: 9%;
                            filter: drop-shadow(0 0.2rem 0.25rem rgb(0, 0, 0));
                        }
                        div {
                            color: white;
                        }
                    }
                }
            }
            .bg {
                position:absolute;
                width: 100%;
                height: 100%;
                background-image: url(https://images7.alphacoders.com/324/thumb-350-324431.webp);
                background-position: center;
                background-size: cover;
                filter: grayscale(28%) sepia(28%) brightness(71%);
                image-rendering: pixelated;
                z-index: -1;
            }
        }

        .footer {
            background: var(--background);
            overflow: hidden;
            border-top: var(--border-size) solid var(--border-color);
            display: flex;
            .tools {
                display: flex;
                box-shadow: var(--box-light);
                .array {
                    box-shadow: var(--box-light);
                    width: 50%;
                    margin: auto;
                    border: calc(var(--border-size)/3) solid rgb(197, 197, 197);
                    display: flex;
                    justify-content: space-around;
                    img  {
                        width: 8%;
                        margin: 0.2%;
                    }
                }
            }
            img {
                object-fit: contain;
            }
            #os {
                width: 5%;
                margin: .5%;
                margin-left: 2%;
                margin-right: 0%;                
            }
            .hora {
                width: 60%;
                border-left: calc(var(--border-size)/1.5) solid var(--border-color);
                padding: .4%;
                display: flex;
                flex-flow: row;
                box-shadow: var(--box-light);
                justify-content: space-evenly;
                .icones {
                    color: white;
                    display: flex;
                    * {
                        margin: auto;
                        font-size: 1.4vw;
                    }
                }
                .horarios {
                    h1 {
                        text-align: right;
                        font-family: Arial, Helvetica, sans-serif;
                        color: white;
                        font-size: .9vw;
                        font-weight: 400;
                        margin: 18%;
                        margin-right: 0px;
                        margin-left: 0px;
                    }
                    #hora {
                        margin-bottom: 0px;
                    }
                    #dia {
                        margin-top: 0px;
                    }                    
                }              
            }
        }
    }
}

@media only screen and (max-width: 600px) {
    .desktop-viewer {
        display: none;
    }
    html,body {
        height: 100%;
    }
    body {
        background-image: url(https://i.pinimg.com/736x/70/5c/68/705c68f44db40fcf92d33659d78c2b99.jpg);
        background-size: 130%;
    }

    #smile,#browser,#file,#pester,#paste {
        img {
            object-fit: contain;            
            image-rendering: pixelated;
            width: 100%;
            padding: 16%;
            aspect-ratio: 1/1;
            filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.925));            
        }
        width: 20%;
        aspect-ratio: 1/1;
        border-radius: 10px;
        filter: drop-shadow(0px 4px 1px rgba(10, 10, 10, 0.555));
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.63) inset;
    }

    #pester {
        img {
            image-rendering: auto;
        }
        background: linear-gradient(to bottom, rgb(255, 208, 0), rgb(238, 95, 0));
    }

    #file {
        background: linear-gradient(to bottom, blue, rgb(4, 0, 43))
    }
    #browser {
        img {
            padding: 4%;
        }
        background: linear-gradient(to bottom, rgb(255, 68, 68), rgb(105, 12, 12))
    }
    #smile {
        background: linear-gradient(to bottom, rgb(255, 217, 0), rgb(182, 109, 0))
    }
    #paste {
        background: linear-gradient(to bottom, rgb(182, 182, 182), rgb(94, 94, 94));
    }     


    .mobile {
        display:flex;
        flex-direction: column;
        min-height: 100vh;
        width: 100%;

        .header {
            font-family: Arial, Helvetica, sans-serif;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(to bottom, rgb(12, 12, 75), rgb(7, 7, 48));
            color: white;
            padding-bottom: .5%;
            .wifi {
                margin-left: 4%;
            }
            div {
                display: flex;
                gap: 10%;
                justify-content: center;
                align-items: center;
            }
            h1, span {
                font-size: 100%;
            }
            #battery {
                margin-right: 2.5%;
            }
        }

        .icones {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            width: 100%;
            margin-top: 4%;
            #note {
                top: 20%;
                left: 30%;
                width: 70%;
                h1 {
                    font-size: 100%;
                    top: 18%;
                    left: 12%;
                }
            }

            .widget {
                filter: drop-shadow(2px 2px 2px black);
                background: linear-gradient(to bottom, rgb(139, 216, 241), rgb(84, 84, 255));
                border-radius: 10px;
                position: absolute;
                top: 60%;
                left: 10%;
                display: flex;
                width: 55%;
                box-shadow: 0px 0px 10px -1px rgba(255, 255, 255, 0.534) inset;
                h1 {
                    margin: 3%;
                }
                .divider {
                    width: 90%;
                    background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 100%);
                    display:flex;
                    justify-content: center;
                    height: 1px;
                    opacity: 40%;
                }
                .info {
                    width: 100%;
                    margin: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    font-size: 30%;
                    font-family: Arial, Helvetica, sans-serif;
                    color: white;
                    .data {
                        margin: 3%;
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 1%;
                    }
                }
                img {
                    margin-left: 3%;
                    width: 25%;
                    object-fit: contain;
                }
            }

            .app {
                flex: 0 1 calc(33.333% - 1rem);
                box-sizing: border-box;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                h1 {
                    margin: 4%;
                    color: white;
                    font-size: 70%;
                    font-family: Arial, Helvetica, sans-serif;
                    text-shadow:
                    1px 1px 5px black,
                    1px 1px 1px black,
                    0px 1.5px 0px black;
                }
                #smile,#browser,#file,#pester,#paste {
                    width: 65%;
                }
            }
        }

    }

    .shortcuts {
        background-color: rgba(229, 242, 255, 0.349);
        backdrop-filter: blur(3px);
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 2%;

    }

}

@keyframes slide{
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100vw, 0, 0);
  }
}