* {
    box-sizing:border-box;
}

body {
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

.body-dark-mode {
    background-color:black;
    color:White;
}

.container-dark-mode {
    background-color:#222 !important;
    color:white !important;
}

.header {
    display:grid;
    grid-template-rows:auto;
    grid-template-columns:repeat(10, 1fr);
    padding:1rem;
    background:linear-gradient(to top, lightgrey, darkgrey);
}

.header-dark-mode {
    background:black;
}

.header a:first-child {
    grid-column:1 / span 1;
    display:block;
    width:2rem;
    height:2rem;
    align-self:center;
}

.header a:first-child:hover {
    box-shadow:2px 2px 5px rgb(101, 5, 246), -2px -2px 5px rgb(101, 5, 246);
}

#websitelogo {
    width:100%;
}

header {
    grid-column:2 / span 8;
    font-size:clamp(1rem, 1rem + 2vw, 2rem);
    font-weight:bold;
    text-align:center;
    justify-self:center;
}

.darklightmode {
    grid-column: 10 / span 1;
    text-align:right;
    align-self:center;
}

.darklightmode button {
    margin:0;
}

#mode {
    width:1rem;
    height:1rem;
}

/*
.ad-zone {
    height:1px;
}
*/

.index_container {
    flex:1;
    display:grid;
    grid-template-rows:auto auto auto;
    grid-template-columns:auto;
    background:#f1f1f1;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
}

.main {
    align-self:center;
    display:grid;
    grid-template-rows:auto;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    margin:0;
    padding:0;
    width:100%;
    max-width:100%;
}

.input, .output {
    margin:0.5rem;
}

.phpinput, .phpoutput {
    padding:0.5rem;
    background:lightgrey;
    width:100%;
    min-height:50vh;
    max-height:50vh;
    border:1px solid grey;
    overflow:auto;
}

.phpinput {
    resize:none;
}

.phpoutput {
    position:relative;
}

.phpinput-dark-mode, .phpoutput-dark-mode {
    background-color:#333;
    color:white;
}

button {
    margin:0.5rem;
}

#lightpreloader {
    display:none;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:5rem;
    height:5rem;
    border:1rem solid grey;
    border-top:1rem solid white;
    border-radius:50%;
    /*margin-left:auto;
    margin-right:auto;*/
    -webkit-animation:preloader 4s linear infinite;
    animation:preloader 4s linear infinite;
}

#darkpreloader {
    display:none;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:5rem;
    height:5rem;
    border:1rem solid white;
    border-top:1rem solid black;
    border-radius:50%;
    /*margin-left:auto;
    margin-right:auto;*/
    -webkit-animation:preloader 4s linear infinite;
    animation:preloader 4s linear infinite;
}

@-webkit-keyframes preloader {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

@keyframes preloader {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

footer {
    background-color:#dfe6e9;
    text-align:center;
    font-size:1.2rem;
}

.footer-dark-mode {
    background-color:#2d3436;
    color:white;
}

.quicklinks a {
    text-decoration:none;
    display:inline-block;
    padding:0.7rem 1rem;
    color:black;
    cursor:pointer;
}


.quicklinks a:hover {
    background-color:#636e72;
    color:white;
}

.copyright {
    line-height:2;
}

@media screen and (max-width:750px) {
    .quicklinks a {
        display:block;
    }
}

.about_container {
    flex:1;
    padding:1rem;
}

.link-dark-mode {
    /*text-decoration:underline;*/
    color:white;
}

.about_container img {
    display:block;
    width:15rem;
    height:15rem;
    margin-left:auto;
    margin-right:auto;
}

.contact_container {
    flex:1;
    padding:1rem;
}

.contact_container {
    text-align:center;
}

.contact_container form {
    border:3px solid black;
    border-radius:3rem;
    padding:2rem 1rem;
    width:50%;
    margin-left:auto;
    margin-right:auto;
}

.contact_container form input[type=text], input[type=email], input[type=tel] {
    width:80%;
    max-width:500px;
    padding:0.3rem 0.2rem;
}

.contact_container form textarea {
    resize:vertical;
    width:80%;
    max-width:500px;
    min-height:10rem;
}

.contact_container form input[type=reset], .contact_container #submit {
    margin:1rem;
    padding:0.3rem 0.2rem;
}

#firstnameinfo, #lastnameinfo, #subjectinfo, #emailinfo, #phoneinfo, #messageinfo {
    display:none;
    width:80%;
    max-width:500px;
    padding:0.3rem 0.2rem;
    margin-left:auto;
    margin-right:auto;
    border-radius:1rem;
    border:1px solid black;
}

.inputtextfield {
    background-color:red;
}

#firstname:focus ~ #firstnameinfo {
    display:block;
}

#lastname:focus ~ #lastnameinfo {
    display:block;
}

#subject:focus ~ #subjectinfo {
    display:block;
}

#email:focus ~ #emailinfo {
    display:block;
}

#phonenumber:focus ~ #phoneinfo {
    display:block;
}

#message:focus ~ #messageinfo {
    display:block;
}

#message ~ p {
    width:80%;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
    text-align:right;
}

@media screen and (max-width:500px) {
    .contact_container form {
        width:100%;
    }
}

.docs_container {
    flex:1;
    padding:1rem;
}

.docs_container img {
    display:block;
    width:15rem;
    height:15rem;
    margin-left:auto;
    margin-right:auto;
}


.privacy_policy_container {
    flex:1;
    padding:1rem;
}

.sitemap_container {
    flex:1;
    padding:1rem;
}

.terms_container {
    flex:1;
    padding:1rem;
}

.terms_container li {
    font-weight:bold;
    margin-top:1rem;
}