/*
 * js_script.css
 */


/* ID's */
#content { width: 80%; margin: 0 auto; }
 
/* Classes */
.no-js {
   background: #fff3cd;
   border: 2px solid #ffc107;
   padding: 25px;
   border-radius: 8px;
   margin-bottom: 30px;
   color: #664d03;
}

.js-enabled {
   display: none;
   background: #d4edda;
   border: 2px solid #28a745;
   padding: 25px;
   border-radius: 8px;
   color: #155724;
}

.report {
   margin-top: 40px;
   padding: 20px;
   background: #f8f9fa;
   border-radius: 8px;
   font-family: monospace;
}

/* Elements */

/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
   #content { width: 100%; }
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
   #content { width: 100%; }
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
   #content { width: 100%; }
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
   #content { width: 100%; }
}