/*Path of Light Yoga Studio
Author: Colton Allen
Date: 3/4/2025
*/



* { box-sizing: border-box; }  /*Used for sizing the box and giving its color and font*/

body {
background-color: #3F2860; /*created for editing and adjusting body such as background color and font family*/
color: #40407A;
font-family: Verdana, Arial, sans-serif;
margin: 0;
}

#wrapper {  /* wrapper created and used to put ino the webpage with background color of F5F5F5 and padding 2em*/
background-color: #F5F5F5;
padding: 2em;
}

header { /* header used for placing sunrise image and adjusting the names font and size and position*/
background-color: #40407A;
background-image: url(sunrise.jpg);
background-size: 100% 100%;
color: #FFF;
font-size: 90%;
margin-top: 50px;
min-height: 200px;
}

header a { /*header a no text decoration*/
text-decoration: none;
}

header a:link{  /*header a:link with color of FFF*/
color: #FFF;
}

header a:visited{ /*header a:visited with color of FFF(white)*/
color: #FFF;
}

header a:hover{ /*header a: hover with color of EDF5F5*/
color: #EDF5F5;
}

.home, .content{  /* .home and .content used oro adjusting the height and padding position*/
height: 20vh;
padding-left: 10%;
padding-top: 2em;
}

nav { /*created for navigation links and area by adjusting its width, position, padding and bakground color*/
background-color: #FFF;
position: fixed;
left: 0;
top: 0;
margin: 0;
padding: 0.5em 0 1em 1em;
text-align: right;
width: 100%;
z-index: 9999;
}

nav a{  /*nav a created with no text decor and display of block*/
display: block;
text-decoration: none;
}

nav a:link{  /*nav a link created with text color of 3F2860*/
color: #3F2860;
}

nav a:visited{  /*nav a visited created with text color of 497777 and used for navigation links that have been visisted before changing color*/
color: #497777;
}

nav a:hover{ /* nav a hover used for navigation links on web paage with color A26100*/
color: #A26100;
}

nav ul{   /*nav unlisted list created with flex display, margin of 0, font size of 1.2em, and flexwrap set to :wrap*/
display: flex;
flex-flow: row wrap;
font-size: 1.2em;
list-style-type: none;
margin: 0;
}

nav li{ /*nav listed created with padding top and bottom, inline display, and width of 40%*/
display: inline;
padding: 0 1em;
width: 40%;
}

#mathero{ /*mathero created of yogamat and positioning*/
background-image: url(yogamat.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 300px;
display: none;
}

#loungehero{ /*loungehero created of yogalounge image and positioning*/
background-image: url(yogalounge.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 300px;
display: none;
}

#mobile{ /*mobie created for mobile devices on webpage with display of inline*/
display: inline;
}

#desktop{ /*desktop created for desktop devices on webpage with display of none*/
display: none;
}

.studio{  /*studio created with font style being italic*/
font-style: italic;
}

section { /* section created with 0.5em padding left and 0.5em to the right of padding*/
padding-left: .5em;
padding-right: .5em;
text-align : center;

}

footer{ /*footer used for infromation created for adjusting font size, font type and to align*/
font-size: .60em;
font-style: italic;
text-align: center;
}

table{ /*table used for table information on webpage and used for adhsuting positioning, margin, border, and width*/

width: 30vw;
border : 1px solid rgb(64, 24, 138);
border-collapse: collapse;
margin-bottom: 1em;
}

td, th{ /*td and th created with padding of 5 pixels and a border of 1 pixel solid with color 3F2860*/
padding: 5px;
border : 1px solid rgb(64, 24, 138);
}

tr:nth-child(even){ /*tr created with background color of DBE8E9*/
background-color : #DBE8E9
}

caption{ /*caption created for adjusting font and size of font on webpage*/
	margin: 1em; 
margin: 1em;
font-size: 120% ;
font-weight: bold;
}
form { /*form created for flex direction, padding positioning and width*/
    display: flex;
    flex-direction: column;
    padding-left: 1em;
    width: 80%;
  }
  
  input, textarea { /*input and text area created with margin bottom of 0.5em*/
    margin-bottom: .5em;
  }
 
@media (min-width: 600px){ /*@media created and used for nav unlisted list, sections, images, flow, and input. used for mutliple media devices such as phone or computer and is as seen below adjusted to different screens*/
    form { /*form created for adjusting width, grid gap and template columns on webpage*/
        width: 60%;
        display: grid;
        grid-gap: 1em;
        grid-template-columns: 12em 1fr;
      }
      input[type="submit"] { /*input created for grid coolumn and width*/
        grid-column: 2;
        width: 9em;
      }
      
  label {
    text-align: right; /*label text alighn set to right*/
  }
}

nav li { /*nav li with width of 7em*/
width: 7em;
}

section { /*section set to paddring right and left to 2em*/
padding-left: 2em;
padding-right: 2em;
}
#mathero, #loungehero {
display: block; /*mathero and loungehero image adjustments created*/
padding-bottom: 1em;
}

#flow { /*flow created with display set to flex and row flex direction*/
display: flex;
flex-direction: row;
}

#mobile {  /*mobile/smaller devices display set to none*/
display: none;
}

#desktop { /*desktop or bigger devies set her ti display of inline*/
display: inline;
}


@media (min-width: 1024px) { /*media query created and used for adjusting font size, height, padding position and margin in different areas such as header*/
header { 
font-size: 120%;
}

.home {
height: 50vh;/*.home created to position padding*/
padding-left: 8em;
padding-top: 5em;
}

.content {
height: 30vh;/*.contentcreated to position padding*/
padding-left: 8em;
padding-top: 1em;
}

#wrapper {
margin: auto;  /* wrapper created with an auto margin and width of 80 percent*/
width: 80%;
}
}