/* Box Model Hack */
* {
  box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/
html{
  font-size: 62.5%;
}
body {
  font-family: 'Noto Sans', sans-serif;
}
article{
  background-color: #C2EABD;
}
header{
  /* background-color: #465362; */
  font-size: 2rem;
}
header a{
  color: #011936;
}
header a:hover{
  color: #ed254e;
  /* text-decoration: underline solid #ed254e; */
}
article ul{
  list-style: none;
}
article ul li a{
  font-size: 4rem;
  color: #465362;
}
article ul li a:hover{
  color: #ed254e;
}
/* footer, small{
  background-color: #011936;
} */
footer a{
  color: #011936;
}
footer a:hover{
  color: #ed254e;
}
small{
  color: #011936;
  display: flex;
  justify-content: left;
}
h1{
  font-size: 4.5rem;
}
h2{
  font-size: 3.5rem;
}
p{
  font-size: 2.5rem;
}
ul{
  text-decoration: none;
}
#copyright{
  color:#465362;
  opacity: 50%;
}
.headerIcon{
  height:25px;
}
.footerIcon{
  height:15px;
}
/******************************************
/* LAYOUT
/*******************************************/
h1{
  margin-top: 0;
}
a{
  text-decoration: none;
}
ul{
  list-style: none;
}
article{
  margin-left: 6rem;
  padding-left: 8rem;
}
article h1{
  margin-left: -12rem;
  padding-top: 5rem;
}
article ul{
  padding-bottom: 5rem;
  padding-left: 0;
}
header, nav{
  display: flex;
  justify-content: center;
}
header nav, header nav ul{
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  /* border: 1px solid red; */
}
footer {
  display: flex;
  justify-content: left;
  gap: 2rem;
}
footer nav, footer nav ul{
  display: flex;
  justify-content: space-around;
  gap: 2rem;
}
footer nav ul{
  padding-left:8rem;
}
#submitButton{
  margin-bottom:2rem;
}
/* #copyright{
  display: flex;
  justify-content: right;
}
small{
  display: flex;
  justify-content: left;
} */


/******************************************
/* ADDITIONAL STYLES
/*******************************************/
@media all and (max-width:480px) {
  img{
    width: 85%;
    height: 85%;
  }
  article{
    margin-left: 2rem;
    padding-left: 4rem;
  }
  article h1{
    margin-left: -4rem;
    padding-top: 2rem;
  }
}