body {
  background-color: #1246d6;
  background-image: linear-gradient(rgba(0,4,17,0.7), rgba(18,70,214,0.7)), url(https://64.media.tumblr.com/6448f4fdd64badae8b1702443525f3c3/147bfebdf112f180-f3/s400x600/876211a32adaa5d760ae84365d34d5bf7d006e70.gifv);
  color: #F4D35E;
  text-decoration: none;
  text-shadow: -1px 1px 2px #000,
  				  1px 2px 6px #000,
  				  1px -1px 0 #000,
  				  -1px -1px 0 #000;
  margin: 0;
  line-height: 1.5rem;
  padding: 2vh 4vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
  font-family: 'GFS Didot', serif;
  padding-bottom: 4vh;
}
  
section {
  border-radius: 5px;
  border: #F4D35E 1px solid;
  box-shadow: -1px 1px 2px #000,
				  1px 2px 6px #000,
				  1px -1px 0 #000,
				  -1px -1px 0 #000;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 1rem;
}
  
ul {
  list-style-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4e5b0a48-a22e-48e1-92e8-c7b070383443/db54tzl-0b11af13-c283-4493-a2d9-f36fa72479f5.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRlNWIwYTQ4LWEyMmUtNDhlMS05MmU4LWM3YjA3MDM4MzQ0M1wvZGI1NHR6bC0wYjExYWYxMy1jMjgzLTQ0OTMtYTJkOS1mMzZmYTcyNDc5ZjUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.fHVQaUae9895JgSgIaBuDBFiiQmAVz2chD50hyauD5o');
  padding-left: 1rem;
  color: white;
}
 
.img {
  text-align: center;
  padding-top: 2vh;
}

#roswell {
width: auto;
height: 295px;
position: fixed;
right: 0;
bottom: 0;
  }

.hover {
  width: auto;;
  height: auto;
  position: fixed;
  right: 0;
  bottom: 0;
  
  }
  
.big {
  width: 400px;
  }
/* header {  background: #05204A;  } */

/****************************** HEADER COLOURING *******************************/

h1,h2,h3 { color: #F4D35E; }


/****************************** LINK COLOURING *******************************/
a { color: #ffd868; }
a:hover { color: #ffaa00; }

/****************************** NAVIGATION STYLE *******************************/

.navlist {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  font-size: 1.2rem;
  }
  
hr {
  margin-bottom: 2vh;
  border: solid;
  border-color: #F4D35E;
}

/****************************** COLUMN CODING *******************************/
  
.main {
  flex-shrink: 1;
  display: flex;
  width: 60%;
  padding: inherit;
  margin-right: 2rem;
  justify-content: flex-start;
  flex-flow: row wrap;
  float: left;
}
  
.sub {
  width: 35%;
  flex-grow: 1;
  height: 100%;
  margin-left: 1rem;
  justify-content: flex-end;
  flex-flow: row wrap;
  float: right;
}
    
/****************************** MOBILE CODE *******************************/
 @media screen and (min-width: 400px) and (max-width: 1500px) {
    .sub {
      float: initial;
      width: auto;
      margin: auto;
    }
    .main { 
      float: initial;
      width: auto;
      margin: auto;
    }
      
    img {
      width: auto;
      height: auto;
      
    }
}