/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: cuteFont;
  /*src: url(ADDSBP__.TTF);*/
  /*src: url(04B_03__.TTF);*/
  src:url(PixelOperator.ttf);
}

body {
  background-color: #34345e;
  color: black;
  min-height: 100vh;
  font-family: cuteFont, Verdana, sans-serif;
  background-image: url("80x80th_cloud1b.gif"), url("80x80bh_cloud1b.gif"), url("cloudynite.gif");
  background-position: top, bottom, center;
  background-repeat: repeat-x, repeat-x, repeat;
  font-size: 120%;
}


* { cursor: url('cursor_bear.gif') 0 0, default; }

ul {
  list-style-image: url('star4-purple1.gif');
  }

h1 {
  text-align: center;
}

.my-wrapper {
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
}

#header {
  border-style: double;
  border-color: black;
  background-color: #6c6ca4;
  max-width:900px;
  margin: auto;
  margin-top: 1%;
  padding: 1%;
  
  border-radius: 0em 0em 1em 1em;
}
  
#sidebar {
  /*this should stick to the side and float if on computer, stay at top if on mobile*/
  margin: 2%;
  padding: 1%;
  border-style: double;
  border-color: black;
  flex-grow: 1;
  background-color: #6c6ca4;
  max-width:120px;
  border-radius: 1em;
}
  
#content { 
  /*this for the main section. should be small, cute and scrollable*/
  max-width:800px;
  max-height:500px;
  padding: 2%;
  border-style: double;
  border-color: black;
  overflow: auto;
  background-color: #6c6ca4;
  margin: 2%;
  border-radius: 1em;
}

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 56.7%;
  padding-top: 37%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625, 56.25%) */
  /*800 / 500 = */
  border-style: double;
  border-color: black;
  border-radius: 1em;
  background-color: #6c6ca4;
  margin: 2.5%;
}

.responsive-iframe {
  border-style: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.overlap-extras {
  z-index: 10;
  position: relative;
}

a:link {
  text-decoration: none;
  color:#34345e;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

/* this is the to-do list */
.box20 { 
  background: url( 'back01.gif' );
  box-shadow: 2px 2px 5px #000;
  box-sizing: border-box;
  margin: 20px  0 ;  /*Centering changes 0 to auto*/
  padding: 10px ;
  position: relative ; 
  max-width: 300px;
 } 
 .icon01 { 
  background: url( 'icon01.png' ) no-repeat;
  height: 62px;
  position: absolute; 
  right: 10px;
  top: -13px;
  width: 27px 
 } 

/*This is the status.cafe box*/

#statuscafe {
  padding: 0.5em;
  background-color: rgb(241, 228, 248);
  border: 1px solid midnightblue;
}
#statuscafe-username {
  margin-bottom: 0.5em;
}
#statuscafe-content {
  margin: 0 1em 0.5em 1em;
}

/*this is the update box*/
.s_box32 { 
  background : rgb(241, 228, 248); 
  border : 2px solid midnightblue;
  box-sizing: border-box;
  margin : 1em  0 ;  /* Centering changes 0 to auto */ 
  padding : 1em ; 
  position : relative ; 
  max-width : 500px
 } 
 .s_box32::before, .s_box32::after { 
  border : 8px solid transparent ; 
  content : '' ; 
  left : 30px ;  /* Triangle position */ 
  position : absolute ; 
  top : 100% 
 } 
 .s_box32::before {
  border-top: 8px solid midnightblue;
}
 .s_box32::after {
  border-top: 8px solid rgb(241, 228, 248); ;
  margin-top: -3px;
}

@media only screen and (max-width: 600px) { /*there is a very specific width at which my browser moves the navbar ಠ_ಠ*/
  
  #sidebar {
   display:flex;
   flex-wrap:wrap;
   justify-content: space-around;
   max-width: 100%;
   position: sticky;
   z-index: 10;
   top: 0;
  }
  
  #content {
    overflow: visible;
    max-height: 100%;
  }
  
  .iframe-container {
    width: 100%;
    padding-top: 100%;
  }
  
  .extras { /*use class = "extras" to hide anything that should be too much for phones/tablets*/
    display:none;
  }

  .avatar {
    float: none;
    max-width: 100%;
  }
}