@charset "utf-8";
/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 5
   Review Assignment
   
   Author: Ayinde Mustapha 
   Date: 10/31/2025       
      
   Filename: tf_styles4.css

   This file contains the screen styles used with the Trusted
   Friends blog tips

*/


/* Import Basic Design Styles Used on All Screens */

@import url("tf_designs.css");


/* General Flex Styles */

body {
   display: flex;
   flex-flow: row wrap;
   gap: 1rem;
}

#left {
   flex: 1 8 130px;
   min-width: 130px;
}

#right {
   flex: 8 1 351px;
   min-width: 300px;
}

.tips {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 1rem;
}

.tips>article {
   flex: 2 1 65%;
   min-width: 300px;
}

.tips>aside {
   flex: 1 1 30%;
   min-width: 250px;
}

nav.horizontal ul {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
}

img {
   display: block;
   max-width: 100%;
   height: auto;
}

/* ===============================
   Mobile Devices: 0 to 480px
   =============================== */
@media only screen and (max-width: 480px) {
   nav.horizontal a {
      font-size: 1.5em;
      line-height: 2.2em;
   }

   aside {
      display: none;
      /* hide asides on very small screens */
   }

   /* Archive links in multiple columns */
   nav.vertical ul {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      height: 240px;
   }

   /* Left section near bottom */
   #left {
      order: 99;
   }

   /* Footer at bottom */
   body>footer {
      order: 100;
   }

   /* Show navicon */
   a#navicon {
      display: block;
   }

   /* Hide nav list by default */
   nav.horizontal ul {
      display: none;
   }

   /* Reveal nav on hover/tap */
   a#navicon:hover+ul,
   nav.horizontal ul:hover {
      display: block;
   }

   /* Stack article + aside */
   .tips {
      flex-direction: column;
   }

   .tips>aside {
      flex-basis: auto;
      display: block;
   }
}

/* ===============================
	Mobile Devices: 0 to 480px 
   ===============================
*/


@media screen and (min-width: 481px) {
   nav.horizontal ul {
      height: 160px;
   }

   ul.mainmenu>li {
      float: left;
      position: relative;
      width: 20%;
   }

   ul.submenu {
      box-shadow: rgb(51, 51, 51) 5px 5px 15px;
      position: absolute;
      width: 200%;
   }
}

/* ============================================
	Tablet and Desktop Devices: 481px or more 
   ============================================
*/

@media only screen and (min-width: 769px) {
   ul.submenu {
      background: transparent;
      box-shadow: none;
      display: block;
      position: relative;
      width: 100%;
   }

   nav.horizontal a.submenuTitle {
      display: none;
   }
}