/* Page fade-in as a CSS3 transition */

#frame {animation: fadein 0.5s; }
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 20px 0 10px 0; }

.italic { font-style:italic; font-variation-settings: 'ital' 1; }
.w100 { font-weight: 100; }
.w200 { font-weight: 200; }
.w300 { font-weight: 300; }
.w400 { font-weight: 400; }
.w500 { font-weight: 500; }
.w600 { font-weight: 600; }
.w700 { font-weight: 700; }
.w800 { font-weight: 800; }
.w900 { font-weight: 900;}
.bold {font-weight: bolder; color:black; }

table {width:100%; max-width:400px; }
th, td {padding:0; border:none;}
td {position:relative; width:50%; vertical-align:top; }
td h5, td h6{margin:0; }
.fillcell {position:absolute; left:0; right:0; top:0; bottom:0; padding:2px; }


/* My stuff */

#netoutput span {font-family:'Arial', sans-serif; }

a {display:inline-block; cursor: pointer; text-decoration: none;}

.gradientblue {
  background: steelblue;
  background: -webkit-linear-gradient(top left, skyblue, #05b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.iconframe {margin:14px 40px; position:relative; height:180px; text-align:center; }
.icon {font-size:80px; position:absolute; left:0; }
.icontext {font-size:32px; margin-top:-10px; color:inherit; }


/* SYSTEM STUFF */

.debug {border:1px solid red;}
#content {margin:0 auto; padding-bottom:60px; }

@media screen and (min-width: 1201px) {
  .hideonmobile {display: auto;}
  .showonmobile {display: none;}
}
@media screen and (max-width: 1200px) {
  .hideonmobile {display: none;}
  .showonmobile {display: auto;}
}

@media screen and (min-width: 401px) {
  .hideonphone {display: auto;}
  .showonphone {display: none;}
}

@media screen and (max-width: 400px) {
  .hideonphone {display: none;}
  .showonphone {display: auto;}
}