* {
    margin: 0px;
    padding: 0px;
}

@font-face {
    font-family: "Red Hat";
    /* font-style : normal; */
    src: url(
        "../assets/fonts/Red_Hat_Display/static/RedHatDisplay-Regular.ttf");
}
body {
    font-family: "Red Hat";
}
a {
    text-decoration: none;
    color: black;
}

ul,ol {
    list-style-type: none;
}

/* loader animation */
div#loader {
    position        : absolute;
    display         : flex;
    justify-content : center;
    align-items     : center;

    width           : 100vw;
    height          : 100vh;

    background-color: rgba(236, 233, 251, 1);
    backdrop-filter : blur(4px);
	z-index         : 10;
}
img#broom {
    position        : absolute;
    width           : 8.5vw;
    transform-origin: center;
    animation       : sweep 1.5s infinite linear;
}
@keyframes fadein {
    0%   {
		opacity     : 0;
		visibility  : visible;
	}
    100% {
	   opacity      : 1;
	   visibility   : visible;
	}
}

@keyframes fadein-opacity-0p2 {
    0%   {
		opacity   : 0;
		visibility: visible;
	}
    100% {
	   opacity    : 0.2;
	   visibility : visible;
	}
}

@keyframes sweep {
    0%  { transform: translateX(0%);}
    5%  { transform: translateX(10%); }
    10% { transform: translateX(-20%);}
    15% { transform: translateX(20%); }
    20% { transform: translateX(-20%);}
    25% { transform: translateX(10%); }
    30% { transform: translateX(0%); }
    45% { transform: rotateY(0deg); }
    50% { transform: translateX(0%) rotateY(180deg); }
    55% { transform: translateX(10%) rotateY(180deg); }
    60% { transform: translateX(-20%) rotateY(180deg); }
    65% { transform: translateX(20%) rotateY(180deg); }
    70% { transform: translateX(-20%) rotateY(180deg);}
    75% { transform: translateX(10%) rotateY(180deg); }
    80% { transform: translateX(0%) rotateY(180deg); }
    85%, 95% { transform: rotateY(180deg);}
    100% { transform: rotateY(0deg); }
}

@keyframes appear-from-left {
    from {
        /* assuming element is initially: visibility: hidden; */
        transform : translateX(-100%);
        opacity   : 0;
    }
    to {
        opacity   : 1;
        visibility: visible;
        transform: translateX(0%);
    }
}

@keyframes appear {
    from {
        /* assuming element is initially: visibility: hidden; */
        opacity   : 0;
    }
    to {
        opacity   : 1;
        visibility: visible;
    }
}

/* hint animation */
img#arrow-down {
    position        : absolute;
    width           : 10vw;
	visibility      : hidden;
    animation       : appear 1s, hint-go-down 4s forwards 1;
	animation-delay : 5.5s, 5.5s;
}
div#hint {
    position        : absolute;
    display         : flex;
    justify-content : center;
    align-items     : end;
    width           : 100vw;
    height          : 100vh;
}
@keyframes hint-go-down {
    0%   { visibility      : visible;
           transform: translateY(-10%);}
    5%   { transform: translateY(0%);}
    10%  { transform: translateY(-10%);}
    15%  { transform: translateY(0%);}
    20%  { transform: translateY(-10%);}
    25%  { transform: translateY(0%);}
    30%  { transform: translateY(-10%);}    
    35%  { transform: translateY(0%);}
    40%  { transform: translateY(-10%);}    
    45%  { transform: translateY(0%);}
    50%  { transform: translateY(-10%);}
    55%  { transform: translateY(0%);}
    100% { visibility      : hidden; }
}

/* jiggle effect */
@keyframes jiggle {
    1% { transform: translate(0px, 0px) rotate(0deg);}
    5% { transform: translate(1px, -1px) rotate(-1deg);}
    10% { transform: translate(2px, -2px) rotate(0deg);}
    15% { transform: translate(3px, -3px) rotate(1deg);}
    20% { transform: translate(2px, -2px) rotate(0deg);}
    25% { transform: translate(1px, -1px) rotate(-1deg);}
    30% { transform: translate(0px, 0px) rotate(0deg);}
    35% { transform: translate(-1px, 1px) rotate(1deg);}
    40% { transform: translate(-2px, 2px) rotate(0deg);}
    45% { transform: translate(-3px, 3px) rotate(-1deg);}
    50% { transform: translate(-2px, 2px) rotate(1deg);}
    55% { transform: translate(-1px, 1px) rotate(1deg);}
    60% { transform: translate(0px, 0px) rotate(0deg);}
}

@keyframes shrink {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
        visibiltiy: hidden;
    }
}

@keyframes move-to-left {
	0% {
	}
	100% {
		transform: translateX(-123%);
	}
}

@keyframes move-to-left-little {
	0% {
	}
	100% {
		transform: translateX(-100%);
	}
}


@keyframes disappear {
	100% {
		visibility: hidden;
	}
}
#b_more {
    background-color: #ebe7fa;
    display         : flex;
    justify-content : center;
    align-items     : center;
}

table#t_more {
    position        : absolute;
    /* border: 1px solid black; */
    top             : 10%;
    margin          : 0.25rem;
    border-spacing  : 0.25rem;
}

table#t_more tr > td {
    text-align      : center;
    padding         : 0.75rem;
    background-color: rgba(239, 207, 227, 0.15);
}

table#t_more tr > td:first-child {
    /* font-size       : 0.8rem; */
    font-size       : 2vw;
    text-align      : center;
}
table#t_more tr > td:nth-child(2) {
    /* font-size       : 0.75rem; */
    font-size       : 1.85vw;
    text-align      : left;
}

/* if scroll-snap-align is supported */
@supports (scroll-snap-align: start) {
    .scroll-container {
        scroll-snap-type     : y mandatory;
        height               : 100vh;     /* prevents mid-hang */
        overflow             : auto;
        /* scroll-snap-points-y: repeat(100vh); */
    }
}

.scroll-container section {
    height               : 100vh;     /* prevents mid-hang */
    scroll-snap-align    : start;
    display              : flex;

    justify-content      : center;
    align-items          : center;
    border               : 1px solid black;

    position             : relative;
}

img.background-image {
    max-width            : 100%;
    height               : auto;
}

div.slide-like {
    height               : 90vh;

    /* -- all draft below -- */
    border-color         : black;
    border-style         : solid;
    border-width         : thin;
    justify-content      : center;
    align-items          : center;
    display              : flex;
}

#s4-bgimg {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#s4t-container {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

a[href^="mailto:"]:hover, a[href^="tel:"]:hover {
    color: LightSeaGreen;

}

.footer {
	font-size  : 1.15vh;
	position   : fixed;
	left       : 0;
	bottom     : 1%;
	width      : 100%;
	color      : black;
	opacity    : 0.2;
	text-align : center;
}