.siteheader {
     align-content: center;
     background-color: #c7af98;
     background-image: url("images/header.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     border-bottom: 2px solid grey;
     display: flex;
     flex-flow: row wrap;
     height: 35vh;
     justify-content: center;
     margin-top: -20px;
     overflow: hidden;
     width: auto;
}
 svg {
     align-self: center;
     background-image: url(images/marslogo.png);
     background-repeat: no-repeat;
     background-size: contain;
     left: 35px;
     position: absolute;
     top: 5px;
}
 h1 {
     color: #1d96d0;
     font-family: 'Audiowide', cursive;
     font-size: 4em;
     font-weight: bold;
     padding: 0px;
     text-align: center;
     text-shadow: 4px 4px 4px black;
     width: 100%;
}
 body {
     background-color: black;
}
 p {
     color: white;
     font-family: 'Audiowide', cursive;
     font-size: 1.6em;
     line-height: 1.6em;
     margin: 2%;
     text-shadow: 2px 2px 1px black;
}
 .main {
     background-image: url("images/SolSys.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     display: flex;
     flex-direction: row;
     height: auto;
     margin-bottom: 1%;
     margin-top: 1%;
     width: 100%;
}
 .left {
     background-color: rgba(203, 178, 158, 0.3);
     border: solid #CBB29E;
     border-radius: 10px;
     height: inherit;
     margin: 10px;
     width: 65%;
}
 .right {
     background-color: rgba(203, 178, 158, 0.3);
     border: solid #CBB29E;
     border-radius: 10px;
     height: inherit;
     margin: 10px;
     width: 35%;
}
  .vr_img {
     width: 50%;
     transition: width 1s, transform 2s;
}
 .vr_img:hover{
     width: 55%;
 }
 .foinfo {
     background-color: #6b7870;
     background-image: url("images/footer.png");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     border-top: 2px solid grey;
     color: white;
     display: flex;
     flex-direction: row;
     font-family: 'Righteous', cursive;
     font-size: 14px;
     font-weight: bold;
     height: 5%;
     justify-content: center;
     margin: 0 auto;
     text-shadow: 4px 4px 4px black;
     width: 100%;
}
 a {
     color: white;
     font-size: 1.5em;
     text-decoration: none;
}
 #event:hover {
     background: rgba(255, 255, 255, 0.25);
     border-radius: 10px;
     cursor: pointer;
}
 .img_credits {
     font-size: 10px;
}
 @media (min-width: 1080px) and (max-width: 1366) {
     h1 {
         font-size: 3em;
    }
}
 @media (min-width: 320px) and (max-width: 1080px) {
     h1 {
         font-size: 2.5em;
    }
    p {font-size: 1.3em;
    }
     .main {
         display: flex;
         flex-direction: column;
         align-items: center;
    }
     .left {
         width: 95%;
    }
     .right {
         width: 95%;
    }
     svg {
         display: none;
    }
}