@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
@import url("fontawesome-all.min.db55fa620a70.css");

/* fun.css — large-text friendly variant, preserves original HTML5 UP look */

/* Root variables for easy tuning */
:root{
  --bg-accent-opacity: 0.375;
  --accent: #1cb495;
  --text-main: rgba(255,255,255,0.95);
  --muted: rgba(255,255,255,0.85);
  --base-font-size: 22pt;
  --line-height: 1.9;
  --control-height: 3.5em;
  --radius: 8px;
  --page-padding: 6em;
}

/* Reset / base (kept minimal to preserve original layout) */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,b,u,i,center,
dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,article,aside,
canvas,details,embed,figure,figcaption,footer,header,
hgroup,menu,nav,output,ruby,section,summary,time,mark,
audio,video {
  margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;
}
html { box-sizing: border-box; }
*,*:before,*:after { box-sizing: inherit; }

/* Page */
body {
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:#000;
  color:var(--muted);
  font-family:"Roboto",sans-serif;
  font-size:var(--base-font-size);
  line-height:var(--line-height);
  padding: var(--page-padding) 4em 4em 4em;
}

/* Background panels */
#bg {
  position:fixed; left:0; top:0; width:100%; height:100%; z-index:1;
  opacity: var(--bg-accent-opacity);
  transition: opacity 2s ease-in-out;
}
#bg div {
  position:absolute; left:0; top:0; width:150%; height:100%;
  background-size:cover; opacity:0; visibility:hidden; transition:opacity 3s ease;
}
#bg div.visible { opacity:1; visibility:visible; animation: bg 45s linear infinite; }
#bg div.visible.top { z-index:2; }
@keyframes bg { 0%{transform:translateX(0);}100%{transform:translateX(-25%);} }

/* Header */
#header { position:relative; z-index:2; text-align:left; margin-bottom:1.5em; }
#header h1 {
  color:#fff; font-weight:700;
  font-size: calc(var(--base-font-size) * 1.8);
  margin:0 0 0.4em 0;
  line-height:1.1;
}
#header p { color: rgba(255,255,255,0.75); font-size:1.15em; margin:0; }

/* Paragraphs - large readable text */
p {
  color: var(--text-main);
  font-size: 1.05em;
  margin: 0 0 1.5em 0;
}

/* Links */
a { color:var(--accent); text-decoration:none; border-bottom:1px dotted rgba(255,255,255,0.25); transition: color .18s; }
a:hover { color:var(--accent); border-bottom-color:transparent; }

/* Buttons & controls */
input[type="text"], input[type="password"], input[type="email"],
select, textarea {
  background:transparent;
  border:2px solid rgba(255,255,255,0.35);
  border-radius:var(--radius);
  padding:0 1.25em;
  height:var(--control-height);
  color:inherit;
  font-size:1em;
  outline:0;
}
input[type="text"]:focus, textarea:focus, select:focus {
  background: rgba(255,255,255,0.06);
  border-color:var(--accent);
}

/* Buttons */
button, .button, input[type="submit"] {
  background:var(--accent);
  color:#fff; border:0; border-radius:10px;
  height:var(--control-height);
  line-height:var(--control-height);
  padding:0 1.25em; font-weight:700;
}

/* Make background images used in original template simple to override */
#bg div:nth-child(1){ background-image: url("../images/bg01.90cdb89e33ff.jpg"); }
#bg div:nth-child(2){ background-image: url("../images/bg02.eb63681a252b.jpg"); }
#bg div:nth-child(3){ background-image: url("../images/bg03.1a127d1d07c7.jpg"); }

/* Accessibility helper - add class to body for extra-large mode */
body.large-text {
  --base-font-size: 28pt;
  --page-padding: 8em;
  --control-height: 4.25em;
  --line-height: 2.05;
}

/* Small screens tweak */
@media screen and (max-width:736px){
  body { padding:4em 2em 2em 2em; font-size: calc(var(--base-font-size) * 0.95); }
  #header h1 { font-size: calc(var(--base-font-size) * 1.4); }
  #bg div { width:200%; }
}

/* Preserve form message icons if used */
.form .message { display:block; margin-top:0.6em; font-size:0.95em; color:var(--muted); }