@charset "UTF-8";

/* CSS reset */
article,aside,figure,footer,header,hgroup,menu,nav,section{display:block;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:inherit;}
img{color:transparent;font-size:0;border:0;vertical-align:middle;-ms-interpolation-mode:bicubic;}
abbr[title]{border-bottom:dotted 1px;}


html, body {
  width: 100%;
  height: 100%;
  color: #000;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: "Times New Roman", "Times", serif;
}
#box {
  background-image: url("./snowscape.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: hsla(240, 100%, 97%, 1.0);
}
/* default colors - set all colors when you set any */
:link { color: #0000EE; }
:visited { color: #551A8B; }

:link { color: hsl(203, 20%, 24%); }
:visited { color: hsl(24, 58%, 25%); }


img {
  border-style: none;
}
#box {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.project {
  display: block;
  padding: 1em;
  box-sizing: border-box;
  font-size: 1.33em;
  text-align: center;
  cursor: pointer;
  text-shadow: hsla(240, 15%, 89%, 1) 0 0 10px;
}
.project p, .project h2, .project h3 {
  box-shadow:
    34px 10px 10px hsla(240, 15%, 89%, 1),
    -34px 10px 10px hsla(240, 15%, 89%, 1),
    40px 0px 10px hsla(240, 15%, 89%, 1),
    -40px 0px 10px hsla(240, 15%, 89%, 1),
    34px -10px 10px hsla(240, 15%, 89%, 1),
    -34px -10px 10px hsla(240, 15%, 89%, 1);
  background-color: hsla(240, 15%, 89%, 1);
  border-radius: 45px;
}
.project:hover p, .project:hover h2, .project:hover h3,
.project:focus p, .project:focus h2, .project:focus h3 {
  box-shadow:
    40px 10px 20px hsla(240, 15%, 100%, 1),
    -40px 10px 20px hsla(240, 15%, 100%, 1),
    40px 0px 20px hsla(240, 15%, 100%, 1),
    -40px 0px 20px hsla(240, 15%, 100%, 1),
    40px -10px 20px hsla(240, 15%, 100%, 1),
    -40px -10px 20px hsla(240, 15%, 100%, 1),
    30px 20px 20px hsla(240, 15%, 100%, 1),
    -30px -20px 20px hsla(240, 15%, 100%, 1),
    30px -20px 20px hsla(240, 15%, 100%, 1),
    -30px 20px 20px hsla(240, 15%, 100%, 1);
  background-color: hsla(240, 15%, 100%, 1);
}
#head {
  text-align: center;
  flex: 0 0 auto;
  padding-bottom: 2.7em;
  color: hsl(24, 58%, 17%);
  background-image: linear-gradient(to bottom, hsla(240, 15%, 89%, 1) 0%, hsla(240, 15%, 89%, 0.9) 80%, hsla(240, 15%, 89%, 0.7) 86%, hsla(240, 15%, 89%, 0.4) 93%, transparent 100%);
}
#head h1 {
  font-size: 2em;
  font-weight: bold;
  padding: 0.62em 0 0.25em;
  box-sizing: border-box;
}
.projectbox {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
#swampland {
  text-decoration: none;
}
#swampland h2 {
  text-decoration: underline;
}
#swampland h3, #swampland p {
  color: hsl(24, 18%, 5%);
}
#sculpture img {
  display: none;
}