/* Main CSS Settings */

@font-face{
    font-family: pixel;
    src: url("Apple\ ][.ttf")
}

html {
  height: 100%;
  width: 100%;
}

img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

body{
  margin: 0px;  
  background-color: #fec64a;
  background-image: url(img/gojo3.png);
  background-repeat: round;
  background-position-y: 10vh;
  background-position-x: unset;
  background-size: 30vh;
  background-blend-mode: soft-light;
  letter-spacing: -0.25rem;
  font-family: pixel;
  font-size: 20px;
  color: black;
  overflow: hidden;
}

/* Menu Bar */

#menubar{
    position: fixed;
    bottom: 0px;
    width: 100vw;
    background: #022555;
    height: 60px;
    z-index: 100;
}

#startButton {
    height: 40px;
    width: 100px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
    top: 10px;
    left: 20px;
    border-top: 4px solid rgba(255, 255, 255, 0.5);
    border-right: 4px solid rgba(255, 255, 255, 0.5);
    border-bottom: 4px solid rgba(0, 0, 0, 0.5);
    border-left: 4px solid rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.75);
    font-size: 18px;
    box-sizing: border-box;
    letter-spacing: -.3rem;
}

#divider {
    height: 50px;
    /* width: 1px; */
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto;
    /* background: purple; */
    left: 140px;
    border-right: 2px solid rgba(255, 255, 255, 0.5);
    border-left: 2px solid rgba(0, 0, 0, 0.5);
}

.mI{
    width: 40px;
    margin-right: 15px;
}

#menuIcons{
    position: relative;
    top: -30px;
    left: 170px;
}

#clock {
    height: 40px;
    width: 125px;
    /* background: purple; */
    display: table-cell;
    line-height: 34px;
    text-align: center;
    position: fixed;
    bottom: 10px;
    border-top: 4px solid rgba(255, 255, 255, 0.5);
    border-right: 4px solid rgba(255, 255, 255, 0.5);
    border-bottom: 4px solid rgba(0, 0, 0, 0.5);
    border-left: 4px solid rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.75);
    font-size: 18px;
    right: 10px;
  box-sizing: border-box;
  letter-spacing: -0.4rem; 
}

/* Windows */

.window{
    position: absolute;
    background: #e7eae9;
    box-shadow: -5px 5px rgb(0 0 0 / 50%);
}

/* Intro Window Specifically */

#introWindow {
    height: 60vh;
    width: 60vh;
    right: 60px;
    top: 0px;
    bottom: 60px;
    margin: auto;
    text-align: center;
    box-sizing: border-box;
    font-size: 2vh;
}

#introTitle {
  margin: 3vh;
}

#introTextBlob{
    background: white;
    position: relative;
    border: 3px solid #8c8e90;
    padding: 1vh;
    /* margin-bottom: 2.5vh; */
    width: calc(100% - 15vh);
    display: inline-block;
}

#introTutorial {
  margin: 2vh;
}

.butt{
  display: inline-block;
  background: white;
  padding: 2.5vh;
  border: 4px solid #8c8e90;
  font-size: 2.5vh;
}



/* Desktop Icons */
.desktopIconImg{
    margin: 3vh;
    height: 10vh;
}

.icon{
    width: min-content;
  text-align: center;
  /* flex:0.2; */
}

.selectedIcon{
    background-color: rgb(0 138 200 / 20%);
    outline: 4px solid rgb(76 190 254);
    outline-offset: -4px;
}

.iconCover{
  box-sizing: border-box;
     flex: 0.2;
}

.iconLabel {
    margin-top: -2vh;
    letter-spacing: -0.38rem;
    text-shadow: -2px 2px white;
}

.container {
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column;
    /* justify-content: space-around; */
    /* line-height: 30px; */
    flex-wrap: wrap;
    height: calc(100vh - 60px);
    width: min-content;
}

.projectWindow{
    height: 80vh;
    width: 80vh;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 60px;
    top: 0px;
    margin: auto;
     text-align: center;
}

.projectGif{
    width: calc(100% - 20vh);
    border: 4px solid #8c8e90;
    image-rendering: auto;
}

.projectTitle{
    font-size: 4vh;
    margin: 3vh;
    display: inline-block;
}

.projectBody{
    width: calc(100% - 20vh);
    display: inline-block;
    margin: 4vh;
     font-size: 2vh;
}


#sokobanWindow > img{
    width: calc(100% - 35vh);
    /* image-rendering: unset; */
}