/* ++++++++ GLOBAL RULES ++++++++++++ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

:root{
  --primary-lightBlue: #BFDBF7;
  --primary-blue: #014F86;  
  --primary-darkBlue: #012A4A;
  --secondary-white: #FCFCFC;
  --secondary-grey: #E0E2E6;
  --secondary-green: #06d6a0;
  --secondary-green-rgb: 6,214,160;
  font-family: 'Montserrat', sans-serif;
  color:var(--primary-darkBlue);
}

main{
margin-top: 40px;
min-height:50vh;
}

#grid-wrapper{
  display: grid;
  grid-template-columns: 1fr,1fr,1fr,1fr;
  grid-auto-rows: minmax(100px,auto);

}
/* ++++++++ HEADER RULES ++++++++++++ */
header {
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 1em 1em 0;
  color:var(--primary-darkBlue);
}

h1{
  display: none;
}

header>ul{
  width:35%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-weight: 600;
 }

 header>ul>li{
  padding-top:10px;
  font-size: 16px;
 }
 
#link-myWorkouts{
  background-color:var(--secondary-green);
  border-radius: 23px;
  height:25px;
  width:120px;
  padding:10px 0px 0px 10px;
}

li a{
  text-decoration: none;
  color: var(--primary-darkBlue);
}

header a:visited {
  color: var(--primary-darkBlue);
}
header a:hover{
  text-decoration: underline 3px solid var(--primary-darkBlue);
}
/* ++++++++++++ FOOTER RULES +++++++++++++++ */
footer{
  flex:none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(100px,auto);
  column-gap: 4em;
  padding: 0px 10px;
  background-color: var(--primary-darkBlue);
  color: var(--secondary-white);
}

footer p{
  color:var(--secondary-white);
}

footer h3{
  color:var(--secondary-white);
}

footer a{
  color: var(--secondary-white);
}

footer a:visited{
  color: var(--secondary-white);
}

footer a:hover{
  text-decoration:  underline 3px solid var(--secondary-white);
}

#footer-logo-section{
  grid-column: 1/2;
}

#footer-logo{
  margin: 20px;
}

#footer-company-section{
  grid-column: 2/3;
}

#footer-company-section h3, #footer-help-section h3{
  margin:10px;
  font-size:x-large;
  font-weight:600;
}

#footer-company-section li, #footer-help-section li{
  margin:10px;
}

#footer-help-section{
  grid-column: 3/4;
}

#footer-copyright-section{
  grid-row: 2/3;
  grid-column: 1/5;
}

hr{
  display: block;
  width:101%;
  margin: 25px 0px 25px -.5%;
}

#footer-copyright-section p:first-of-type{
  display:inline-flex;
  float:left;
}

#footer-copyright-section p:last-of-type{
  display: inline-flex;
  float:right;
}