/* CSS Document */

* {margin:0;padding:0;} 

body, html {
  height: 100%;
  color: #22313e;
  background:#DDEEFC;
}

body{font-family: 'Lato', sans-serif;font-weight:400;}
h1,h2,h3,h4,h5,h6 {font-family: 'Lato', sans-serif;font-weight:900;}
h1 {font-size:1.5em;}
h3 {font-size:2em;text-align:center;}

#content {
width:414px;
margin:0px auto 0px auto;
}

#intro, #congratulateyourself, #capitalcities, #flashcards, #oursponsorsadvert, #addyourowncontainer, #businesses, #advertisingcontainer {
width:100%;
height:100vh;
}

/* This only for developing each section to test measurements
#intro {
background-color:rosybrown;
}
#capitalcities {
background-color:salmon;
}
#capitalcities {
background-color:salmon;
}
#oursponsorsadvert {
background-color:tomato;
}
#addyourowncontainer {
background-color:silver;
}
#businesses {
background-color:lightgreen;
}
#advertisingcontainer {
background-color:lightyellow;
}
*/

.flex-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 150px);
  justify-content: center;
  align-items: center;
}

.flex-container > .questionmark, .titlebounce, .startbutton {
  background-color: none;
  width: 406px;
  margin: 4px;
  text-align: center;
}



.startbutton, .initialstartbutton {
width:300px;
border-radius:10px;
padding:8px;
margin:50px auto 100px auto;
background-color:dodgerblue;
color:white;
border:2px white solid;
}


            
.advertising {
   font-size:25px;
   line-height:25px;
   color: black;  /* Fallback: assume this color ON TOP of image */
   background: url(../img/dot.gif) repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

footer {
   width:414px;
   margin:0px auto 0px auto;
   text-align:center;
   }
   
   
.dfxlogo {
   width:121px;
   height:27px;
   margin:30px auto 45px auto;
   }
   
a.blueprofilelink:link {
  color: dodgerblue;
  background-color: transparent;
  text-decoration: none;
}

a.blueprofilelink:visited {
  color: silver;
  background-color: transparent;
  text-decoration: none;
}

a.blueprofilelink:hover {
  color: orange;
  background-color: transparent;
  text-decoration: underline;
}

a.blueprofilelink:active {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

.titlebounce p {
display:inline-block;
font-size:1.5em;
font-weight:900;
}


.addmores {
text-align:center;
/* background-color:pink; */
height:150px;
width:100%;
}




.headerbedder {position:absolute;
top:0px;
text-align:center;
width:100%;
}
.headerbedder p {
color:#666666;
padding:5px;
}

.arrow {
  border: solid #333333;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 13px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

footer p {
font-size:1em;
}
.termzconditionz {
font-size:0.75em;
line-height:2em;
margin-bottom:40px;
}

@media only screen and (min-width: 1024px) {
.small {
display:none;
}
}
@media only screen and (max-width: 1023px) {
.large {
display:none;
}
}

.ThreeDText {
font-family:'Helvetica Neue',Helvetica, sans-serif;
text-align:center;
line-height:1em;
color:#ed0e51;
font-weight:bold;
font-size:33px;
text-shadow:0px 0px 0 rgb(216,-7,60),1px 1px 0 rgb(194,-29,38),2px 2px 0 rgb(173,-50,17), 3px 3px 0 rgb(152,-71,-4),4px 4px 3px rgba(0,0,0,0),4px 4px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);
margin-bottom:20px;}

.Remember {
text-align:center;
font-style:italic;
margin-bottom:20px;
}


.memorising {
text-align:center;
font-family:'Helvetica Neue',Helvetica, sans-serif;
line-height:1em;
color:#3384e8;
font-weight:bold;
font-size:33px;
text-shadow:0px 0px 0 rgb(28,109,209), 1px 1px 0 rgb(5,86,186),2px 2px 1px rgba(0,0,0,0),2px 2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2);
margin-bottom:20px;
}

.smallerh {font-size:21px;}

.sharebuttonposition {
width:100%;
margin:40px 0px 50px 0px;
}

.flagpedia td{
text-align:center;
padding: 11px;
}