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

    img {
        max-width: 100%
    }
      body {
      /*The Image is a gas column on the Eagle Nebula. Photo taken by NASA. Source: https://www.flickr.com/photos/nasahubble/54459956556/ */
        background       : url(./EagleNebula_NASA.jpg) no-repeat center, url(/neocities.png) ; 
        max-width        : 1000px ;  
        border           : 2 solid black ;
        background-color : white ;
        margin           : auto;
      }
      
/* Lets start defining the style for big screen users */
    @media (min-width: 769px) {
      .container {
          max-width: 1024px;
          display: grid ;
          grid-gap: 10px ;
          grid-template: 
             "header header"
             "main sidebar"
             "footer footer"
             / 1fr 200px;
       }

/* This one is for not_found.html */
      .container.notfound {
          max-width: 1024px;
          display: grid ;
          grid-gap: 10px ;
          grid-template: 
             "header"
             "main"
             "footer"
             / 1fr ;
      }
      header { grid-area: header; }
      main { grid-area: main; }
      aside { grid-area: sidebar; }
      footer { grid-area: footer; }
    }

    header {
       font-weight      : bold ;
       background-color : #0036BF ;
       color            : #E8E8E8 ;
       text-align       : center; 
       border           : 4px outset #051494 ;
    }
    main {
       /* background-color : LightBlue   ; */
       background       : rgb(0,0,0,0.8) ;
       color            : white ;
       padding          : 10px ; 
       font-size        : 14pt ; 
    }
    .main_notfound {
       background       : rgb(0,0,0,0.8) ;
       color            : white ;
       padding          : 10px ; 
       font-size        : 14pt ; 
       text-align       : center ;
    } 
    .sidebar {
       max-width        : 250px ;  
       /* padding-left     : 15px; */
       /* margin-left      : 15px;   */
       background-color : #0036BF;  
       color            : #E8E8E8 ; 
       border           : 4px outset #051494 ;
       font             : Arial, Helvetica, sans-serif; 
       font-size        : 12pt;
       text-align       : center;
    }  
      
    hr {
       display          : block;
       height           : 1px;
       border           : 0;
       border-top       : 5px solid #7b89ad;
       margin           : 1em 0;
       padding          : 0;
    }
/* All of this will be for the sidebar menu */  
    .menu{
       width            : 180px;
       margin-left      : 7px;
       margin-right     : 0px; 
    }
    .menu ul {
       padding: 0;
    }
    .menu li {
       list-style       : none; 
       background-color : #0036BF; 
       margin           : 0px 0px;
       text-align       : center; 
       padding          : 5px;
       cursor           : pointer;
       border           : 5px outset #7b89ad;
       margin-bottom    : 2px;
    }
    .menu li:hover {
       list-style       : none; 
       background-color : #477bff; 
       border           : 5px inset #7b89ad;
       margin-bottom    : 2px;
    }
    .menu li a{
       text-decoration  : none; 
       color            : white;
      }
    .clock {
       font             : Arial, Helvetica, sans-serif;
       font-size        : 22pt; 
       color            : #E8E8E8; 
    }

/* All of this will be for buttons on the text */
    .textbutton ul {
       padding          : 0;
       margin-left      : 100px;
       margin-right     : 100px;
    }
    .textbutton li {
       list-style       : none; 
       background-color : #0036BF; 
       margin           : 0px 0px;
       text-align       : center; 
       padding          : 5px;
       cursor           : pointer;
       border           : 5px outset #7b89ad;
       margin-bottom    : 2px;
    }
    .textbutton li:hover {
       list-style       : none; 
       background-color : #477bff; 
       border           : 5px inset #7b89ad;
       margin-bottom    : 2px;
    }
    .textbutton li a{
       text-decoration  : none; 
       color            : white;
    }

/* This is the style for small screen such as a smartphone */
    @media (max-width: 768px) {
      aside {
        display: none;
        .container {
           max-width: 1024px;
           display: grid ;
           grid-gap: 10px ;
           grid-template: 
             "header header"
             "main "
             "footer footer"
             / 1fr ;
        }
      }
    }