@font-face {
    font-family: 'Monte Carlo';
    src: url(MonteCarloFixed12.ttf) format('truetype');
}

@font-face {
    font-family: 'Printvetica';
    src: url(Printvetica) format('opentype');
}

@font-face {
    font-family: 'Basteleur';
    src: url(Basteleur-Bold.otf) format('opentype');
}

/* Reset CSS */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* General styles */
* {
    box-sizing: border-box;
}

:root {
    --light: #666cff;
}


#clock {
  font-family: 'Monte Carlo', sans-serif;
  color: #666cff;
  font-size: 28px;
  text-align: left;
  padding-top: 40px;
  padding-bottom: 40px;
  bottom: 0px;
  left: 30px;
  position: fixed;
}

.float {
  float:left;
  display:inline;
  vertical-align:top;
}

.float a > img {
  height:32px;
  padding-right:2px;
  padding-left:2px;
}

.returnhome {
margin-top:15px;
text-align:right !important;
margin-right:0px;
text-decoration:none;
}

.buttonscroll a > img {
  padding:;
}

.returnhome li {
  margin-bottom: 5px;
  margin-left:85%;
  list-style-image: url('/assets/arrowhome.png');
  font-family: Monte Carlo;
}

.returnhome li:hover {
  background-color: #303c34;
  list-style-image: url('/assets/arrowhoverhome.png');
}

.box {
background-color: ;
border: 2px dotted var(--light);
padding: 5px;
margin-top:10px;
margin-bottom:10px;
margin-right:5px;
display: inline-block;
}

.box:hover{
background-color: #303c34;
}

html {
    font-family: 'Monte Carlo', 'Courier New', monospace;
    background-image:url('../assets/starstileblack.png');
    background-repeat:repeat;
    background-color:black;
    color: var(--light);
    font-size: 20px;
}

p {
    margin-bottom: 0.5rem;
}

a {
    color: var(--light);
    display: inline-block;
}

figcaption {
    margin-top: 1rem;
}

/* NAV */
nav li {
    display: inline-block;
}

button {
    background-color: black;
    color: var(--light);
    font-family: inherit;
    font-size: inherit;
    border: 2px dotted var(--light);
    margin: 1rem;
    top: 0px;
    right: 30px;
    position: fixed;
}

button:hover {
    cursor: pointer;
    background-color: #303c34;
}

/* Main */
body {
    margin: 2rem auto;
    text-align: center;
    width:95%;
    background-image:url('../assets/corkboard.jpg');
    border-radius:10px;
    z-index:1;
    height:756px;
}


/* Section */
section {
    border: 1px solid var(--light);
    padding: 0.5rem;
    margin-bottom: 10px;
}

section > header {
    text-align: left;
    margin: -0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

#sticker1 {
  filter: drop-shadow(10px 10px 4px black);
  position:absolute;
  left:70px;
  top:50px;
  transform:rotate(-4deg);
}

#sticker2 {
  filter: drop-shadow(10px 10px 4px black);
  position:absolute;
  right:50px;
  top:300px;
  transform:rotate(7deg);
}

#sticker3 {
  filter: drop-shadow(10px 10px 4px black);
  position:absolute;
  left:170px;
  bottom:60px;
  transform:rotate(3deg);
}

#month {
  font-size:20px;
  width:65%;
  display: inline-block;
  background-image:url('/assets/starwashi.png');
  background-size: 100% 100%;
  min-width:100px;
  min-height:100px;
  margin-bottom:5px;
  margin-top:10px;
} 

#month h2{
  font-family:'Basteleur';
  font-size:45px;
  margin-top:25px;
  color:#a81054;
}

#post1 {
  font-size:20px;
  width:60%;
  float:left;
  color:black;
  background-image:url('/assets/tornpaper.png');
  background-size:100%;
  background-repeat:no-repeat;
  min-height:30px;
  margin-left:-30px;
  margin-right:;
  margin-bottom:40px;
  margin-top:20px;
  transform:rotate(-3deg);
  padding:20px;
  padding-left:30px;
  text-align:left;
  font-family:courier;
  font-size:14px;
  min-width:200px;
  min-height:200px;
  z-index:50;
}

#post1 li{
 list-style:circle;
 list-style-position:inside;
}

#post1 h1{
 font-size:20px;
 font-weight:bold;
 text-align:left;
}

#post2 {
  font-size:20px;
  width:45%;
  float:right;
  display:flex;
  flex-direction:column;
  color:black;
  background-image:url('/assets/paper3.jpg');
  min-height:30px;
  margin-left:;
  margin-right:0px;
  margin-bottom:40px;
  margin-top:-200px;
  transform:rotate(4deg);
  z-index:1;
} 

#post3 {
  font-size:20px;
  width:60%;
  float:left;
  color:black;
  background-image:url('/assets/postitcropped.png');
  background-size:100%;
  background-repeat:no-repeat;
  min-height:30px;
  margin-left:-30px;
  margin-right:;
  margin-bottom:40px;
  margin-top:20px;
  transform:rotate(-3deg);
  padding:20px;
  padding-left:30px;
  text-align:left;
  font-family:courier;
  font-size:14px;
  min-width:200px;
  min-height:200px;
  z-index:50;
}

.washi1 {
  z-index:200;
  left:10%;
  margin-top:-15%;
}

.washi1 img{
  width:60%;
}

.paper1 {
  position:absolute;
  left:20%;
  top:3%;
  z-index:99;
  background-image:url('/assets/postit.png');
  background-repeat:no-repeat;
  background-size:50% 100%;
  transform:rotate(-10deg);
  height:50%;
  width:50%;
}

.stickytext {
  position:inherit;
  left:30%;
  top:15%;
  z-index:100;
  transform:rotate(-10deg);
  font-family:courier;
  color:black;
  width:50%;
  font-size:14px;
}

.stickytext h1{
  font-weight:bold;
}

.paper2 {
  font-size:20px;
  margin-bottom:0px;
  width:68%;
  float:right;
  display:flex;
  flex-direction:column;
}

.paper3 {
  font-size:20px;
  margin-bottom:0px;
  float:left;
  width:70%;
  padding-top:5px;
  padding-bottom:5px;
  clear:both;
}

@media (max-width:768px) {
  li {
    overflow:hidden;
  }
}

@media (max-width:768px) {
  button {
    visibility:visible;
    position:static;
  }
}

@media (max-width:768px) {
    #epa {
      visibility:hidden;
    }
}

@media (max-width:768px) {
    #clock {
      visibility:hidden;
    }
}

@media (max-width:768px) {
    #month {
      width:90%;
    }
    #post1 {
      width:80%;
      float:none !important;
    }
    #post2 {
      width:80%;
      float:none !important;
      clear:both;
      margin-top:5px;
    }
    #sticker1 {
      visibility:hidden;
    }
    #sticker2 {
      visibility:hidden;
    }
    #sticker3 {
      visibility:hidden;
    }
    .returnhome li {
  margin-bottom: 5px;
  margin-left:75%;
  list-style:none;
    }
}

@media (min-width: 768px) {
    body {
        width: 60%;
    }
}

@media (min-width: 1200px) {
    body {
        width: 50%;
    }
}