/* 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." */

  * {
    box-sizing: border-box;
  }

  body {
   margin: 0;
   background-color: #5ab3f2; 
   font-family:Tahoma;
   color:white;
  }
  
  #cool-main-text{
   width:900px;
   color:white;
   border:#f9d3d2 dashed 2px;
   margin: 0 auto;
   padding: 10px;
  }
  
  /*Banner Stuff */
  #banner-wrapper{
   width: 100%;
   background: #5ab3f2;
   padding: 0 0;
  }
  
  .win95-window {
   width: 900px; 
   margin: 0 auto;
   padding: 3px;
   background: #C0C0C0; 
   border-top: 2px solid #FFFFFF;
   border-left: 2px solid #FFFFFF;
   border-right: 2px solid #404040;
   border-bottom: 2px solid #404040;
   box-shadow: 1px 1px 0px #000000;
  }

  .win95-window .title-bar {
   background: #055995; 
   color: white;
   font-weight: bold;
   font-family: Tahoma, sans-serif;
   padding: 4px 5px;
   margin-bottom: 3px;
  
   display: flex;
   justify-content: space-between;
   align-items: center;
  }

  .win95-window .title-bar-buttons {
   display: flex;
  }

  .win95-window .win95-button {
   width: 20px;
   height: 20px;
   background: #C0C0C0;
   border-top: 2px solid #FFFFFF;
   border-left: 2px solid #FFFFFF;
   border-right: 2px solid #404040;
   border-bottom: 2px solid #404040;
   font-size: 12px;
   font-weight: bold;
   padding: 0;
   margin-left: 3px;
   cursor: default; 
  }

  .win95-window .window-content { 
   padding: 10px;
   background: linear-gradient(45deg, #5ab3f2, #f4a5a5);
   background-size: 100% 100%;
   border-top: 2px solid #404040;
   border-left: 2px solid #404040;
   border-right: 2px solid #FFFFFF;
   border-bottom: 2px solid #FFFFFF;
   display: flex;
   align-items: center;
   justify-content: space-between;
  } 
  
  .win95-window .window-content#banner1995{
   height: 300px;
   pointer-events: none;
  } 
  
  .window-content#banner1995 img{
   z-index: 10;
  }  
  
  .banner-logo {
    flex-basis: 300px; 
    flex-shrink: 0; 
    width: 300px;
    height: auto;
    transform: translateY(58px);
  }
  
  .banner-name {
    flex-basis: 500px;
    flex-shrink: 0;
    max-width: 100%;
    height: auto;
  }
  
  /* Cool gifs on the sides */
  .Spades{
    position: fixed;
    width: 60px;
    height: 60px;
    object-fit: cover;
  }
  
  /* Stuff for the top buttons */
  .nav-bar-container {
    width: 900px;
    height: 90px;
    background: #055995; 
    padding: 10px 0px;
    margin: 0px auto; 
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: 1px 1px 0px #000000;
    position: relative;
    display: flex;
    z-index: 1;
  } 
  .nav-bar {
    width: 850px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
  }
  
  .cassette-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: Tahoma, sans-serif;
    font-weight: bold;
    color: #000000;
    background: #C0C0C0;
    padding: 5px;
    
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: 1px 1px 0px #000000;
  }
  
  .cassette-button:active {
    background: #b9b9b9;
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: none;
    z-index: 2;
  }

  .cassette-button img {
    width: 40px;  
    height: 40px;
    object-fit: contain;
    z-index: 2;
  }

  .cassette-button .button-text {
    padding: 0 10px; 
    font-size: 16px;
  }
  
  /* Stuff for the marquee */
  
  .stock-ticker{
   background-color: #000000;
   color: #26dcf4;
   font-family: Ticker;
   text-transform: uppercase;
   padding: 0px;
   border: 4px solid #C0C0C0;
   border-left: 0px;
   border-right: 0px;
   display: flex;
   font-size: 32px;
   box-shadow: 1px 1px 0px #000000;
   overflow: hidden;
   position: relative;
  }  
  
  .stock-ticker a {
   color: #26dcf4;
  }
  
  .stock-ticker img{
   vertical-align: middle; 
   margin-left: 0px;
   height: 50px;
  }  
  
  .stock-ticker a,
  .stock-ticker span {
    margin-left: 0px;
    text-decoration: none;
  }
  
  .stock-ticker-content {
    display: flex;
    width: max-content;
    position: relative;
  }
  
  /* Stuff for the grid */
  
  .cool-grid{
    display: flex;
    width: 900px;
    margin: 0 auto;
    gap: 6px;
  }
  
  .home-boxes{
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: 1px 1px 0px #000000;
    margin: 3px 0;
    padding: 10px;
    background: #C0C0C0;
    color: black;
  }
  
  .home-boxes#WebStats{
    margin: 0 0 3px 0;  
  }
  
  #who-am-I{
    display: grid;
    grid-template-columns: 55% 1fr;
    gap: 0px;
    flex: 4;
    aspect-ratio: 1/1;
  }
  
  #updates{
    flex: 1.5;
  }
  
  #sum-stuff{
    flex: 1.5;
  }
  
  #profile{
    border: 5px solid black;
    background: #0d1a24;
    border-radius: 10px;
    aspect-ratio: 1/1;
  }
  
  #profile img{
    display: flex;
    justify-content: center;
    height: 100%;
  }
  
  #icon-stack {
    margin-top: 10px;
    padding-left: 10px;
  } 
  
  #icon-stack img {
    display: block;
    width: 100%;
    margin-bottom: 5px;
  }  
  
  #profile-info{
   display: block;
   height: 200px;
   overflow-y:auto;
   border: 1px solid white;
   padding:10px;
   width:100%;
   grid-column: 1/3;
   overflow-wrap: break-word;
   font-family:Tahoma;
  }
  
  /* WebStat */
  
    #WebStats{
    flex: 1;
    height: 60px;
    font-size: 16px;
    display: flex;
    align-items: center;
  }  
  
    #WebStats img{
    height: 25px;
    width: auto;
  }  
  
  /* Key frames */
  @keyframes gradientShift {
    0% {
    background-position: 0% 100%; 
    }
  
   100% {
     background-position: 100% 0%;
    }
}