:root {
    /* Use viewport height times √2 to ensure full-screen coverage when rotated */
    --animation-duration: 1.5s;
    --easing: ease-in-out;
    --sitred: #EE2E24;
    --sitredhover: #ffffff;
    --sitblack:#000000;
}
.fillset{
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top:0;
}
.hidden{
    display: none !important;
}
.bgvid{
    object-fit:cover;
    width: 100%;
    height:100%;
}
.stylebutton{
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    border-radius: 25px;
}
.stylebutton:hover {
    background-color: var(--sitredhover);
    color: var(--sitblack);
}
.sitred{
    background-color: var(--sitred);
}
.sitblack{
    background-color: var(--sitblack);
}



.triangle{
    position: fixed;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    height: 200%;
    width: 200%;
    bottom:0;
    left:-50%;
    animation: slide-out var(--animation-duration) var(--easing) forwards;
}
.cover--left {
    --dir: -1;
}

.cover--right {
    --dir: 1;
}
@keyframes slide-out {
    to {
        transform: translate(calc(var(--dir)*100%), 100%);
    }
}
.logotext{
    margin-bottom: 5%;
    font-size: 10vmin;
    color: #ffffff; 
    text-shadow: 0.2vmin 0 0 #000, 0 -0.2vmin 0 #000, 0 0.2vmin 0 #000, -0.2vmin 0 0 #000;
}