fiona-stylesheet.css

* {
  box-sizing: border-box;
}

body {
  font-family: "Helvetica";
  margin: 0%;
  scroll-behavior: .5s;
}

.theme{
  --darkest: #580000;
  --dark: #aa1010;
  --primary: #dd0f0fa4;
  --secondary: #ec3636;
  --tertiary: #ffb3b3;
  --quaternary: rgb(255, 255, 255);
  background-color: var(--quaternary);
}

@font-face{
  font-family: "Helvetica";
}



.font2 {
  font-family: "Helvetica";
}

.header {
  color: #ffffff;
  background-color: white;
  background: rgb(2,0,36);
  background-image: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%), url("272_MarsInSight_poster-jpg.jpeg");
}

h1 {
  text-align: center;
  filter: brightness(100%);
  font-family: "helvetica";
  font-size: 80px;
}

h2 {
  text-align: center;
  filter: brightness(100%);
  font-family: "helvetica";
  font-size: 36px;
}

h3 {
  text-align: center;
  filter: brightness(100%);
  font-family: "helvetica";
  font-size: 24px;
}

p {
  font-family: "helvetica";
  font-size: 18px;
}

.header2 {
  color: #ffffff;
  padding-top: 10%;
  padding-bottom: 1%;
  background-image: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%), url("272_MarsInSight_poster-jpg.jpeg");
}

.center {
  align-content: center;
  align-items: center;
  align-self: center;
  text-align: center;
  -webkit-box-align: center;
}

.navbar {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
  position: sticky;
  border-radius: 25px;
  height: 12%;
  width: 100%;
  z-index: 3;
  margin-top: 0.5%;
}

.navbar a {
  display: inline-block;
  text-align: center;
  align-items: center;
  align-content: center;
  text-decoration: none;
}

.navbar a.right {
  line-height: 50px;
  text-align: center;
  float: right;
  padding: 5px 25px;
  border-radius: 25px;
  height: 100%;
}

.navbar a.left {
  display: flex;
  align-items: center;
  line-height: 50px;
  text-align: center;
  float: left;
  padding: 0px 25px;
  border-radius: 25px;
  height: 100%;
}

.navbar a:hover {
  background-color: #0000000c;
  color: #dbdbdb;
}

#sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  background-color: var(--primary);
  overflow-x: hidden;
  transition: 0.5s;
}

#sidenav a {
  padding: 48px 0;
  text-decoration: none;
  font-size: 24px;
  color: var(--tertiary);
  display: block;
  transition: 0.3s;
}

#sidenav a:hover {
  color: var(--quaternary);
}

#sidenav #closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 64px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  #sidenav {
      padding-top: 15px;
  }
  #sidenav a {
      font-size: 18px;
  }
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

footer {
  overflow: auto;
  text-align: center;
  min-height: auto;
  width: 100%;
  height: min-content;
  position: absolute;
  padding-top: 10px;
  background: linear-gradient(180deg, var(--secondary) 0%, var(--dark) 100%);
}

footer img {
  padding: 1%;
  height: 60px;
}

.invert {
  filter: invert(100%);
}

.glow {
  color: #ffffff;
  text-align: center;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
  -moz-animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #ffffffb9, 0 0 20px #ffffff80, 0 0 30px #ffffff57;
  }
  to {
    text-shadow: 0 0 20px #ffffff, 0 0 30px #ffffffef, 0 0 40px #ffffffbd;
  }
}

.box {
  text-decoration: none;
  z-index: 2;
  height: max-content;
}

.row {  
  display: flex;
  flex-wrap: wrap;
  margin: 7%;
  margin-top: 0%;
  margin-bottom: 0%;
  align-content: center;
  align-items: center
}

.desc {
  margin: 5%;
}

.indent {

}
#more {
  display: none;
}

.continue {
  top: 80%;
}

.draw-border {
  box-shadow: inset 0 0 0 4px var(--dark);
  color: var(--dark);
  transition: color 0.25s 0.0833333333s;
  position: relative;
  display: block;
}

.draw-border::before, .draw-border::after {
  border: 0 solid transparent;
  box-sizing: border-box;
  content: "";
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  right: 0;
}

.draw-border::before {
  border-bottom-width: 4px;
  border-left-width: 4px;
}

.draw-border::after {
  border-top-width: 4px;
  border-right-width: 4px;
}

.draw-border:hover {
  color: var(--tertiary);
}

.draw-border:hover::before, .draw-border:hover::after {
  border-color: var(--tertiary);
  transition: border-color 0s, width 0.25s, height 0.25s;
  width: 100%;
  height: 100%;
}

.draw-border:hover::before {
  transition-delay: 0s, 0s, 0.25s;
}

.draw-border:hover::after {
  transition-delay: 0s, 0.25s, 0s;
}

.btn {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1.5;
  font-size: 16px;
  padding: 10px 20px;
  margin: 4% auto;
}

.btn:focus {
  outline: transparent;
}

.gallery{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0 10%;
}

.gallery li{
  text-align: left;
  display:inline-block;
  list-style:none;
  position:relative;    
  background:#fff;    
  transition:all 0.8s ease;
  -o-transition:all 0.8s ease;
  -moz-transition:all 0.8s ease;
  -webkit-transition:all 0.8s ease;
  top:0px;
  padding: 5%;
  width: 100%;
  height: 90vh;
}

.gallery li:hover{
  top:0px;
}

.gallery img{
  border-radius: 500px;
  padding: 10%;
}



.alpha {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: 'agency';
  text-transform: uppercase;
  color: #fff;
  font-weight: 100;
  font-size: 5em;
  transform-origin: center center;
  transform: translate3d(-50%,-50%,0)scale(1.4);
  opacity: 0;
  transition: opacity 4s ease-out, transform 4s ease-out, letter-spacing 4s ease-out, -webkit-filter 3s ease-out, filter 3s ease-out;
  filter: blur(20px);
  -webkit-filter: blur(20px);
  white-space: nowrap;
  &.in {
    transform: translate3d(-50%,-50%,0)scale(1);
    letter-spacing: 0.1em;
    opacity: 1;
    filter: blur(0px);
    -webkit-filter: blur(0px);
  }
}

.mars {
  width: 75%;
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  animation: mars 360s infinite linear;
}
@keyframes mars {
  0% {
    transform: translate(-50%, 0)rotate(0deg);
  }
  100% {
    transform: translate(-50%, 0)rotate(360deg);
  }
}