/* FONT */

@font-face {
    font-family: "satoshi"; 
    src: url('/css/Satoshi-Bold.woff2') format('woff2'), url('/css/Satoshi-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
    font-style: normal;}

/* GLOBAL */
html {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: -webkit-fill-available;}
*, *::before, *::after {-webkit-box-sizing: inherit; box-sizing: inherit;}
* {margin: 0; padding: 0;}

body, html {
    width: 100%; 
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;}

body {
    font-family: "satoshi", sans-serif;
    cursor:  url("/cursor/cursor.png"), auto;
    background-color: #eee9e6;
    font-size: 12px;
    color: #121212;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);}
    .img-container, .icon-img {-o-object-fit: cover;object-fit: cover;-o-object-position: center;object-position: center;overflow: hidden;}
    .img-container img {max-width:100%; -o-object-fit: cover;object-fit: cover;max-height: 100%;}
/* cursor */
.cursor {cursor:  url("/cursor/cursor.png"), auto;}
a, .pointer {cursor: url("/cursor/cursor-pointer.png"), auto}
.cursor-move {cursor: url("/cursor/cursor-move.png"), auto;}
.cursor-rotate {cursor: url("/cursor/cursor-rotate.png"), auto;}

#marquee-line{
  white-space: nowrap;
  overflow:hidden;
  font-size:0;
  bottom: 0;
}
#marquee-line ul{ display:inline-block; padding:8px 0; margin:0px; font-size:1rem; }
#marquee-line li{ display:inline; margin:0 16px ;}


/* POSITION */

.relative {position: relative;}
.abs {position: absolute;}
.fixed {position: fixed;}
a {text-decoration: none; color: inherit;}

/* flex */
.flex {display: -webkit-box; display: -ms-flexbox; display: flex;}
.row {-webkit-box-orient:horizontal;-webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.column {-webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
.center-justify  {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.center-align { -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.justify {justify-content: space-between;}

/* MARGIN */

.mb-32 {margin-bottom: 32px;}
.mb-16 {margin-bottom: 16px;}
.mb-8 {margin-bottom: 8px;}

/* PADDING */
header {top:0}
.pad-16, header {padding: 16px;}
.pad-8 {padding: 8px;}
.pad-s-4 {padding: 0 4px;}
.pad-s-8 {padding: 0 8px;}

/* SIZE GLOBAL */
.fill-dimensions, .fill-width {width: 100%;}
.fill-dimensions, .fill-height, .window-content  {height: 100%;}
.logo-container {height: 70px;}
/* COLOR */
#marquee-line, .line {background: #121212;}
.line  {
    display: block;
    width: 100%;
    height: 2px;
    border-bottom: 1px solid #fff;
}
/* win */
.highlight {background-color: #eee9e6;}
.window, .window-wrapper, .button {border: 1px solid #121212;}
.window {
    width: 35%; z-index: 8000; background-color: #eee9e6;    
    box-shadow: inset -1px -1px 0 0  #c2b9b1,inset 1px 1px 0 0 #fff,5px 5px 0 rgba(0,0,0,.2);}
#window-topper,.window-topper {height: 32px;}
.window-inner {padding: 0 4px 4px 4px;}
#window-name, .window-name {padding: 0 4px;}
#contact .window-content { height: 55%;}
.window-wrapper {overflow: hidden; width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px;}
.win-decor {flex-grow: 1; height: 9px;padding-top: 1px;}
/*MISC */
#contact{right: 20%;}
#about {left: 20%; width: 30%;}
#renderPhone {
  height: 550px;
  width: 100%;
  background-image: url("/nokia/sky_lg.jpg");
}
#contact-content {height: fit-content;}
#clippy-graphic {width: 80%;float: right; margin-left: auto; max-width: 200px;}
.speech-bubble {
  width: 180px;
  padding: 16px;
  border-radius: 8px;
  border-color: #fffddd; background: #fffddd;
}
#clippy{
    bottom:8px;
    right:16px;
    width: 45%;
    max-width: 320px;
    min-width: 240px;
  }
#cta {top: -130px; right: 0;}
.speech-bubble:after {
    content: "";
    position: absolute;
    top: 99%;
    left: 15%;
    border-top: 20px solid black;
    border-top-color: inherit; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent; 
  }
  .sub-options, .button {padding: 4px;}

  @media only screen and (min-height: 1000px) {
    #renderPhone {height: 800px;}
    header {top:30px}
    .logo-container{height: 80px;}
  }
  @media only screen and (max-width: 1000px) {
    .logo-container{height: 50px;}
    #about {top: 12%; left: 8px;}
    #contact {bottom: 10%; right: 8px;}
    #about .window-wrapper {height: 300px; overflow-y: scroll;}
    #renderPhone {height: 400px;}
    .window, #about  {width: 80%;}
    body, html{height: 100%; overflow-y: scroll;}
    #marquee-line ul {padding: 2px 0;}
    body, #marquee-line ul {font-size: 12px;}
    #clippy-graphic {width: 120px;}
    .speech-bubble {width: 160px;}
  }

  @media only screen and (max-width: 800px) {
    .logo-container{height: 50px;}
    #about {left:0}
    #contact {right:0}
    #about .window-wrapper {height: 200px; overflow-y: scroll;}
    #renderPhone {height: 400px;}
    .window, #about  {width: 90%;} 
  }