*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.2em;
margin: 0; padding: 0;
background: #2d4150;
background: linear-gradient(115deg, rgba(220, 200, 120, .1) 0%, rgba(160, 150, 100, .1) 10%, rgba(70, 120, 145, .9) 60%, rgba(160, 200, 220, .1) 100%), radial-gradient( ellipse closest-side, rgba(40,100,110,1) 0, rgba(25,35,50,1) 80%);
background-attachment: fixed;
color: #b6c39c;
max-width: 100vw;
overflow-x: hidden;
}

img {max-width: 100%; height: auto;}

a {
text-decoration: none;
color: #51a7a7; 
transition: .9s ease-in-out; transition-delay: 0s;
}
a:hover, a:focus { text-decoration: none; text-shadow: 0px 0px 5px rgba(110,235,235,0.9); transition: 0.5s; transition-delay: 0s;}
a.back { opacity: 0.7 }
a.back:hover { opacity: 1 }
a.light{color:#a5eae2;}
a.light:hover { color:#f8e8ce; text-shadow: 0 0 15px rgba(255,255,255,0.5), 0px 0px 2px rgba(235,180,180,0.9);}
a.subtle {color:#877d6c;}
a.subtle:hover { color:#5c9693; text-shadow: 0 0 10px #877d6c;}

p {
line-height: 110%;
margin: 0 0 .5em 0;
padding: 0;
text-shadow: 0px -1px 1px #b6c39c;
transition: .9s; transition-delay: 0s;
}
p:hover, p:focus, ol:hover, ol:focus {
text-shadow: 0 0 1px #d6e6b7, 0 0 10px rgba(255,255,255,.5), 0px -1px 1px #b6c39c;
}
ol{
text-shadow: 0px -1px 1px #b6c39c;
transition: .9s; transition-delay: 0s;
}

h2, h3, h4 {
font-family: "Open Sans", sans-serif;
line-height: 100%;
text-align: center;
margin: 0;
}
h1 {
font-family: "Lora", serif;
display: block;
color: transparent;
letter-spacing: -.1vw;
line-height: 90%;
text-align: center;
margin: 20px 0 0 0;
color: #467896;
text-shadow: 0 .2em .5em #6aa8a8, -.1em .5em .5em #b5fffa, 0 2px 13px #ededa7, 0px -2px 1px #96aadc;
}
h1 span {
background-color: #786e96;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
text-shadow: 0 .2em .5em #6aa8a8, -.1em .5em .5em #b5fffa, 0 2px 13px #ededa7, 0px -2px 1px #96aadc;
}
h2 span, h4 span {
background-color: #87c1c7;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
text-shadow: 0 .2em .5em #b1edf4, -.1em .5em .5em #b5fffa, 0 2px 13px #ededa7, 0px -2px 1px #fff;
}
h2 {
color: #dbf1c7;
margin-bottom: 12px;
text-shadow: 0 .1em .2em #6aa8a8, -.05em .3em .2em #b5fffa, 0 4px 7px #ededa7, 0px -1px 1px #96aadc;
}
h3 {
font-size: 1.6em;
font-weight: 500;
color: #7dc3c3;
text-shadow: 0 -1px 0 #b1b368, 0 -1px 1px #ccf4f4, 0 0 2px #acc098, 0 .1em .2em #6aa8a8;
}
h4, h4 a {
margin-top: 5px;
font-size: 1.3em;
font-weight: 500;
color: #68b3ab;
text-shadow: 0 -1px 0 #70a9e1, 0 -1px 1px #ccf4f4, 0 0 2px #acc098, 0 .1em .2em #205b5b;
}


.center {text-align: center}
.fleft {float: left;}
.fright {float: right;}
.medium {font-size: 1.2em}
.large {font-size: 1.8em}
.larger {font-size: 2.2em}
.left {text-align: left}
.lora {font-family: "Lora", serif;}
.right {text-align: right}
.small {font-size: .8em}
.smaller {font-size: .6em}
.lc {text-transform: lowercase;}
.uc {text-transform: uppercase;}
.cap {text-transform: capitalize;}
.xiriglow {text-shadow: 0 0 2px #ebd5b4, 0 3px 4px #1f3342, 0 0 12px #fff;}

hr {
  background-color: rgba(0,0,0,.1);
  padding: 0;
  margin: 10px;
  border: 0;
  height: 1px;
}
header, footer {
  width: 100%;
  text-align: center;
  padding: 10px;
}
footer {
  width: 100%;
  text-align: justify;
  padding: 0;
  margin: 0;
}
article {
  width: 95%;
  margin: 0 2%;
}
.authorbox{
width: 100%;
background: rgba(0,0,0,.5);
padding: 30px 2%;
margin: 0 auto;
box-shadow: 0px 20px 35px -20px rgba(141,208,207,0.75) inset;
}
.authorbox>.grid141>div>img{
border-radius: 50%;
width: 140px; height: auto;
float: left;
border: 2px solid #81BE83;
border-radius: 50%;
}
#author>.sig{
font-size: 3em;
font-family: "Qwitcher Grypen", cursive;
font-weight: 400;
margin-top: -10px;
}

.grid12 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 20px;
}
.grid14 {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-gap: 20px;
}
.grid141 {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-gap: 20px;
}
.grid21 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 20px;
}
.grid12>div, .grid14>div , .grid141>div , .grid21>div {
    margin: auto;
}

.button-info {
position: fixed;
z-index: 100;
top: 20px; right: 20px; 
width: 50px; height: 50px; 
border-radius: 50%; 
background: rgba(45,65,80,.4);
color: #7dc3c3; 
font-size: 30px; 
font-weight: 600;
text-align: center; 
line-height: 45px; 
box-shadow: inset -5px .2em .5em #6aa8a8, -.1em .5em .5em #b5fffa,0 .2em .5em #6aa8a8, -.1em .5em 2em #b5fffa, 0 2px 25px #ededa7, 0px -2px 1px #96aadc;
animation: fade-in 1s ease-in;
}
.button-info a {
display: block;
border-radius: 50%; 
width: 50px; height: 50px;
}
.button-info a:hover, .button-info a:focus {
border-radius: 50%; 
background: rgba(45,65,80,.7);
box-shadow: inset 5px -.2em .5em #6aa8a8;
}

.btop, .b3d, .b4d, .b5d {
position: absolute;
z-index: 100;
width: 35px; height: 35px; 
border-radius: 50%; 
background: rgba(145,165,180,.2);
color: #7dc3c3; 
font-size: 16px; 
font-weight: 600;
text-align: center; 
line-height: 30px;
box-shadow: inset -5px .2em .5em #6aa8a8, -.1em .5em .5em #b5fffa,0 .2em .5em #6aa8a8, -.1em .5em 2em #b5fffa, 0 2px 25px #ededa7, 0px -2px 1px #96aadc;
}
.btop {position: fixed; bottom: 20px; right: 20px; animation: fade-in 3s ease-in;}
.b3d {top: 10px; left: 40px; animation: fade-in 2s ease-in;}
.b4d {top: 50px; left: 10px; animation: fade-in 3s ease-in;}
.b5d {top: 100px; left: 15px; animation: fade-in 6s ease-in;}
.btop a, .b3d a, .b4d a, .b5d a {
display: block;
border-radius: 50%; 
width: 35px; height: 35px;
}

.fi2 {animation: fade-in 2s ease-in;}
.fi3 {animation: fade-in 3s ease-in;}
.fi4 {animation: fade-in 4s ease-in;}
.fi5 {animation: fade-in 5s ease-in;}
.fi6 {animation: fade-in 6s ease-in;}
.fi7 {animation: fade-in 7s ease-in;}
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media (width <= 999px) {
  h1 {font-size: 11vw;}
  h2 {font-size: calc(1.3vw + 1em);}
  h4>span {display: block; font-size: .6em; line-height: 90%}
  .btop, .b3d, .b4d, .b5d {opacity:0}
  .grid12, .grid14, .grid141, .grid21 {grid-template-columns: 1fr;}
}
@media (width >= 1000px) {
  h1 {font-size: 7vw;}
  h2 {font-size: calc(1.5vh + 1.8em);}
  h4>span { font-size: .8em; line-height: 95%}
}