@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Bubbles&display=swap');

body{
  background-color: #e1f1e0;
  cursor: url(https://64.media.tumblr.com/562205bee1cbf6f4422a97b377850408/tumblr_inline_p8c0yuDFQD1rhwzwl_75sq.gif), pointer;
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
}

::selection {
  background: #DC828F; /* WebKit/Blink Browsers */
}

summary {
 font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
  }

.logo {
  max-width:40%; 
  background-repeat: no-repeat;  
  background-size: contain; 
  background-image: url(logos.png); 
  height: 200px
  }

.rain {
  background-image: url(https://media0.giphy.com/media/tIHktzgRi8yjIplFVI/200w.gif?cid=6c09b952e3adfejoene6z0f4eyndn5n9s006q45e20knamkz&rid=200w.gif&ct=s);
  width: 100%;
  margin-top: -10%;
  position: fixed;
  height: 120%;
  /* let's lighten it up */
    opacity: 0.8;
  }

.leavesbottom {
  width: 100%;
  background: url(https://64.media.tumblr.com/d61b3f1544fb7c05b9f755a83febd13d/tumblr_n8v11alwjH1s7ljw8o1_250.gifv);
  height: 100px;
  position: fixed;
  bottom: 0;
  left: 0;
  background-repeat: repeat-x;
  }

.linklane{
  padding-top: 4px;
  font-family: 'Rubik Bubbles', cursive;
  color: white;
  margin: auto;
  max-width: 960px;
  background-color: #DC828F;
  min-height: 15px;
  font-size: 12px;
  border-radius: 10px 10px 0px 0px;
}

.toppart {
  font-family: 'Rubik Bubbles', cursive;
  background-color: #DC828F;
  height:15px;
  padding-left: 5%;
  padding-top: 4px;
  color: white;
  font-size: 12px;
  box-shadow: 10px 2px #CCD4BF;
  width: 95%; 
  border-radius: 10px 10px 0px 0px;
}

.toppost {
  font-family: 'Rubik Bubbles', cursive;
  background-color: #DC828F;
  height:15px;
  color: white;
  font-size: 12px;
  padding-top: 4px;
  padding-left: 5%;
  box-shadow: 10px 2px #CCD4BF;
  width: 420px; 
  border-radius: 10px 10px 0px 0px;
}
  
.container {
  margin: auto;
  width: 900px;
  justify-content: space-between;
  display: flex;
  flex-direction: row;
  border: solid 2px #DC828F;
  padding: 27px;
  background: url(https://64.media.tumblr.com/2b3d9a81fa324b466c52154479cec87e/tumblr_inline_mlkya84CRB1r53miq.png);
  }
  
#singlerow {
  display: block!important;
  width: 800px!important;
  }
  
.main {
  text-align: justify;
  padding: 20px;
  display: flex;
  width: 60%;
  flex-direction: column;
  }

.mainpost {
  background-color: #F5F3E7;
  padding: 20px;
  border: solid 2px #DC828F;
  display: flex;
  flex-direction: column;
  width: 400px;
  border-radius: 0px 0px 10px 10px;
  margin-bottom: 20px;
  box-shadow: 10px 2px #CCD4BF;
}

#aboutop {
  width: 520px!important;}
#aboutlinks {
  width: 858px!important;}
#aboutpost {
  width: 500px!important;}
#aboutcontainer {
  width: 800px!important;
  }
  
.sidepost {
  width: 156px;
  padding: 20px;
  border: solid 2px #DC828F;
  margin-bottom: 20px;
  background-color: #F5F3E7;
  border-radius: 0px 0px 10px 10px;
  text-align: justify;
  box-shadow: 10px 2px #CCD4BF;
}
  
.sidelane{
  width: 200px;
  display: flex;
  flex-direction: column;
  animation-name: float;
  animation-duration: 4s;
  position: relative;
  animation-iteration-count: infinite;
}

@keyframes float {
  0%   {top:0px;}
  50%  {top:10px;}
  100% {top:0px;}
}


a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

.linklane a {
  text-decoration: none;
  color: #fff;
}

.linklane a:hover {
  border: white dashed 1px;
  padding: 2px;
}

 @media screen and (max-width: 800px) {
   
#aboutop {
  width: 30%!important; }
#aboutlinks {
  max-width: 80%!important;}
#aboutpost {
  width: 90%!important; }
#aboutcontainer {
  width: 800px!important;
  }
  
   .linklane{
  max-width: 81%;
  margin: auto;
  min-height: 15px;}
  
.logo {
  height: 100px;
  min-width: 300px;
  margin: auto;
  }

.toppart {
  float: left;
  width: 30%; 
  }
  
.toppost {
  width: 30%; 
  }
   
  .container {
     flex-wrap: wrap;
     max-width: 80%;
     margin-left: 10%;
     padding: 2px;
     }
     
    .sidepost {
     width:70%;
     border-radius: 0px 20px 20px 20px;
    }
    .sidelane {
      float: left;
     width:100%;
     align-items: flex-start;
     justify-content: flex-start;
     
     margin-left: 10%;
    }
    .mainpost {
     width:90%;
     border-radius: 0px 20px 20px 20px;
    }
    
    .main { 
      width: 80%
      }