@font-face {
    font-family: 'bebas';
    src: url('fonts/BebasNeue-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'splendid';
    src: url('./fonts/splendidn-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'coffee';
    src: url('fonts/kenyan_coffee_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'f25';
    src: url('./fonts/f25_executive-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}




body{background-image: url("./images/FlagBackgroundDarker2.jpeg");
background-size: cover;
background-color: white;
}


p{
border: none;
background-color: rgba(255, 255, 255, 0.4);

width:40%;
color: black;
display: block;
postion:fixed;
font-family: f25;
margin-left: 57%;

margin-top:75px;
font-size: 25px;

line-height: 32pt;
text-align: justify;
padding: 20px;

}



#outputdiv{
display: block;
	margin-top:70px;

	width:50%;
	  margin-left: auto;
  margin-right: auto;
	  outline: none;
  -webkit-border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  border-radius: 10px 10px 0px 0px;
	  border: none;
  background-color: none;
}

output{

  color: silver;
  display:block;
  font-family: "splendid";
  text-align:right;
  font-size: 25px;
 
}

#sig{
text-align:right;
font-size:15px;
display: block;
}

a:link {
  font-family: bebas;
  color: silver;

}

/* visited link */
a:visited {
  font-family: bebas;
  color: hotpink;

}

/* mouse over link */
a:hover {
  font-family: bebas;
  color: lavender;

}

/* selected link */
a:active {
  font-family: bebas;
  color: teal;

}


h1{
background-image: url("./images/Platinumtexture.jpg");
text-align: center;
margin: auto;
margin-top: 40px;
margin-bottom:45px;
width: 500px;
height: 150px;
font-size: 65px;
text-transform: uppercase;
font-family: bebas; color: #39b1cc;
}

/* Lighter blue color is #75c9e3*/

p::first-letter {
    font-size: 85px;
    font-family: f25;
    margin-right: 3px;
    background: linear-gradient(#B31942, white, #39d1ff) no-repeat;
    filter: drop-shadow(4px 3px rgba(100, 100, 100, 0.50));
    background-clip:text;
    -webkit-background-clip: text;
    color: transparent;
}


blockquote {
	margin: 0.2em 2em;
    background:#CCC;
	color: #222222;
    font-size:20px;
    font-family:thryn;
    text-align: justify;
    line-height: 24px;
	/*border-left: 5px solid #999;*/
    border-top:10px solid #39b1cc;
	padding: 5px;
    border-bottom:10px solid #39b1cc;
}
blockquote:before {
  color: #39b1cc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

button{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background-color: rgba(40, 40, 40, 0.7);
  letter-spacing: 4px;
  width:53.3%;
  color: silver;
  display: block;
  font-family: coffee;
  margin-left: 46.5%;
  font-size: 15px;
  -webkit-border-radius: 0px 0px 10px 10px;
  -moz-border-radius: 0px 0px 10px 10px;
  border-radius: 0px 0px 10px 10px;
}

button:hover{
    background-color: rgba(62, 203, 214, 0.7);
    transition: 0.3s;
}


blockquote:after {
  color: #39b1cc;
  content: close-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-left: 0.25em;
  vertical-align: -0.4em;
}
/*blockquote p {
  display: inline;
}*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

.container {
    align-items: center;
    justify-content: space-between;
    display: flex;
    width:100%;
  }

.linklist{
  font-family: coffee;
  font-size: 75px; 
  text-align: left;
  background: linear-gradient(#B31942, white, #39d1ff) no-repeat;
  background-clip:text;
  -webkit-background-clip: text;
  color: transparent;

  filter: drop-shadow(4px 3px rgba(200, 200, 200, 0.50));
  padding-left:26px;
  padding-top:16px;
      display:inline-block;}

a.nav {color: hotpink; font-family: thryn; text-decoration: none;}
a.nav:link {color: hotpink;font-family: thryn;}
a.nav:visited {color: hotpink;font-family: thryn;}
a.nav:hover {color: lavender;font-family: thryn;}
a.nav:active {color: teal;font-family: thryn;}