@font-face  {
    font-family: "Leelawadee UI";
    src: url(fonts/LeelawUi/LeelawUI.ttf);
}

@keyframes gradient {
  0% {
        background-position: left;
    }
  100% {
        background-position: right;
    }
}
@keyframes minimalise {
    0% { 
        margin-top: 0;
        opacity: 1; 
    }
    100% { 
        margin-top: 2vh;
        opacity: 0; 
        display: none;
    }
}
@keyframes maximalise {
    0% { 
        display: inline-block;
        margin-top: 2vh;
        opacity: 0; 
    }
    100% { 
        margin-top: 0;
        opacity: 1; 
    }
}
@keyframes close-icon {
    50% { 
        opacity: 1; 
    }
    100% { 
        opacity: 0; 
        display: none;
    }
}
@keyframes open-icon {
    0% {
        display: inline-block;
        opacity: 0; 
    }
    50% { 
        opacity: 0; 
    }
    100% { 
        opacity: 1; 
    }
}
@keyframes hide {
    0% {
        display: none;
        opacity: 0; 
    }
    100% {
        display: none;
        opacity: 0; 
    }
}


* {
    margin: 0;
    padding: 0;
  
    letter-spacing: 1px;
  
    user-select: none;
    scroll-behavior: smooth;
  
    font-family: "Leelawadee UI";
    color: #f7f5ef;
  
    overflow-wrap: break-word;
}

html {
    height: 100%
}
  
body {
    /* background: rgb(143,224,72);
    background: linear-gradient(132deg, rgba(143,224,72,1) 0%, rgba(0,212,255,1) 35%, rgba(195,144,235,1) 100%); */
    background: rgb(143,224,72);
    background: linear-gradient(45deg, rgba(143,224,72,1) 0%, rgba(0,212,255,1) 25%, rgba(195,144,245,1) 50%, rgba(235,75,164,1) 75%, rgba(255,218,0,1) 100%);
    background-size: 300%;
  
    animation: gradient 15s infinite alternate;
}

#SEO-HiddenText {
    overflow: hidden;
    font-size: 0px;
    position: absolute;
    left: 0;
    top: 0;
}

#desktop {
    height: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
  
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
}

.window {
    box-shadow: 9px 12px 29px -6px rgba(1,6,10,0.75);

    width: 70vw;
    height: 80vh;
  
    display: flex;
  
    flex-direction: row;
    justify-content: start;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
  
    position: fixed;
    z-index: 1;
}

.uiText {
    font-size: 12px;
}
.uiText-big {
    font-size: 16px;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;

    margin-left: 1vw;
    margin-bottom: 1vw;

    filter: drop-shadow(4px 7px 9px #01060a40);
}
.desktop-icon:hover {
    background-color: #4495d666;
    outline: solid 2px #4495d6CC;
}

#taskbar {
    position: absolute;
    bottom: 0;

    width: 100%;
    height: 5vh;
    min-height: 34px;

    z-index: 0;
    background-color: #01060a;
    border-top: solid 2px #acaeb2;

    display: flex;

    flex-direction: row;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;

    gap: 0.5vw;
}

#taskbar img {
    width: auto;
    height: 90%;

    margin: 0;
    
    aspect-ratio: 1/1;
    border-radius: 50%;  
}

.icon {
    width: auto;
    height: 90%;

    margin: 0;

    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;

    aspect-ratio: 3/2;
    border-radius: 2px;

    outline: solid 1px #a1a5a4;
    outline-offset: -1px;
    background: rgb(17,23,24);
    background: linear-gradient(350deg, rgba(17,23,24,1) 0%, rgba(35,42,42,1) 31%, rgba(48,55,55,1) 43%, rgba(96,104,103,1) 74%, rgba(164,175,171,1) 100%);
}

#start {
    width: auto;
    height: 100%;

    margin: 0;
    margin-right: 2.5vw; 

    aspect-ratio: 1/1;

    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}
#start img {
    width: auto;
    height: 90%;

    margin: 0;
    
    aspect-ratio: 1/1;
    border-radius: 50%;  
}
#dateTime {
    width: auto;
    height: 90%;
    aspect-ratio: 5/2;

    margin-left: auto;
    margin-right: -0.5vw;

    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;

    color: #f3f7fa;
}
#end {
    aspect-ratio: 1/3;
    
    margin-left: 0;
    margin-right: 0;
}

@media screen and (max-width: 1600px) {
    * {
        font-size: calc(4px + 1.0vw);
    }
    h3 {
        font-size: calc(6px + 1.0vw);
    }
    #desktop {
        margin-top: 0;
    }
    #SEO-HiddenText h1 {
        font-size: 0px;
    }
    #SEO-HiddenText h2 {
        font-size: 0px;
    }
    #SEO-HiddenText h3 {
        font-size: 0px;
    }
    #SEO-HiddenText p {
        font-size: 0px;
    }
}