* {
  box-sizing: border-box;
}


:root {
    --bg-color: #ccd6ed;
    --accent-color: #e87349;
    --text-color: 	#082760;
    --link-color: #ca7301;
    --light-blue: #6aa7e4;
    --teal: 	#308b97;
    --body-font: Menlo;
    --header-font : Baskerville;
    --border:  3px ridge white;
    
}

html {
  scrollbar-color:	#17aaac  #e1e1e1 ;
}

html,
body {
  width: 100vw;
  height: 100vh;
  
}
/* Basic styling  */
body {
    background-color:var(--bg-color) ;
    font-size: 1em;
    color: var(--text-color) ;
    background-image: url(https://file.garden/ZjDg5008DCt33te8/bangdiund.jpg);
  
   

}

p {
  font-family: var(--body-font);
}

ul, li {
  font-family: var(--body-font);
  font-size: 1em;

}

h1,h2,h3,h4,h5,h6 {
   font-family: var(--header-font);
}

li {
 list-style-image: url("https://bathyalsphere.neocities.org/star.gif");
 margin: 4px;
}


a, a:visited {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
 background-color: #fd941d;
 color: white;
 text-decoration: none;

 

}

::selection {
  color: white;
  background:var(--teal)
}

a {
    transition: .3s;
}

img {
  max-width: 100%;
}

/*site Layout */

.wrap {
width: 80%;
margin: 0 auto;

}

.container {
  display: grid;
  grid-template-areas: 
  'header header header header header'
  'left middle middle middle right'
  'footer footer footer footer footer';


}

.header {
 grid-area: header;
 padding: 40px;
 border-radius: 20px;

 
}

.left, .right, .middle {
padding: 20px;
height: 780px;
margin-top: 10px;



}

.left {
  grid-area: left;
 
}

.middle {
grid-area: middle;

}

.right {
  grid-area: right;
  
}
.footer {
  grid-area: footer;
  padding: 20px;

  margin-top: 10px;
  border-radius: 20px;
 


}

/** widgets **/

.update {
  max-width: 100%;
  height: 30%;
  background-color: var(--bg-color) ;
  background: #c4c4c4;
background: linear-gradient(1deg, rgba(196, 196, 196, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(255, 255, 255, 1) 100%);
  padding: 10px;
  border:  var(--border);
  border-radius: 20px 5px;
}
.update {
  overflow: scroll;
  overflow-x: hidden;
}

#statuscafe {
    padding: .5em;
    background-color: var(--bg-color);
    background: #c4c4c4;
    background: linear-gradient(1deg, rgba(196, 196, 196, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(255, 255, 255, 1) 100%);
    border: var(--border);
    height: 80px;
    overflow: auto;
    border-radius: 20px 5px;
    scrollbar-width: none;
}
#statuscafe-username {
    margin-bottom: .5em;
    font-family: var(--header-font);
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
    font-family: var(--body-font);
    font-size:  0.875em;
}


.navigation {
  max-width: 100%;
  height: 100%;
  padding: 20px;
  border:  var(--border);
  border-radius: 20px 5px;
  background: #c4c4c4;
background: linear-gradient(1deg, rgba(196, 196, 196, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(255, 255, 255, 1) 100%);


}

.navigation ul li {
  border-bottom: var(--teal) 1px inset;
  list-style: none;
}

.navigation li {
  font-size: smaller;
  
}

.navigation a:hover {
  padding: 2px;
}

.main {
 background: #c4c4c4;
background: linear-gradient(1deg, rgba(196, 196, 196, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(255, 255, 255, 1) 100%);
  padding: 20px;
  border:  5px ridge white ;
  border-radius: 20px 5px;

}

.day {
  max-width: 100%;
  height: 43%;
  background: #c4c4c4;
background: linear-gradient(1deg, rgba(196, 196, 196, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(255, 255, 255, 1) 100%);
  border: var(--border);
  border-radius: 20px 5px;
  padding: 10px;

}

.widget {
  max-width: 100%;
  max-height: 39%;
  background: #c4c4c4;
  background: linear-gradient(1deg, rgba(196, 196, 196, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(255, 255, 255, 1) 100%);
  border: var(--border);
  border-radius: 5px 20px;
  margin-top: 15px;
  padding: 10px;
  overflow-y: scroll;
}

.banner {
  max-width: 100%;
  max-height: 20%;
  background: #c4c4c4;
  background: linear-gradient(1deg, rgba(196, 196, 196, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(255, 255, 255, 1) 100%);
}

@media screen and (max-width: 900px ) {
  .container {
    grid-template-areas: 
    'header header header header header'
    'left left left left left'
    'middle middle middle middle middle'
    'right right right right right'
    'footer footer footer footer footer';
  }
  .wrap {
    width: 100%;

  }

.left, .right, .middle {
  height: 100%;
}

.widget {
  max-height: 20%;
  
}

.navigation {
  font-size: 1.4375em;
}

.header {
  padding: 10px;
}
}



/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/symbols/sym-7/sym635.ani), url(https://cur.cursors-4u.net/symbols/sym-7/sym635.png), auto !important;} /* End https://www.cursors-4u.com */