@import 'system-font.css';
@import '_topbar.css';

* {
cursor:default;
}
@font-face {
  font-family: 'OpenSans';
  src: url('./font/OpenSans-Regular.ttf');
}
@font-face {
  font-family: 'OpenSans-SemiBold';
  src: url('./font/OpenSans-SemiBold.ttf');
}

html, body {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
margin:0;
padding:0;
background:#111;
overflow:hidden;
user-select:none;
}

#desk {
position:absolute;
bottom:20px;
left:0;
width:100%;
background:#B71C1C;
color:#eee;
font-size:4vw;
font-family:'OpenSans', system-ui;
padding:0.5vh 3vw;
line-height:6vw;
z-index:3;
box-sizing:border-box;
}


/* --  load  ----------------------------------------------------------------------------------------------------- 
   --------------------------------------------------------------------------------------------------------------- */
#load {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
}
#load.off {
top:-3%;
opacity:0;
transition:0.25s;
}
#load span {
position:relative;
top:calc(50% - 6vw);
margin:0 auto;
display:inline-block;
font-size:7vw;
font-family:'OpenSans-SemiBold', system-ui;
letter-spacing:0.5vw;
background-color:#0ff;
background:linear-gradient(65deg, #0ff, #f0f);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}


/* --  page  ----------------------------------------------------------------------------------------------------- 
   --------------------------------------------------------------------------------------------------------------- */
#page {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
color:#111;
background:linear-gradient(65deg, rgba(236, 239, 244, 0.5), rgba(236, 239, 244, 0.5)),
           linear-gradient(65deg, rgba(140, 255, 255, 0.75), rgba(255, 140, 255, 0.75)),
           url('./img/dev.jpg') 50% 50% no-repeat;
background-size:cover;
opacity:0;
}

#page #construct {
position:absolute;
left:90px;
bottom:70px;
z-index:2;
}
#page #construct div:nth-child(1) {
font-family:'OpenSans-SemiBold', system-ui;
font-size:96px;
}
#page #construct div:nth-child(2) {
font-family:'OpenSans', system-ui;
font-size:74px;
margin-top:-40px;
}
#page #construct div:nth-child(3) {
font-family:'OpenSans', system-ui;
font-size:20px;
margin-top:30px;
margin-left:7px;
}

#page #freestock {
position:absolute;
bottom:15px;
right:30px;
font-family:'OpenSans-SemiBold', system-ui;
font-size:12px;
padding:7px 12px 7px 15px;
cursor:default;
border-radius:5px;
background:rgba(236, 239, 244, 0.55);  /* nord6 - snow storm */
color:#3b4252;  /* nord1 - polar night */
backdrop-filter: blur(8px) saturate(160%);
-webkit-backdrop-filter: blur(8px) saturate(160%);
box-shadow:0 2px 5px -4px #999;
}
#page #freestock:hover {
background:#ECEFF4;  /* nord6 - snow storm */
box-shadow:0 2px 5px -4px #222;
}
#page #freestock a {
color:#3b4252;  /* nord1 - polar night */
padding:1px;
text-decoration:none;
cursor:pointer;
}
#page #freestock:hover a {
border-bottom:1px solid #3b4252;  /* nord1 - polar night */
}


/* --  darkmode toggle  ----------------------------------- */
.darkmode #page {
background:linear-gradient(rgba(46, 52, 64, 0.65), rgba(46, 52, 64, 0.65)),
           linear-gradient(65deg, rgba(0, 255, 255, 0.55), rgba(255, 0, 255, 0.55)),
           url('./img/dev.jpg') 50% 50% no-repeat;
background-size:cover;
color:#ECEFF4;  /* nord6 - snow storm */
}
.darkmode #page #construct {
opacity:0.8;
}
.darkmode #page #freestock {
background:rgba(46, 52, 64, 0.35);  /* nord0 - polar night */
color:#ECEFF4;  /* nord6 - snow storm */
box-shadow:0 2px 5px -4px #222;
}
.darkmode #page #freestock:hover {
background:rgb(46, 52, 64);  /* nord0 - polar night */
box-shadow:0 2px 5px -4px #000;
}
.darkmode #page #freestock a {
color:#ECEFF4;  /* nord6 - snow storm */
}
.darkmode #page #freestock:hover a {
border-bottom:1px solid #ECEFF4;  /* nord6 - snow storm */
}




/* --  responsive  ----------------------------------------------------------------------------------------------- 
   --------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width:1366px) {
  #page #construct {
    left:60px;
  }
  #page #construct div:nth-child(1) {
    font-size:80px;
  }
  #page #construct div:nth-child(2) {
    font-size:60px;
    margin-top:-30px;
  }
  #page #construct div:nth-child(3) {
    font-size:16px;
    margin-top:24px;
  }
}

@media only screen and (min-width:1025px) {
  #desk { display:none; }
}

@media only screen and (max-width:1024px) {
  #page #construct div:nth-child(1) {
    font-size:60px;
  }
  #page #construct div:nth-child(2) {
    font-size:46px;
    margin-top:-24px;
  }
  #page #construct div:nth-child(3) {
    font-size:12px;
    margin-top:20px;
  }
  #page #freestock {
    bottom:10px;
    right:20px;
    font-size:10px;
    padding:5px 10px 5px 13px;
  }
  #desk { display:none; }
}

@media only screen and (max-width:760px) {
  #page #construct {
    left:40px;
    bottom:35px;
  }
  #page #construct div:nth-child(1) {
     font-size:50px;
  }
  #page #construct div:nth-child(2) {
    font-size:40px;
  }
  #page #construct div:nth-child(3) {
    font-size:11px;
    margin-top:16px;
  }
  #page #freestock {
    bottom:5px;
    right:10px;
    font-size:8px;
    padding:3px 5px 3px 7px;
    border-radius:3px;
  }
}
/*
@media only screen and (max-width:650px) {
  #page #construct div:nth-child(1) {
    font-size:50px;
    line-height:40px;
  }
  #page #construct div:nth-child(2) {
    font-size:40px;
    line-height:30px;
  }
  #page #construct div:nth-child(3) {
    font-size:10px;
    margin-top:15px;
  }
}

@media only screen and (max-width:530px) {
  #page #construct {
    left:25px;
    bottom:30px;
  }
  #page #construct div:nth-child(1) {
    font-size:40px;
    line-height:35px;
  }
  #page #construct div:nth-child(2) {
    font-size:32px;
    line-height:25px;
  }
  #page #construct div:nth-child(3) {
    font-size:8px;
    margin-top:15px;
  }
}

@media only screen and (max-width:400px) {
}
*/
@media only screen and ((max-width:320px) or (max-height:320px)) {
  #page, #load { display:none; }
  #desk { display:block; }
}