/* GLOBAL STYLES */

.red {border: solid red 1px;}

a:link,a:visited,a:active {
 color: #0D5EAF;
 text-decoration: none;
 padding:0 2px;
}
 
a:hover {
 color: #0D5EAF;
 text-decoration: underline
}

h1 {
 margin-bottom:-26px;
 font-size:3rem;
}

h2 {
 margin:80px 0 10px 0;
}

.g {
 color:gray;
 font-size:1rem;
}

/* CONTENT AREA */

body {
 padding:0% 5%;
 text-align:center;
 font-size:1.6rem;
}

main {
 min-height:50vh;
}


.b {display:flex; justify-content: center;}
.b > * {margin:4px;}

button {
 background: #0D5EAF;
 color: #fff;
 border: none;
 padding:12px 24px;
 border-radius:25px;
 font-size:1.5rem;
 cursor:pointer;
}

.wb {background: white; border: solid #0D5EAF 1px;}
.bb {color: white!important}


/* LOGO */

.l { 
 padding:6%; 
 width:150px
}

/* FOOTER */

footer {
 font-size:1rem;
 margin:90px 0 40px 0;
}

/* CODE AREA */

.c {
 background:#f4f4f4;
 padding:10px; 
 border:1px solid #ccc;
 border-radius:10px;
 overflow-x:auto; 
 text-align:left; 
 width:96%;
 margin: auto;
 font-size:1rem;
 margin-bottom:30px;
}

/* DESKTOP */

@media (min-width: 768px) {
    body {
    padding:0 20%;
    }
    .c {
    width:500px;
    }
}