/* Generated by less 3.11.1 */
/*
File Name: style.less
Date: 02/15/21
Programmer: Denise Martinez
*/
/* Frigid Arctic Air color paletter from https://www.colourlovers.com/palette/4787675/Frigid_Arctic_Air */
/*  text and background colors */
/*
CHANGES DONE:
- Updated the visited and unvisited links in the navigation to @lightColor5 and @darkColor5 
- Kept the background color of the header area of the page to @color2 and the text color to @color1
- Updated all the headings (h1 through h3) in the main area of the page to use @greyColor5, @darkColor2, and @darkColor5
- Updated the footer heading text color with @lightColor4 and all the links to @darkColor2 and lightColor2
- Changed the visited hyperlink colors in my main section to @darkColor5
- Changed the color of the <strong> tag selector to @lightColor4
Mixins
.transparent - heading h2 on hover
.italic - h1 heading
.uppercase - h1 heading on hover
.flip - images
.text-shadow- footer h3 headings
.box-shadow- all images
.border-radius- all images
.first-letter- first letter of each paragraph is orangered.
*/
/* MOBILE STYLESHEET */
img,
video {
  max-width: 100%;
  height: auto;
}
body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  background-color: #8A53AE;
  color: #FFFFFF;
}
a:link {
  color: #f2a3c7;
}
a:visited {
  color: #52ffe4;
}
a:hover {
  transform: scale(1.1);
  display: inline-block;
}
nav {
  background-color: #35266B;
  color: #B8FFF4;
}
a:link {
  color: #ffffff;
}
a:visited {
  color: #52ffe4;
}
header {
  background-color: #E64990;
  color: #35266B;
}
a:link {
  color: #ffffff;
}
a:visited {
  color: #52ffe4;
}
footer {
  background-color: #35266B;
  color: #8A53AE;
}
a:link {
  color: #f2a3c7;
}
a:visited {
  color: #b998cf;
}
main,
header,
footer,
nav {
  padding: 1em;
}
main h3 {
  color: #52ffe4;
}
p::first-letter {
  color: orangered;
}
h1,
h2,
h3 {
  font-weight: bold;
}
h1 {
  font-size: 1.8em;
  color: #FFFFFF;
  font-style: italic;
  text-decoration-line: underline;
}
h1:hover {
  text-transform: uppercase;
  font-weight: bold;
}
h2 {
  font-size: 1.4em;
  color: #F6DAC2;
}
h2:hover {
  opacity: 50%;
}
footer h2 {
  color: #ffffff;
}
footer h3 {
  font-size: 1.1em;
  color: #b1185d;
  text-shadow: 1px 1px 0px #974ACE;
}
ul {
  list-style-position: inside;
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-left: 1em;
  text-indent: -1em;
}
li {
  line-height: 1.5em;
}
em {
  font-style: italic;
}
pre {
  font-family: "Courier New", monospace;
  white-space: pre-wrap;
}
nav {
  text-align: center;
}
main h2 {
  color: #35266B;
}
a:link {
  color: #ffffff;
}
a:visited {
  color: #52ffe4;
}
img:hover {
  transform: scaleX(-1);
}
img {
  -webkit-box-shadow: 5px 5px 5px 5px #80EFFF;
  box-shadow: 5px 5px 5px 5px #80EFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
/*

TABLET STYLESHEET

The following CSS affects all screen sizes larger than 480 pixels wide.

*/
@media only screen and (min-width: 481px) {
  body {
    font-size: 14px;
  }
  nav {
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 0;
  }
  nav li {
    display: block;
    font-weight: bold;
    text-decoration: underline;
    padding: 1em;
  }
}
/*

DESKTOP STYLESHEET

The following CSS affects all screen sizes larger than 1024 pixels wide.

*/
@media only screen and (min-width: 1025px) {
  header,
  main,
  footer {
    padding: 2em;
  }
  nav {
    list-style-type: none;
    text-align: left;
    margin: 0;
    padding: 0;
  }
  nav li {
    display: inline-block;
    padding-left: 2em;
    text-indent: -1em;
  }
}