:root{
    --blue: #2971F6;
    --orange: #F8A63E;
    --mediumblue: #A0C8F8;
    --lightblue: #DDEAFA;
    --bluemediumlight: #CBDFFA;
    --gray: #3F3F3F;
    --white: #FFFFFF;
    --F4F4F4white: #F4F4F4;
    --FBFBFBwhite: #FBFBFB;
    --offblue: #d8e7fa8a;
}

*{
    margin: 0;
    padding: 0;
    cursor: url("/slike/cursor.svg"), auto;
    overflow: hidden;
}

body {
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-direction: column;
    gap: 20px;
    background-image: url(slike/windows_xp_original-wallpaper-1920x1200\ 1.png);
    background-repeat: no-repeat; 
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100vw;
}

.body-main{
    padding: 20px;
    display: block;
    width: 80%;
    height: 30vw;
    background-color: var(--offblue) ;
    backdrop-filter: blur(5px);
    border-radius: 30px;


}

.footer-main{
    display: block;
    width: 80%;
    height: 3vw;
    background-color: var(--offblue) ;
    backdrop-filter: blur(5px);
    border-radius: 30px;

}

.main-folder {
    background-color: var(--FBFBFBwhite);
    height: 89%;
    width: 100%;
    border-radius: 30px;
}
.main-folders {
    margin-bottom: -50px;
    background-color: var(--FBFBFBwhite);
    height: 20%;
    width: 20%;
    border-radius: 30px;
}

@media (max-width: 400px) {
  body {
    background-size: cover;
    background-position: center;
  }
}

@media (min-width: 400px) and (max-width: 1000px) {

  body {

    background-size: cover; 
    background-position: center; 

  }
  .body-main{
    display: block;
    width: 80%;
    height: 140vw;
    background-color: var(--offblue) ;
    backdrop-filter: blur(5px);
    border-radius: 30px;

}

.footer-main{
    display: block;
    width: 80%;
    height: 6vw;
    background-color: var(--offblue) ;
    backdrop-filter: blur(5px);
    border-radius: 30px;

}
}
@media (min-width: 1000px) {
  body {
    background-size: cover;
    background-position: center;
  }
}