﻿
.media-layout {
    display: flex;
    height: 100vh;
}
.media-rows-layout {
    display: flex;
    flex-direction: row;
}

.media-rowcol-child {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.media-cols-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.media-rows-row-1 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    font-size: 1.5rem;
    background-color: #f0f0f0;
}

.media-rows-row-2 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    font-size: 1.5rem;
    background-color: #f0f0f0;
}

.media-rows-row-3 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    font-size: 1.5rem;
    background-color: #f0f0f0;
}


.video-container {
    width: 100%;
    max-width: 100%;
    position: absolute;
    background-color: transparent;
}

/*body {
    background: black;
}*/
/*
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  background: 50% 100% / 50% 50% no-repeat radial-gradient(ellipse at bottom, #fff, transparent, transparent);
  background-clip: text;
  color: transparent;
  font-size: 4em;
  animation: reveal 3000ms ease-in forwards 200ms,
             glow 2500ms linear infinite 2000ms;
}

@keyframes reveal {
  80% {letter-spacing: 10px;}
  10% {background-size: 300% 300%}
}

@keyframes glow {
  40% {text-shadow: 0 0 8px #fff;}
} */

.welcomecontainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

welcomeh1 {
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    /*background: 50% 100% / 50% 50% no-repeat radial-gradient(ellipse at bottom, #fff, transparent, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 2em;
    animation: reveal 3000ms ease-in forwards 200ms, glow 2500ms linear infinite 2000ms;*/
}

@keyframes reveal {
    80% {
        letter-spacing: 10px;
    }

    100% {
        background-size: 300% 300%;
    }
}

@keyframes glow {
    40% {
        text-shadow: 0 0 8px #fff;
    }
}