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

html {
    font-size:54.5%;
}

body {
    width:100vw;
    height:100vh;
    background:url('https://images.unsplash.com/photo-1691083525349-c22d4dd2d567?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    background-repeat: no-repeat;
    background-position: center;
    background-size:105%;
}

.wrap {
    padding:3rem;
}
.footer {
    height:10rem;
    background-color:white;
    width:80rem;
    position:fixed;
    bottom:3rem;
    left:50%;
    transform: translate(-50%);
    border-radius:20rem;
    background-color: rgba(255, 255, 255, 0.427);
    box-shadow:rgba(255, 255, 255, 0.419) 0rem 0rem 10rem;
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(5px);
    display:flex;
    align-items:center;
    padding-inline:2rem;
    justify-content:space-evenly;
    gap:2rem;

    a {
        img {
            width:6rem;
        }

        transition-timing-function:ease;
        transition-property: transform;
        transition-duration:150ms;
    }

    a:hover {
        transform:translateY(-1rem);
    }
}

.desktop {
    position:fixed;
        top:3rem;
        left:3rem;  
}

.desktop-files {
    a {
        text-decoration:none;
        color:white;
        font-family:helvetica;
        font-size:1.2rem;
        display:flex;
        flex-direction:column;
        align-items: center;
        img {
            width:8rem;
        }

        .chrome {
            width:7.3rem;
            margin-top:.5rem;
            margin-bottom:1.2rem;
        }

        .computer {
            width:9rem;
            align-self:start;
        }
    }

    display:grid;
    grid-template-columns:10rem 10rem;
    grid-template-rows:repeat(5, 10rem);
    row-gap:3rem;
    align-items:center;
    justify-items:center;
}

.apps {
    height:80rem;
    background-color:white;
    width:80rem;
    position:fixed;
    bottom:15rem;
    left:50%;
    transform: translate(-50%);
    border-radius:4rem;
    background-color: rgba(255, 255, 255, 0.427);
    box-shadow:rgba(255, 255, 255, 0.286) 0rem 0rem 10rem;
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(5px);
    display:flex;
    padding-inline:2rem;
    justify-content:space-evenly;
    gap:2rem;

    .footer > a {
        img {
            width:6rem;
        }

        transition-timing-function:ease;
        transition-property: transform;
        transition-duration:150ms;
    }

    .footer > a:hover {
        transform:translateY(-1rem);
    }
}


.apps {
  height: 80rem;
  width: 80rem;
  position: fixed;
  bottom: 15rem;
  left: 50%;
  transform: translate(-50%, 2rem) scale(0.95);
  border-radius: 4rem;
  background-color: rgba(255, 255, 255, 0.427);
  box-shadow: rgba(255, 255, 255, 0.286) 0rem 0rem 10rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  flex-direction:column;
  padding-inline: 2rem;
  justify-content: flex-start;
  align-items:center;
  gap: 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none; 
  transition: 
    opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0s linear 0.25s; 
}

.apps.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition: 
    opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0s linear 0s;
}

.search {
    width:65rem;
    height:4.5rem;
    background-color:transparent;
    outline:none;
    border:0;
    margin-top:5rem;
    border-bottom:rgba(255, 255, 255, 0.462) solid .2rem;
    color:white;
    font-size:1.8rem;
    padding-block:2.5rem;
}

input::placeholder {
    font-family:helvetica;
    color:white;
    font-size:1.8rem;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance:none;
}

.applist {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:5rem;

    a {
        img {
            width:8rem;
        }

        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-decoration:none;
        color:rgba(255, 255, 255, 0.716);
        font-family:helvetica;
        font-size:1.5rem;
    }
}

.header {
    height:7rem;
    background-color:rgba(0, 0, 0, 0.99);
    display:flex;
    justify-content:space-between;
    padding-left:3rem;
    align-items:center;
    a > img {
        color:white;
        filter: invert(1);
        width:2.2rem;
    }

    #clock {
        color:white;
        font-size:1.6rem;
        font-family:helvetica;
        text-align:center;
       

    }

    .date {
        color:white;
    }
    .panel {
        display:flex;
        gap:1.5rem;
        background-color:rgba(255, 255, 255, 0.395);
        text-align:center;
        border-radius:1rem;
        padding-inline:2rem;
        padding-block:1rem;
        margin-block:3rem;
        margin-inline:1rem;
        box-shadow:2rem -1rem 15rem white;
    }
    .clock-container {
        display:flex;
        align-items:center;
    }
}