@font-face {
    font-family: 'Anselm Sans Light';
    src: url('fonts/AnselmSans-Light.ttf');
}

@font-face {
    font-family: 'Epoque';
    src: url('fonts/EpoqueSeria-Light.ttf');
}

body {
    background-color: white;
    padding:x;
    /*cursor: url('Images/Cursor2.png'), auto;*/
    cursor: progress;
}

::selection {
    background: greenyellow
}

@keyframes blur {
    0% {filter: blur(0px);}
    50% {filter: blur(2px);}
    100% {filter: blur(0px);}
}

.cloudsdiv, .fixedtext, .mainscene {
  width: 100vw;
  height: 100vh;
}

div.mainscene {
  position: fixed;

}

div.past {
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: flex-start;
    align-items: space-between;
    flex-flow: column nowrap;
    row-gap: 2vh;

}

div.event {
    display: flex;
    flex-flow: row;
}

.highlight {
    position: fixed;
    mix-blend-mode: normal;
    pointer-events: none;
    z-index: 3;
    height: 100vh;
    width: 100vw;
    margin: -10px;
    scale: 107%;
    object-fit: fill;
}

.emotiva {
    position: fixed;
    padding: 0px;
    height: 90%;
    width: 100%;
    max-width: 45vw;
    top: 32px;
    scale: 150%;
    mix-blend-mode: difference;
    filter: invert(1);
    animation-name: blur;
    animation-duration: 0s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    pointer-events: none;
    object-fit: cover;
    z-index: 100;
}

@keyframes cloudmove {
    0% {object-position: 0px;}
    100% {object-position: 0px -200vh;}
}


.clouds {
    position: fixed;
    opacity: 10%;
    height: 300vh;
    min-width: 100vw;
    mix-blend-mode: multiply;
    margin: -10px;
    padding: 0px;
    animation-name: cloudmove;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    pointer-events: none;
    object-fit: cover;
    z-index: -5; 
}

.arrow {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 2;
}

@keyframes huecycle {
    0% {filter: hue-rotate(0deg);}
    100% {filter: hue-rotate(360deg);}
}

.text {
    position: relative;
    margin-left: 29.2px;
    margin-bottom: 0px;
    top: 0px;
    max-width:fit-content;
    font-family:'Anselm Sans Light';
    font-size: 48px;
    letter-spacing: -3px;
    color: black;
    text-decoration: underline;
    mix-blend-mode: normal;
    font-weight: normal;
    z-index: 2;
    /*animation-name: strobe;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function:steps(1)*/
}

.fixedtextheading {
    position:fixed;
    text-align: right;
    right: 29.2px;
    margin-bottom: 0px;
    top: 0px;
    font-family:'Epoque';
    font-size: 48px;
    color: black;
    text-decoration: underline;
    mix-blend-mode: normal;
    font-weight: normal;
    z-index: 5;
    
    
    /*animation-name: strobe;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function:steps(1)*/

}

strong {
    font-weight: normal;
    text-decoration: underline;
    font-family: 'Anselm Sans Light';
    letter-spacing: -3px;
}

b {
    font-weight: normal;
    text-decoration: none;   
    transition: text-shadow .3s ease-in-out, webkit-text-stroke .3s ease-in-out;
    letter-spacing: 0px;
}

.fixedtext:hover b {
    cursor: pointer;
    -webkit-text-stroke: .5px blue;
    text-shadow: 0px 0px 5px rgba(0, 0, 255, 0.3);
    transform: rotate(1turn);
    z-index: 5;
}

.underline {
    text-decoration: underline;
    font-family: 'Anselm Sans Light';
    font-size: 48px;
    letter-spacing: -3px;
}

.fixedtext p {
    margin: 0px;
}


.fixedtext {
    position:fixed;
    text-align: right;
    right: 29.2px;
    margin-bottom: 0px;
    top: 0px;
    font-family: 'Arial Narrow';
    font-size: 48px;    
    color: black;
    mix-blend-mode: normal;
    font-weight: normal;
    z-index: 2;
    max-width: max-content;
    min-width: min-content;
    letter-spacing: -3px;
    line-height: 54px;
    z-index: 5;
    transition: text-shadow .3s ease-in-out, webkit-text-stroke .3s ease-in-out;
    padding-top:48px;
}

.socials {
    position: fixed;
    width: min-content;
    height: max-content;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-flow: row nowrap;
    column-gap: 16px;
    right: 29.2px;
    bottom:-19px;
    color: black;
    text-decoration: underline;
    z-index: 2;
    font-family: 'Anselm Sans Light';
    font-size: 48px;
    letter-spacing: -3px;
}

.socials p {
    text-align: left;
    transition: transform .3s ease-in-out, text-shadow .3s ease-in-out, -webkit-text-stroke .3s ease-in-out;
}

.socials p:hover {
    cursor: pointer;
    -webkit-text-stroke: .5px blue;
    text-shadow: 0px 0px 5px rgba(0, 0, 255, 0.3);
    transform-origin: bottom right;
}


/* .fixedtext:hover {
    background-image: linear-gradient(45deg, red, yellow, limegreen, cyan, blue, magenta);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
    animation-name: huecycle;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
} */

@keyframes strobe {
    0% {filter: invert(0);}
    50% {filter: invert(1);}
    100% {filter: invert(0);}
}

.event {
    position: relative;
    margin-top: 0px;
    margin-left: 32px;
    margin-bottom: 32px;
    width: 35vmax;
    height: max-content;
    object-fit: contain;
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7);
    animation: huecycle linear 10s infinite, zoom ease-in .1s 3;
    cursor: pointer;
    border-radius: 16px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transform-origin: top left;
    border: 1px solid black;
    z-index: 0;
}

.event img {
    display: block;
    width: 100%;
    border-radius: 15px;
}

.first {
    z-index: 99;
}

@keyframes move {
    0% {padding-left: 0px;}
    100% {padding-left: 28px;}
}

@keyframes blurred {
    0% {filter: blur(3px);}
    100% {filter: blur(0px);}
}

 .event:hover {
    mix-blend-mode: normal;
    padding-left: 0px;
    transform: scale(200%) rotate(-5deg);
    transform-origin: top left;
    filter: blur(0px);
    object-fit: cover;
    display: flex;
    align-content: center;
    z-index: 1;
    animation: none;
    /*box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7);*/
}

@media (max-width: 400px) {
    body {
        background-color: blue;
    }
}