html {
    font-size: 62.5%;
    font-family: Prociono, sans-serif;
}
body {
    margin: 0;
    overflow-x: hidden;
    padding: 0px;
}
:root {
    --main-theme-color: rgb(255, 181, 22);
    --contact-theme-color: #2E506D;
}

/*below only effects main page*/
.vid {
    width: 100vw;
    height: 100vh;
    position: fixed;
}
.vid video {
    height: 100%;
    width: 100%;
    position: absolute;
    object-fit: cover;
    object-position: bottom;
}
div.outer-container {
    place-self: center;
    padding-top: 47.5vh;
}
.text, .texts, .links {
    display: grid;
}
.text {
    grid-template-columns: 1.5fr 0.5fr 0.1fr 2fr 0.2fr 0.1fr 1.5fr;
}
.links {
    grid-template-columns: 1fr 1fr;
    margin: auto;
}
.vid p {
    z-index: 1;
    color: var(--main-theme-color);
    margin: auto;
}
p.p {
    width: 100%;
}
p.l {
    text-align: right;
}
.t, .ts{
    font-size: 7vh;
}
.p, .ps {
    font-size: 3vh;
}
.text a, .texts a {
    text-decoration: none;
    color: var(--main-theme-color);
}
.text a:hover, .texts a:hover {
    filter: brightness(0.75);
}
div.foot.main {
    background-color: var(--main-theme-color);
    filter: brightness(0.75);
}
@media (max-aspect-ratio: 16/9) {
    p.p, p.t {
        display: none !important;
    }
}
@media (min-aspect-ratio: 16/9) {
    p.ps, p.ts {
        display: none !important;
    }
}
@media (aspect-ratio: 16/9) {
    p.ps, p.ts {
        display: none !important;
    }
}

/*below effects both footers on main page and contact page*/
div.foot {
    width: 100vw;
    height: 55px;
    position: absolute;
    bottom: -55px;
}
div.foot p {
    font-size: 1.7rem;
    color: white;
    text-align: center;
}

/*blelow only for contact page*/
section.fixed {
    position: fixed;
    width: 100vw;
    height: 100vh;
}
div.forum {
    width: 100vw;
    height: 800px;
}
h1 {
    text-align: center;
    padding-top: 50px;
    font-size: 6.5rem;
}
form.inputs, div.back {
    width: 342px;
    margin: auto;
    display: grid;
}
div.back, div.back a {
    padding-top: 10px;
    text-decoration: none;
    color: var(--contact-theme-color);
    font-size: 2rem;
    margin: auto;
    padding-bottom: 10px;
}
a:hover {
    filter: brightness(0.65);
}
input, textarea {
    width: 87%;
    border-color: var(--contact-theme-color);
    border-radius: 5px;
    padding: 10px;
    margin: 10px auto;
    font-size: 1.5rem;
}
textarea#message {
    height: 70px;
}
input:hover {
    cursor: pointer;
}
input[type="submit"] {
    display: block;
    width: 150px;
    height: 36px;
    margin: auto;
    font-size: 1.5rem;
    background-color: var(--contact-theme-color);
    border-width: 0;
    color: #F7F8FA;
    border-radius: 8px 12px;
}
input[type="submit"]:hover {
    color: rgba(var(--contact-theme-color), 0.9);
}
div.foot.contact {
    background-color: var(--contact-theme-color);
}
@media (max-width: 380px) {
    h1 {
        font-size: 17vw;
    }
    form.inputs, div.back {
        width: 90vw;
    }
}