/*
Copyright (c) 2023, 2024 Stefan Richthofer. All rights reserved.
For further information contact stefan.richthofer@apidia.net.
*/

:root {
--tblue: #4000F0; /*#6000F0;*/
--lblue: #3080E0;
--llblue: #50A0F0;
--nblue: #D0CBFF; /*#708fff; /*#d5d7ff;*/
--hblue: #7060FF;
--tshw: 0 0 1px #3020FF;
--ttwht: white; /*#F0F0FF;*/
--sns: Verdana, Arial, Helvetica, sans-serif; /*'DejaVu Sans', Arial, Helvetica, sans-serif;*/
--mno: 'DejaVu Sans Mono', monospace;
}

html {
scroll-behavior: smooth;
}

h1 {
font-family: var(--sns);
font-size: 1.8em;
font-weight: bold;
}

.ptc {
font-family: var(--sns);
font-size: 1.5em;
text-align: center;
/*font-style: italic;*/
/*color: var(--nblue);*/
/*text-shadow: 0 0 1px /*#fff*/;
margin-top: -.6em;
margin-bottom: 1.1em;
animation: ptc 3s ease-in-out infinite alternate;
}

@keyframes ptc {
  from {text-shadow: 0 0 1px var(--lblue); color: var(--hblue);}
  to {text-shadow: 0 0 1px var(--llblue); color: var(--tblue);}
}

section {
min-height: 100vh;
padding-top: 2em;
/*margin-bottom: -2em*/
}

div.section {
scroll-margin-top: 60px;
}

body {
margin: 0;
font-family: var(--sns);
overflow-x: hidden;
}

.centered {
margin: auto;
position: absolute;
top: -2.5em; left: 0; bottom: 2.5em; right: 0;
height: 20em;
width: 50em;
max-width: 100vw;
max-height: 90vh;
}

.ph {
display: block;
height: 22em;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
margin-bottom: -2.5em;
}

#navbar {
position: sticky;
top: 0;
/*background-image: linear-gradient(#222, #333, #333, #333, #3330);*/
background-image: linear-gradient(#111, #222, #333, #333, #333, #333, #333, #333, #333, #333, #3335, #3332, #3330);
height: 3.5em;
overflow: hidden;
font-size: 100%;
}

a {
text-decoration: none;
hyphens: none;
}

#navbar a {
position: relative;
top: -0.25em;
float: left;
color: var(--nblue);
text-shadow: var(--tshw);
font-weight: bold;
text-align: left;
margin: 1em 0.5em;
margin-bottom: 0;
height: 100%;
}

#navbar a:hover {
color: var(--hblue); /*#7060FF; /*#7a7dff;*/
text-shadow: var(--tshw); /*0px 0px 1px var(--tblue);*/
}

#navbar img {
display: inherit;
position: relative;
top: -0.4em;
height: 1.8em;
}

#navbar a img.hover {
display: none;
}

#navbar a:hover img.hover {
display: inherit;
}

#navbar a:hover img {
display: none;
}

.sbody {
display: block;
margin: 15vw;
margin-top: 0;
}

#cnav_demo {
float:right;
width:40vw;
margin:5px -12vw 40px 30px
}
#summary_demo {
float:left;
width:50vw;
margin:5px 30px 40px -14vw
}
#search_demo {
float:right;
width:20vw;
margin:0 -5vw 30px 40px
}
#banner_demo {
float:right;
width:20vw;
margin:0 -14vw 0 20px
}

@media only screen and (max-width: 600px) {
.sbody {
/*background-color: lightblue;*/
margin: 0 5vw;
}
#cnav_demo, #summary_demo {
float:none;
width:106%;
margin:20px 0 10px -3%
}
/*#summary_demo {
float:none;
width:100%;
margin:20px 0 10px 0
}*/
#search_demo, #banner_demo {
float:right;
width:48%;
margin:0px -4vw 10px 15px
}
/*#banner_demo {
float:right;
width:20vw;
margin:0 -14vw 0 20px
}*/
}

span.line {
display: inline-block;
word-wrap: anywhere;
}

#modal, #modls {
display: flex;
font-size: 17px;
flex-direction: column;
justify-content: center;
gap: 0.4rem;
width: 500px;
padding: 1.3rem;
min-height: 250px;
position: fixed;
margin: 5% auto;
/*margin-top: -200px;*/
left: 0;
right: 0;
z-index: 1;
top: 20%;
background: rgba(0, 0, 0, .85); /*rgba(0, 0, 0, .8); /*#333;*/
/*opacity: 85%;*/
border: 1px solid black;
/*border-radius: 15px;*/
color: var(--ttwht);
text-shadow: 0px 0px 1px #3020FF;
transition: opacity .2s linear;
opacity: 1;
}

#mbt, #mbs {
display: flex;
flex-direction: row;
justify-content: center;
gap: 1.8rem;
margin-top: 10px;
}

#modal a sup, #modls a sup, .partners a sup {
font-size: 10px;
}

#modal.inv, #modls.inv {
transition: opacity .2s linear, visibility .3s 0s;
opacity: 0;
visibility: hidden;
}

#not_found {
/*transition: opacity 1s linear;/*, visibility 1.1s 0s;*/
opacity: 0;
visibility: hidden;
}

#not_found.vis {
transition: opacity 4s ease-in, visibility 5.1s 0s;
opacity: 1;
visibility: visible;
}

.rbody {
display: block;
margin: 1.6em 15% .6em 15%;
}

.rbody > a > img {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.8em;
width: 25em;
max-width: 95%;
}

.rbody footer {
margin-top: 2.6em;
}

ul {
list-style-type: none;
}

.sbody a, footer a, .rbody a, #modal a, #modls a, .centered a, ul a {
color: var(--lblue); /*#2c009a; /*#5242d0;*/
}

.sbody a:hover, footer a:hover, .rbody a:hover, #modal a:hover, #modls a:hover, .centered a:hover, ul a:hover {
color: var(--tblue); /*#7a7dff;*/
text-shadow: 0px 0px 1px var(--tblue);
}

#not_found {
margin-top: -15px;
}

.search {
display: flex;
position: relative;
flex-direction: column;
align-items: center;
width: 100%;
}

.search > img {
width: 32em;
max-width: 95%;
margin-bottom: 4%;
margin-top: 2%;
}

.searchform {
display: flex;
flex-direction: row;
justify-content: stretch;
align-items: baseline;
width: 100%;
}

.searchform > label {
margin-right: 8px;
font-size: 105%;
}

.searchinput {
width: 100%; /*98.7%;*/
height: 20px;
}

.searchinput > input {
width: 97.5%;
font-size: 105%;
padding: 2px;
padding-left: 8px;
}

.searchsubmit {
width: 14em;
margin: 2.5em;
}

.searchsubmit > input {
width: 100%;
height: 100%;
font-size: 98%;
padding: 4px;
}

.searchfield {
display: table-cell;
width: 100%;
height: auto;
}

.searchbutton {
width: 100%;
height: 100%;
}

#about, #contact p, .rbody > p {
font-size: 1.2em;
line-height: 1.4;
}

section.partners {
font-size: 1.2em;
line-height: 1.2;
}

section.partners b {
color: var(--hblue);
}

/*p {
/*word-break: break-all;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;*
hyphens: auto;
}*/

.form-control {
width: 100%;
font-size: 105%;
margin-bottom: 1em;
}

.send-button {
margin: 1em;
font-size: 105%;
width: 10em;
}

.form-group {
width: 100%;
text-align: center;
}

.form-group textarea {
resize: none;
}

/*a.ext span.material-icons {
position: relative;
x: -4px;
/*font-size: 12px;
}*/

/*a.ext span.material-icons {
/*font-size: 12px;
vertical-align: -2.2px;*/
/*
font-size: 24px;
vertical-align: -3.2px;

font-size: 20px;
vertical-align: -3px;
}*/

/*a.ext sup.material-icons {
font-size: 14px;
vertical-align: -2.2px;*/
/*font-size: 12px;
vertical-align: -2.2px;*/
/*
font-size: 24px;
vertical-align: -3.2px;
*/
/*font-size: 20px;
vertical-align: -3px;
}*/

a.ext sup {
font-size: 12px;
}

footer {
margin: 2%;
font-size: 0.9em;
text-align: center;
color: #707070;
}

footer hr {
border-top: 1px solid #ddd;
}

footer p {
margin: 0.3em
}

footer img {
margin-top: 1.2em;
margin-bottom: -0.25em;
width: 4em
}

footer a:hover img {
-webkit-filter: brightness(120%);
transition: 0.5s;
}

.apidia_footer a {
font-size: 1.2em;
font-weight: bold;
color: #5e55df;
margin: 0
}