* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}
body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1rem;
   line-height: 1.2rem;
   color:azure;
   /* background-image: linear-gradient(rgb(196, 0, 0),rgb(49, 1, 1)); */
   background-image: url(../images/Dimples-Bg.jpg);
   justify-content: center;
   align-items: center;
   height: 100vh;
   text-align: center;
}
header {
   width: 1000px;
   border: solid 1px azure;
   border-radius: 15px;
   margin: 30px auto 0px auto;
   padding: 10px 20px 10px 20px;
}
#header-text {
   padding: 10px 0px 10px 0px;
   margin-bottom: 10px;;
 }
#example {
   text-align: left;
   border: dashed 1px azure;
   border-radius: 15px;
   padding: 15px;
}
.example-title {
   font-weight: bold;
}
.example-text {
   padding: 8px;
}
#steps {
   text-align: left;
   padding: 15px;
 }
main {
   width: 1000px;
   justify-content: space-evenly;
   border: solid 1px azure;
   border-radius: 15px;
   margin: 50px auto;
   padding: 20px;
}
#set-exposure-area, #adjust-exposure-area {
   width: 100%;
   display: flex;
   border: none;
 }
#f-stop-full-setting-container, #f-stop-half-setting-container, #f-stop-third-setting-container,
#shutter-speed-full-setting-container, #shutter-speed-half-setting-container, #shutter-speed-third-setting-container,
#iso-full-setting-container, #iso-half-setting-container, #iso-third-setting-container {

   padding-top: 6px;
}
#f-stop-column, #shutter-speed-column, #iso-column, #set-exposure-btn,
#adjust-f-stop-column, #adjust-shutter-speed-column, #adjust-iso-column, #adjust-exposure-btn {
   width: 25%;
   text-align: center;
   border: solid 1px azure;
   border-radius: 15px;
   padding: 20px;
   margin: 10px auto;
}
#set-exposure-btn,
#baselineEx {
   width: 12.5%;
   text-align: center;
   border: solid 1px azure;
   border-radius: 15px;
   padding: 20px;
   margin: 10px auto;
}

#adjust-value-container {
   width: 25%;
   text-align: center;
   border: solid 1px azure;
   border-radius: 15px;
   padding: 20px;
   margin: 10px auto;
}
.hidden {
   display: none;
}
.hidden.active {
   display: block;
}
.green {
   color: rgb(47, 255, 141);
   font-weight: bold;
}
#adjust-exposure-btn{
   display: none;
}
/* For mobile */

@media screen and (min-device-width: 300px) and (max-device-width: 600px) {
   body {
      font-size: .6rem;
      line-height: .7rem;
      height: 120vh;
     }
   header {
      width: 90%;
   }
   main {
      width: 90%;
      height: auto;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      justify-content: space-evenly;
      border: solid 10px azure;
      border-radius: 15px;
      margin: 30px auto 40px auto;
      padding: 30px 0px;
   }
   #set-exposure-area, #adjust-exposure-area {

      display: grid;
      border: none;
    }
    #set-exposure-area {
      grid-column: 1/ span 3;
      margin-bottom: 20px;
    }

    #adjust-exposure-area {
      grid-column: 4/span 6;
      margin-bottom: 20px;
    }
   #f-stop-column, #shutter-speed-column, #iso-column, #set-exposure-btn,
   #adjust-f-stop-column, #adjust-shutter-speed-column, #adjust-iso-column, #adjust-exposure-btn {
   width: 90%;
   font-size: 2.4rem;
   line-height: 3rem;
   text-align: center;
   border: none;
   border-radius: 15px;
   padding: 20px 0px;
   margin: 0px auto;
}
#steps {
   font-size: .5rem;
   line-height: .7rem;
   text-align: left;
   padding: 15px;
 }
#f-stop-full-setting-container, #f-stop-half-setting-container, #f-stop-third-setting-container,
#shutter-speed-full-setting-container, #shutter-speed-half-setting-container, #shutter-speed-third-setting-container,
#iso-full-setting-container, #iso-half-setting-container, #iso-third-setting-container {
   font-size: 2.4rem;
   line-height: 3rem;
   height: 240px;
   padding-top: 10px;
}
#adjust-f-stop-column, #adjust-shutter-speed-column, #adjust-iso-column, #adjust-exposure-btn {
   height: 430px;
   align-items: center;
   vertical-align: middle;
   align-content: center;
   padding-top: 160px;

}

#adjust-value-container {

   width: 90%;
   font-size: 2.4rem;
   line-height: 3rem;
   height: 280px;
   padding-top: 100px;
   border: none;


}
#f-stops, #f-stop-full-settings, #f-stop-half-settings, #f-stop-third-settings,
#shutter-speeds, #shutter-speed-full-settings, #shutter-speed-half-settings, #shutter-speed-third-settings,
#isos, #iso-full-settings, #iso-half-settings, #iso-third-settings,
#adjust-f-stops, #adjust-f-stop-full-settings, #adjust-f-stop-half-settings, #adjust-f-stop-third-settings,
#adjust-shutter-speeds, #adjust-shutter-speed-full-settings, #adjust-shutter-speed-half-settings, #adjust-shutter-speed-third-settings,
#adjust-isos, #adjust-iso-full-settings, #adjust-iso-half-settings, #adjust-iso-third-settings
 {
   text-align: center;
   font-size: 2.4rem;
   line-height: 3rem;
}
#baselineEx {
   font-size: 2.4rem;
   line-height: 3rem;
   width: 90%;
   text-align: center;
   border: none;
   border-radius: 15px;
   padding: 20px;
   margin: 10px auto;
}
 }