* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
	overflow-y: scroll;
}
body {
  margin: 10px;
  padding: 60px;
  background-color:#F0F0F0;
  width: 100%;
  length:100%;
  font size: 19px;
  line height: 2.5;
  font-family: Futura,Trebuchet MS,Arial,sans-seri;
  text-color: #0099ff;
  min-height: 100vh;
  position:relative;
}

p {
	margin: 0;
}

h1 {
	font-size: 26px;
  line-height: 1.2;
  margin-bottom: 80px;
	font-weight: 500;
}

h2 {
	font-size: 26px;
  line-height: 1.2;
  margin-bottom: 80px;
	font-weight: bold;
  color: #66ff99;
}

h2:hover {
	font-size: 100px;
  line-height: 1.2;
  margin-bottom: 80px;
	font-weight: italic;
  color: black;
}

h3 {
	font-size: 40px;
  line-height: 1.2;
  margin-bottom: 80px;
	font-weight: 900;
}

a {
  color: #66ff99;
	text-decoration: none;
}

a:hover {
  color:black;
  text-decoration: line-through;
}

.sm-page {
  width:1300px;
  height:100%;
  top:0;
  margin:0;
  padding:0;
  float:centre;
}

/*CREDIT STYLE*/
.sm-credit-container {
  position: absolute;
  width:80%;
  top:50px;
  left:30%;
  float: centre;
}

.sm-credit-container p {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-align: center;
  font-weight: bold;
}

.sm-credit-row {
	padding-bottom: 13px;
}

.sm-credit-row span {
  text-transform: uppercase;
}

.sm-credit-hover {
  letter-spacing: 0.4em;
  transition: 0.5s ease;
}

.sm-credit-hover:hover {
	letter-spacing: 14em;
	text-decoration: none;
}


/* TITLE */
.sm-title-container {
  margin-left: 40px;
  margin-top: 40px;
	width: 70%;
	position: relative;
	overflow: hidden;
}

.sm-title-container h1 {
  transition: marquee;
}

.sm-title-col {
  width: 170px;
	float: left;
}

.sm-title-col--top-pad {
  margin-top: 110px;
}

/* PARA STYLING */
.sm-para-container {
  width: 70%;
  margin: 160px 0 0;
  margin-left: 5%;
	position: relative;
	overflow: hidden;
}

.sm-para-col {
  margin-top: 100px;
	padding: 20px;
  width: 55%;
  border-radius:20px 20px;
	background-color:#66ff99;
	position: relative;
	overflow: hidden;
  text-align: justify;
	float: left;
}

/* FOOTER STYLING */
.sm-footer {
  margin-top: 100px;
	padding: 30px;
  width: 100%;
  border-radius:50px 50px;
	background-color:#66ff99;
	position: relative;
	overflow: hidden;
}

.sm-button {
  margin-centre: 20px;
	float: left;
}

.sm-button a {
  text-align: center;
  padding: 10px 30px;
  border: 3px double lightgreen;
  border-radius: 30px;
  color: white;
}

.sm-button a :hover {
  color: #66ff99;
	background-color: pink;
  border: 1px doubleline lightgreen;
  text-decoration: underline;
}

/* COLOUR SWITCH STYLING */
.sm-colour--on {
  background-color: #66ff99;
  color: #e6ecf5;
}

.sm-colour--on a {
  color: #e6ecf5;
}

.sm-colour--on .sm-button a {
  border-color: #66ff99;
  color: white;
}

.sm-colour--on footer {
	background-color: #e6ecf5
}

/* POSITION SWITCH STYLING */
.sm-position--on .sm-credit-container {
  width: 100%;
}

.sm-position--on .sm-title-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 10;
}

.sm-position--on .sm-title-col {
  width: 50%;
}

.sm-position--on .sm-title-container h1 {
  font-size: 10vw;
	margin-bottom: 40vh;
	margin-top: 0;
}

.sm-position--on .sm-title-col--top-pad {
  margin-top: 30vh;
}

.sm-position--on .sm-para-container {
  margin-top: 20vh;
}

/* MOVE SWITCH STYLING */
@keyframes move-left-to-right {
  0% {
    margin-left: 0;
  }

  50% {
    margin-left: 60vw;
  }

  100% {
    margin-left: 0;
  }
}

.sm-move--on .sm-title-container .sm-left-to-right {
  animation: move-left-to-right 5s ease infinite;
}

@keyframes move-right-to-left {
  0% {
    margin-left: -10;
  }

  50% {
    margin-left: -30vw;
  }

  100% {
    margin-left: -10;
  }
}

.sm-move--on .sm-title-container .sm-right-to-left {
  animation: move-right-to-left 5s ease infinite;
}