/* 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." */
   /*Basic*/
    * {
      box-sizing: border-box;
    }
    
    a{
     text-decoration: none; 
    }
    
    a:link{
      color: orange;
    }
    
    a:visited{
      color: orange;
    }
    
    /*Top of page, should be universal on all pages except shrines*/
    body{
      background-color: navy;
      color: pink;
      font-family: Courier;
    }
    
    @media (min-width: 1336px){
    
    #majorLink{
      margin: 30px auto;
      padding: 0 20px;
      text-align: center;
    }
    
    .header{
      border: 4mm ridge rgb(250 200 90 / 1);
      width: 80%;
      margin: auto;
    }
    
    .select{
      display: inline-block;
      border: 2mm outset rgb(150 90 230 / 1);
      border-radius: 10px;
      background-color: rgb(60 120 220 / 0.3);
      font-size: 22px;
      padding: 10px 20px;
      text-align: center;
    }
      

   .title {
    text-align: center;
    }
    
   .major{
     margin-top: 10px;
    }
    
    /* Right */
    .right-bar{
      display: block;
      float: right;
      margin: 0% 10.4% 0.5% 1.04%;
      height: 156.25%;
      width: 11.9%;
      text-align: center;
    }
    
    .links{
     text-align: center;
     border: 2mm ridge rgb(70 120 250 / 1);
     background-color: rgb(70 50 190 / 0.5);
     margin: 0;
     height: 200px;
     overflow-y: auto;
    }
    /* Left */
    .left-bar{
      display: block;
      float: left;
      margin: 0 1.04% 0 10.4%;
      height: 156.25%;
      width: 11.9%;
      text-align: center;
    }
    
    .temp{
     background-size: contain;
     background-repeat: no-repeat;
     text-align: center;
     border: 2mm ridge rgb(70 120 250 / 1);
     width: 100%;
     height: 100%;
    }

    /* Center */
    .center-bar {
     display: block;
     position: relative;
     width: 52.6%;
     height: auto;
     margin: auto;
    }
    
    .mini-about {
     text-align: center;
     border: 2mm ridge rgb(70 120 250 / 1);
     background-color: rgb(70 50 190 / 0.5);
     height: auto;
    }
    
    .stamps{
      border: 2mm ridge rgb(70 120 250 / 1);
      background-color: rgb(70 50 190 / 0.5);
      margin: 5px 0px;
    }
        
    #intro {
      text-align: left;
      width: 65%;
    }
    
    #ID{
      width: 292px;
      height: 476.5px;
      float: right;
      margin-right: 30px;
    }
    
    #Art{
      margin: 0px 20px;
      width: 30%;
      height: 30%;
    }
    
    #info{
      text-align: left;
      overflow-y: auto;
      margin-bottom: 5px;
      width: 65%;
    }
    
    #goofy{
      width: 120px;
      height: 120px;
    }
    
    .updates{
      border: 2mm ridge rgb(70 120 250 / 1);
      text-align: center;
      background-color: rgb(70 50 190 / 0.5);
      width: 50%;
      float: left;
      height: 300px;
    }
    
    .blog{
      width: 50%;
      text-align: center;
      border: 2mm ridge rgb(70 120 250 / 1);
      background-color: rgb(70 50 190 / 0.5);
      float: right;
      height: 300px;
    }
    
    #list{
     margin-left: 5%;
     border: 2mm outset rgb(150 90 230 / 1);
     background-color: rgb(120 120 90 / 0.3);
     border-radius: 10px;
     width: 90%;
     height: 40%;
     overflow-y: auto;
     text-align: left;
    }
    

     .linksMobile{
       display: none;
      }
      
     .webDev{
      display: block;
      position: relative;
      width: 80%;
      height: auto;
      margin: auto;
      border: 2mm ridge rgb(70 120 250 / 1);
      background-color: rgb(70 50 190 / 0.5);
      margin-top: 10px;
      }
      
      #imgEx{
       width: 91px;
       height: 30px;
      }
      
      #gifEx{
       width: 70px;
       height: 40px;
      }
      
      #layoutEx{
       float: right;
       width: 421px;
       height: 238px;
       margin: 0 10px;
      }
    }
    
    /* Mobile styles */
    /* AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA */
    @media (max-width: 414px){
      
     #majorLink{
        margin: 30px auto;
        padding: 0 20px;
        text-align: center;
      }
      
      .header{
        border: 4mm ridge rgb(250 200 90 / 1);
        width: 80%;
        margin: auto;
      }
      
      .select{
        display: inline-block;
        border: 2mm outset rgb(150 90 230 / 1);
        border-radius: 10px;
        background-color: rgb(60 120 220 / 0.3);   
        font-size: 22px;
        padding: 10px 20px;
        text-align: center;
      }
        
  
     .title {
      text-align: center;
      }
      
     .major{
       margin-top: 10px;
      }
      
      /* Right Mobile */
      .right-bar{
        display: none;
      }
      
      /* Left Mobile */
      .left-bar{
        display: none;
      }
      
      .temp{
       background-size: contain;
       background-repeat: no-repeat;
       text-align: center;
       border: 2mm ridge rgb(70 120 250 / 1);
       width: 100%;
       height: 100%;
      }
  
      /* Center Mobile */
      .center-bar {
       display: block;
       position: relative;
       width: 80%;
       height: auto;
       margin: auto;
      }
      
      .mini-about {
       text-align: center;
       border: 2mm ridge rgb(70 120 250 / 1);
       background-color: rgb(70 50 190 / 0.5);    
       height: auto;
      }
      
      .stamps{
        border: 2mm ridge rgb(70 120 250 / 1);
        background-color: rgb(70 50 190 / 0.5);     
        margin: 5px 0px;
        text-align: center;
      }
          
      #intro {
        text-align: left;
      }
      
      #ID{
        width: 100%;
        height: 100%;
        float: right;
      }
      
      #Apex{
        margin: 0px 20px;
        width: 286.6px;
        height: 258.3px;
      }
      
      #info{
        text-align: left;
        overflow-y: auto;
        margin: 0;
      }
      
      #goofy{
        width: 120px;
        height: 120px;
      }
      
      .updates{
        border: 2mm ridge rgb(70 120 250 / 1);
        background-color: rgb(70 50 190 / 0.5);    
        text-align: center;
        height: 400px;
        margin-bottom: 5px;
      }
      
      .blog{
        text-align: center;
        border: 2mm ridge rgb(70 120 250 / 1);
        background-color: rgb(70 50 190 / 0.5);      
        height: 300px;
        margin-bottom: 5px;
      }
      
      #list{
       margin-left: 5%;
       margin-bottom: 10px;
       border: 2mm outset rgb(150 90 230 / 1);
       border-radius: 10px;
       background-color: rgb(120 120 90 / 0.3);
       width: 90%;
       height: 40%;
       overflow-y: auto;
       text-align: left;
      }
      
      .linksMobile{
       text-align: center;
       border: 2mm ridge rgb(70 120 250 / 1);
       background-color: rgb(70 50 190 / 0.5);   
       margin: 0;
       height: 200px;
       overflow-y: auto;
      }
    
      .webDev{
        width: 80%;
      }
    }
    
    /* IPad styles */
    /* AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Part 2 */
    @media (max-width: 1366px) and (min-width: 415px){
     #majorLink{
        margin: 30px auto;
        padding: 0 20px;
        text-align: center;
      }
      
      .header{
        border: 4mm ridge rgb(250 200 90 / 1);
        width: 80%;
        margin: auto;
      }
      
      .select{
        display: inline-block;
        border: 2mm outset rgb(150 90 230 / 1);
        border-radius: 10px;
        background-color: rgb(60 120 220 / 0.3);
        font-size: 22px;
        padding: 10px 20px;
        text-align: center;
      }
        
  
     .title {
      text-align: center;
      }
      
     .major{
       margin-top: 10px;
      }
      
      /* Right Mobile */
      .right-bar{
        display: none;
      }
      
      /* Left Mobile */
      .left-bar{
        display: none;
      }
      
      .temp{
       background-size: contain;
       background-repeat: no-repeat;
       text-align: center;
       border: 2px solid red;
       width: 100%;
       height: 100%;
      }
  
      /* Center Mobile */
      .center-bar {
       display: block;
       position: relative;
       width: 80%;
       height: auto;
       margin: auto;
      }
      
      .mini-about {
       text-align: center;
       border: 2mm ridge rgb(70 120 250 / 1);
       background-color: rgb(70 50 190 / 0.5);
       height: auto;
      }
      
      .stamps{
       border: 2mm ridge rgb(70 120 250 / 1);
       background-color: rgb(70 50 190 / 0.5);    
       margin: 5px 0px;
       text-align: center;
      }
          
      #intro {
        text-align: left;
      }
      
      #ID{
        width: 292px;
        height: 476.5px;
        float: right;
        margin-right: 30px;
      }
    
      #Apex{
        margin: 0px 20px;
        width: 286.6px;
        height: 258.3px;
      }
      
      #info{
        text-align: left;
        overflow-y: auto;
        margin: 0;
      }
      
      #goofy{
        width: 120px;
        height: 120px;
      }
      
      .updates{
        border: 2mm ridge rgb(70 120 250 / 1);
        background-color: rgb(70 50 190 / 0.5);      
        text-align: center;
        height: 300px;
        margin-bottom: 5px;
      }
      
      .blog{
        text-align: center;
        border: 2mm ridge rgb(70 120 250 / 1);
        background-color: rgb(70 50 190 / 0.5);     
        height: 300px;
        margin-bottom: 5px;
      }
      
      #list{
       margin-left: 5%;
       margin-bottom: 10px;
       border: 2mm outset rgb(150 90 230 / 1);
       border-radius: 10px;
       background-color: rgb(120 120 90 / 0.3);
       width: 90%;
       height: 40%;
       overflow-y: auto;
       text-align: left;
      }
      
      .linksMobile{
       text-align: center;
       border: 2mm ridge rgb(70 120 250 / 1);
       background-color: rgb(70 50 190 / 0.5);
       margin: 0;
       height: 200px;
       overflow-y: auto;
      }
      
      .webDev{
       width: 80%;
      }
    
    }