* {
  box-sizing: border-box;
}

body {
  padding: .7em;
  text-align: center;
}

#symbol{
  max-width: 50%;
  cursor: pointer;
}

.friendjumppic{
  height:20rem;
  margin-bottom: 10px;
}

.split {
  height: 100%;
  width: 65%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
}

.left {
  left: 0;
  background-color: rgb(12, 92, 180);
  margin-bottom: 1em;
}

#sky{
  width: 48%;
  height: 110%;
  margin-left: -38%;
  position: fixed;
}

.picframe{
  height: 20rem;
  width: 15rem;
  //background: white;
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin-bottom: 1em;
}

.right {
  right: 0;
  background-color: rgb(185, 153, 118);
  //background-color: rgb(211, 176, 138);
}

.month{
  display: block;
  font-family: monospace, sans-serif;
  color: white;
  letter-spacing: .5em;
  margin: 2.5em auto;
  font-size: 1.6rem;
}

.monthbox{
  margin-bottom: 3.5em;
}

#jun07pic{max-width:100%}

#julymonthbox{
  display:none;
}


.calendarbox{
  margin-left:.5em;
}

span {
  display: inline-block;
  height:6rem;
  width:5.3rem;
  vertical-align: top;
  margin-bottom: .5em;
  font-size: 1.6rem;
  border-radius: 5%;
  //border-style: groove;
  border-style: double;
  margin-left: .2em;
  padding: .5em;
}

.day{
  font-family: monospace, sans-serif;
  color: white;
  font-size: 15;
}

.nodate{
  opacity:0;
}

.glow div{
  cursor: pointer;
}

.glow:hover{
  box-shadow: 0px 0px 5px 4px rgba(97,142,255,0.9);
}

.glow:active,
  .invert {
    filter: invert(1);
}

.futuremonth{
  cursor: default;
}

.displayjump{
  border-radius: 50%;
  height: 1em;
  width: 1em;
  background:red;
  margin-left: 2em;
  cursor: pointer;
}

.smallsymbol{
  max-width: 50%;
}

.jumppic{
  height:20rem;
  display: none;
  margin-bottom: 10px;
  cursor: pointer;
}


#tabletweek{display:none;}
#mobileday{display:none;}
.mobilejumpposition{max-width: 100%}


@media screen and (max-width:1007px) {
  body {
    font-family: monospace, sans-serif;
    }
  main {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 5;
    width: 71%;
    background: white;
    overflow-y: scroll;
    overflow-x: scroll;
    color:red;
    margin-right: 1em;
    }

  aside {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    width: 29%;
    overflow-y: scroll;
    padding-bottom: 3em;
    background: white;
    z-index: 3;
    }

    .weekbox{
      width:18.5rem;
      height: 13rem;
      border-radius: 0;
      border-color: red;
      border-style: solid;
      margin-left: .2em;
      margin-right: .2em;
      padding:1em;
    }
    .daybox {
      position: relative;
      height:13rem;
      width:8.8rem;
      vertical-align: top;
      margin-bottom: .5em;
      font-size: 2rem;
      border-style: solid;
      margin-left: .2em;
      margin-right: .2em;
      padding: .5em;
      border-radius: 0;
      border-color: red;
    }
    .glow1:hover{
      box-shadow: 0px 0px 5px 4px red;
      cursor: pointer;
    }


    .daycontainer{
      position:absolute;
      left:5%;
      bottom:1%;
    }

    .numbercontainer{
      position:absolute;
      right:5%;
      bottom:1%;
    }

    .weeksymbol{
      max-width:100%;
    }

    .weekjumppic{
      max-width:95%;
      display: none;
      position:absolute;
      left: 3;
      top:16;
      z-index: 2;
    }
    .skyback{
      max-width:8.5rem;
      height:12.7rem;
      display: none;
      position:absolute;
      left: 0;
      top:0;
      z-index: 1;
    }

    .weekcontainer{
      margin: 2em;
      //border: 5px black;
      position: relative;
    }

    .splashpagejump{
      width: 66vw;
      max-height:47rem;
      position: absolute;
      margin-left:-50%;
      margin-top: -10%;
      //display:none;
      //border: 5px black dotted;
    }

    .weekposition{
      position:absolute;
    }

    #week1container{margin-left: 550px;}
    #week2container{margin-left: 1100px;}
    #week3container{margin-left: 1650px;}
    #week4container{margin-left: 2200px;}
    #week5container{margin-left: 2750px;}
    #week6container{margin-left: 3300px;}
    #week7container{margin-left: 3850px;}
    #week8container{margin-left: 4400px;}
    #week9container{margin-left: 4950px;}
    #week10container{margin-left: 5500px;}
    #week11container{margin-left: 6050px;}
    #week12container{margin-left: 6600px;}
    #week13container{margin-left: 7150px;}
    #week14container{margin-left: 7700px;}
    #week15container{margin-left: 8250px;}
    #week16container{margin-left: 8800px;}
    #week17container{margin-left: 9350px;}
    #week18container{margin-left: 9900px;}
    #week19container{margin-left: 10450px;}
    #week20container{margin-left: 11000px;}
    #week21container{margin-left: 11550px;}
    #week22container{margin-left: 12100px;}
    #week23container{margin-left: 12650px;}
    #week24container{margin-left: 13200px;}
    #week25container{margin-left: 13750px;}
    #week26container{margin-left: 14300px;}
    #week27container{margin-left: 14850px;}
    #week28container{margin-left: 15400px;}
    #week29container{margin-left: 15950px;}
    #week30container{margin-left: 16500px;}
    #week31container{margin-left: 17050px;}
    #week32container{margin-left: 17600px;}
    #week33container{margin-left: 18150px;}
    #week34container{margin-left: 18700px;}
    #week35container{margin-left: 19250px;}
    #week36container{margin-left: 19800px;}
    #week37container{margin-left: 20350px;}
    #week38container{margin-left: 20900px;}
    #week39container{margin-left: 21450px;}
    #week40container{margin-left: 22000px;}
    #week41container{margin-left: 22550px;}
    #week42container{margin-left: 23100px;}

    #week43container{
        display: none;
        margin-left: 23650px;}
    #week44container{
        display: none;
        margin-left: 24200px;}
    #week45container{
        display: none;
        margin-left: 24750px;}
    #week46container{
        display: none;
        margin-left: 25300px;}

    .future{
      opacity:30%;
    }

    .mon{
     position: absolute;
    }
    .tues{
     position: absolute;
     margin: 0 0 0 5em;
    }
    .wed{
     position: absolute;
     margin: 0 0 0 9.8em;
    }
    .thu{
     position: absolute;
     margin: 6.5em 0 0 .2em;
    }
    .fri{
     position: absolute;
     margin: 6.5em 0 0 5em;
    }
    .sat{
     position: absolute;
     margin: 6.5em 0 0 9.8em;
     }
     .sun{
      position: absolute;
      margin: 13em 0 0 .2em;
      }
    .weekbox{
      position: absolute;
      margin: 26em 0 0 10em;
     }

     .navbox{
       border: 2px red solid;
       height: 2em;
       max-width: 25vw;
       margin-left: .5em;
       margin-bottom: 1em;
       padding-top: .3em;
       margin-top: 1em;
     }

     .weeklink{
       text-decoration: none;
       color: black;
     }

     #weekmay25pic{max-height: 85% left:28}
     #weekjun07pic{top:68}

      #desktopmonth{display:none;}
      #tabletweek{display:block;}
      #mobileday{display:none;}
      .mobilejumpposition{max-width: 100%}
    }

@media screen and (max-width:675px) {
      #mobileday {
        background-color: grey;
        text-align: left;
        padding:0;
        margin:0;
        overflow-y: scroll;
        padding-bottom: 4em;
      }
      body{
        margin:0;
        padding:0;
      }
      ul{
        margin-top: 1em;
      }

      .mobilejump{
        display: block;
        background-color: white;
      }

      .mobilejumpposition{
        max-width:100%;
      }
      aside{
        display: none;
      }

      .nojumpmobile{
        color: darkgrey;
      }


      #mobilsymbol{position: absolute;; max-width: 15%; margin-left: 1.5em; z-index:1;}
      #skymobile{position: relative;; max-width: 15%; margin-left:1.5em; z-index:0;}

      #desktopmonth{display:none;}
      #tabletweek{display: none;}
      #mobileday{display:block;}