html {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background-color: #000;
}

body,div,span,applet,object,iframe,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,sub,sup,tt,var,b,u,i,center,dl,dt,dd,label,table,caption,tbody,tfoot,thead,tr,th,td,article,canvas,details,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}
@font-face {
    font-family:'cc';
    font-style:normal;
    font-weight:normal;
    src:url('../fonts/cc-icons.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: "monofont";
    font-style:normal;
    font-weight:normal;
    src: url("../fonts/Nouveau_IBM.ttf") format('truetype');
    font-display: swap;
}
@font-face {
    font-family: "fancyfont";
    font-style:normal;
    font-weight:normal;
    src: url("../fonts/cantarell/Cantarell-Regular.ttf") format('truetype');
    font-display: swap;
}
@font-face {
    font-family: "college";
    font-style:normal;
    font-weight:normal;
    src: url("../fonts/Bou_Collegiate.ttf") format('truetype');
    font-display: swap
}

html,body {
    color:#4D4D4D;
    font-size:13px;
    height:100%;
}

body {
    line-height: 1;
    overflow-y:scroll;
}

#main {
    min-height:100%;
    width: 100%
    position:relative;
    background-color: #fff;
    margin: 0;
}

.header {
    auto-left: auto;
    auto-right: auto;
    text-align: center;
}

nav {
    margin: 6ex auto 8ex auto;
    width: 50%;
    min-width: 585px;
    overflow: hidden;
    font-family: fancyfont,sans;
    border: 1px solid #000;
    border-radius: 8px;
    background-color: #fff;
}

nav p {
    display: inline-block;
    font-size: 1.5em;
    width: 19.25%;
    min-width: 6em;
    line-height: 5ex;
    border-left: 1px solid #555;
    text-align: center;
    margin-right: -4px;
}

nav a:first-of-type p {
    border: 0;
}

a:link, a:visited, a:active {
  color: #000;
  transition-duration: 2s;
  text-decoration: none;

}

a:hover p {
  transition-duration: 1s;
  background-color: #ccc;
}

.header h1 {
    display: inline-block;
    font-size: 8em;
    font-family: "college";
    margin-bottom: 0;
    margin-top: 0.5ex;
}

h1+h2 {
    font-weight:300;
    font-size:24px;
    color:#4D4D4D;
    margin: 0 auto 3ex auto;
    font-family: fancyfont,sans;
}

img {
    display: inline-block;
    background-color: rgba(0,0,0,0);
    margin: 0 0 -3em 0;
}

#content {
    width:100%;
    margin: 2ex auto 0 auto;
}


#content>iframe, #content>video, #content>img {
    width: 333px;
    display: inline-block;
    margin: 0 3em 0 0;
}

#content p {
    font-size: 4em;
    line-height: 2ex;
    margin-bottom: 1ex;
    padding: 0 1em 0 1em;
    color: #fff;
    background-color: #000;
    font-family: college,serif;
}

#headline {
    display: inline-block;
    margin: 0 0 0 3em;
    padding-top: 3%;
    vertical-align: top;
    text-align: left;
    font-size: 0.8em;
}

#features {
    width: 90%;
    margin: 12ex auto 2ex auto;
    text-align: center;
}

#features h2 {
    width: 75%;
    font-family: "college";
    font-size: 3em;
    text-align: left;
    margin: 0 auto 1ex auto;
}

#features > p, ol {
    width: 75%;
    font-family: "fancyfont";
    font-size: 2em;
    text-align: left;
    margin: 0 auto 4ex auto;
    line-height: 3ex;
}

#features>h1 {
    font-family: college;
    font-size: 3em;
    color: #fff;
    background-color: #000;
    width: 9em;
    margin-left: auto;
    margin-right: auto;
}
#features .code {
    text-align: left;
        width: 86%;
    font-family: "fancyfont";
    font-size: 1em;
    text-align: left;
    margin: 0 auto 4ex auto;
    line-height: 3ex;
}

a button:hover, a button:hover p {
    background-color: #88CF86;
    cursor: pointer;
    transition: all 1s ease;
}

button {
    display: inline-block;
    background-color: #eee;
    border: 3px solid #000;
    border-radius: 8px;
    height: 12ex;
    margin-bottom: 12ex;
    line-height: 1ex;

}

button>img {
    display: inline-block;
    margin-bottom: 2ex;
    margin-top: 1ex;
}

button>p {
    font-size: 3em;
    display: inline-block;
    vertical-align: top;
    margin-top: 1.75ex;
}


section {
    border: #000 solid 1px;
    display: inline-block;
    width: 66%;
    margin: 2ex 2em 2ex 2em;
    text-align: left;
    vertical-align: top;
    border-radius: 9px 9px 0 0;
    font-family: "fancyfont";
    font-size: 1.25em;
}

section>div {
    width: 100%;
    background-color: #ddd;
    border-radius: 9px 9px 0 0;
}

section>div img, section>div h1 {
    display: inline-block;
    color: #000;
    vertical-align: top;
    margin: 2ex auto 1ex 1em;
    font-family: "fancyfont";
    font-size: 1.25em;
}

section p {
    padding: 2ex 2em;
}

input {
    margin-left: 2em;
    border-radius: 3px;
    font-family: "fancyfont";
}

.card {
    display: inline-block;
    width: 33%;
    margin: 2ex 2em 2ex 2em;
    text-align: left;
    vertical-align: top;
}

.card img, section img {
    display: inline-block;
    width: 37px;
    vertical-align: top;
    margin: 2ex auto 1ex auto;
}

.card img[alt="screenshot"] {
    display: inline-block;
    width: 100%;
    border: 2px solid black;
    border-radius: 1px;
    padding: 0.5em;
    cursor: crosshair;
}

.card h1 {
    display: inline-block;
    font-weight: bold;
    font-size:2em;
    color:#4D4D4D;
    font-family: fancyfont,sans;
}

.card p {
    font-family: fancyfont, sans;
    font-size: 2em;
    line-height: 2.25ex;
    
}

#main>p:nth-last-of-type(1) {
    font-weight: bold;
    font-size:3em;
    color:#4D4D4D;
    font-family: fancyfont,sans;
    text-align: center;
    width: 100%;
    margin: 4ex auto 1ex auto;
    bottom: 0;
}

/* #main>p:last-of-type {
    font-size:1em;
    color:#4D4D4D;
    font-family: fancyfont,sans;
    text-align: center;
    padding-bottom: 8ex;
} */

.cc {
    font-family: cc;
    font-size: 5em;
    vertical-align: top;
}

.code {
	margin: 2ex 0; 
	padding-left: 8px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 10px;
	overflow: hidden;
	font-size: 0.66em;
	width: 70%;
	background: #313131;
	border: 1px solid #a8a8a8;
	display: block;
	color: #a8a8a8;
	font-family: monofont;
        border-radius: 8px;
}

.mono {
    font-family: 'monofont';
 }

footer {
    margin: 0 0 4ex 0;
    padding: 2ex 2em 6ex 2em;
    float: right;
}

footer p {
    display: inline-block;
    vertical-align: top;
}

footer dl {
    display: inline-block;
    list-style: none;
    font-family: fancyfont, sans;
    font-size: 1.25em;
    line-height: 3ex;
    padding: 3ex 0 0 12em;
    vertical-align: top;
    text-align: right;
}

footer dt {
    font-weight: bold;
    font-size: 2em;
    margin: 0 0 1ex 0;
}


footer a:link, a:visited, a:active {
    color: #4d4d4d;
    text-decoration: none;
}

footer a:hover {
  color: #ccc;
}

a[class="d"] div {
    display: inline-block;
    height: 37px;
    width: 37px;
    vertical-align: top;
    margin: 0;
}
a[class="d"] div > img {
    position: absolute;
    vertical-align: top;
    transition: all 1s ease;
}

a[class="d"] div > img:nth-child(1) {
    position: absolute;
    vertical-align: top;
    opacity: 1;
    z-index: 2;
}

a[class="d"] div > img:nth-child(2){
    opacity: 0;
    z-index: 1;
}

a[class="d"]:hover > div > img:nth-child(1) {
    opacity: 0;
    z-index: 1;
}

a[class="d"]:hover > div > img:nth-child(2) {
    opacity: 1;
    z-index: 2;
}


ul.accordion {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Hide the input box.
   This toggles the content panes */
ul.accordion label + input[type='checkbox'] {
  display: none;
}

/* Content pane style */
ul.accordion li {

}

/* main tab */
ul.accordion label {
  background-color: #2a3133;
  border-bottom: 1px solid #000;
  width: 724px;
  margin: 0 auto 0 auto;
  text-align: center;
  color: #fff;
  display: block;
  padding: 10px;
  font-size: 2em;
  font-family: fancyfont,sans;
}

ul.accordion label img {
    vertical-align: top;
    width: 1em;
    display: inline-block;
    float: left;
}

ul.accordion label:hover {
  cursor: pointer;
}

/* Set up the div that will show and hide */
ul.accordion div.content {
  overflow: hidden;
  padding: 0 10px;
  display: none;
}

/* Show the content boxes when the radio buttons are checked */
ul.accordion label + input[type='checkbox']:checked + div.content {
  display: block;
  transition: all 3s ease;
}