styles_index.css

@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

/* Marion's Hand */
@font-face {
	font-family: 'Alternate';
	src: url('Fonts/AAAlternate.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'RockwellStd-Condensed';
	src: url('Fonts/RockwellStd-Condensed.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

body{
    color: #fff;
    background-color: #000;
    -webkit-overflow: hidden; /* Safari */        
    -moz-overflow: hidden; /* Firefox */
    -ms-overflow: hidden; /* IE10+/Edge */
    overflow: hidden; /* Standard */
}

header{
    padding: 5em 5em;
}

/* Dropdown Container */
.dropbtn{
    grid-column: 2/3;
    grid-row: 1/2;
    display: block;
    margin: 0 auto;
    color: #fff;
    border: none;
    animation: example-2 8s infinite;
    background: rgba(0,0,0,0);
}
.dropbtn p{
	font-family: 'Alternate',serif;
    font-size: 7rem;
    line-height: 1em;
    transition: all .5s;
}

/* The container <div> - needed to position the dropdown content */
.dropdown{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,auto);
    justify-content: center;
    width: 100%;
    padding: 4em 0;
    position: absolute;
    bottom: 0;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
    transition: all .5s;
    animation: appear2 1.5s ease-out;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-item1{
    grid-row: 2/3;
}
.dropdown-item2{
    grid-row: 3/4;
}
.dropdown-content{
    grid-column: 2/3;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100px);
    transition: all .5s;
}

/* Links inside the dropdown */
.dropdown-content a{
	font-family: 'RockwellStd-Condensed',serif;
    font-size: 2rem;
    letter-spacing: -0.25em;
    text-decoration: none;
    display: block;
    transition: all .15s linear;
    animation: example-2b 8s infinite;
}

.dropdown-content a.home{
    animation: example-2c 8s infinite;
}

/* Change color of dropdown links on hover */
a .mask{
    transition: color .1s linear;
}
a .maskNo{
    transition: color .1s linear;
}

.hide{
	font-family: 'RockwellStd-Condensed',serif;
    visibility: hidden;
    opacity: 0;
    margin: 0 auto;
    text-align: center;
    line-height: 0;
    transform-origin: center;
    transition: all .1s linear;
    animation: example-2e 8s infinite;
    transform: translateY(10px);
}

.dropdown-content > div{
    animation: example-2d 8s infinite;
}
    
/* All Hover */
a:hover .mask, a:active .mask{
    color: #fff;
}
a:hover .maskNo, a:active .maskNo{
    color: #555;
}
.dropdown-content a:hover + .hide, .dropdown-content a:active + .hide{
    visibility: visible;
    transform: translateY(-10px);
    opacity: 1;
}

/* Show the dropdown menu on hover */
.dropdown:hover, .dropdown:active{
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}
.dropdown:hover .dropdown-content, .dropdown:active .dropdown-content{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    visibility: visible;
    transform: translateY(0px);
    opacity: 1;
}
.dropdown:hover .dropdown-content a, .dropdown:active .dropdown-content a{
    font-size: 3rem;
    letter-spacing: 0em;
    padding: 12px 20px;
}

.dropdown:hover .dropbtn p, .dropdown:active .dropbtn p{
    transform-origin: center;
    transform: rotateX(180deg) rotateZ(720deg);
    font-size: 5rem;
    line-height: 2em;
}
.dropdown:hover .dropbtn p:before, .dropdown:active .dropbtn p:before{
    content: "";
}
.dropdown:hover .dropbtn p:after, .dropdown:active .dropbtn p:after{
    content: "";
}
    
.dropdown .dropbtn p:before{
    content: "?";
}
.dropdown .dropbtn p:after{
    content: "?";
}

/* Title */
.titleContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    line-height: 3em;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    animation: appear 1s ease-out;
    z-index: 100;
}

.wrapper{
    animation: example-1 8s infinite;
    animation-timing-function: ease-in-out;
}
.wrapper2{
    animation: example-2 10s infinite;
    animation-timing-function: ease-in-out;
}
.wrapper3{
    animation: example-3 8s infinite;
    animation-timing-function: ease-in-out;
}
.wrapper3 h1{
	font-family: 'Alternate',serif;
    font-size: 20rem;
    line-height: 1.1em;
}
.wrapper h5{
	font-family: 'RockwellStd-Condensed',serif;
    font-size: 4rem;
    line-height: 1em;
}
.wrapper3 h6{
	font-family: 'Alternate',serif;
    font-size: 2rem;
}

/* General Text Styles */
p.temp{
    font-family: 'RockwellStd-Condensed';
    font-size: 3rem;
    margin-inline: auto;
    width: fit-content;
    animation: temp-fade-in 300ms forwards ease;
    animation-delay: 1000ms;
    opacity: 0;
}

/* Animation Keyframes */
@keyframes temp-fade-in{
    to{
        opacity: 1;
    }
}

@keyframes appear{
    0%{
        transform-origin: bottom;
        transform: translateY(1000px) rotateY(270deg);
        opacity: 0;
        letter-spacing: 5em;
    }
    100%{
        transform-origin: bottom;
        transform: translateY(0px) rotateY(0deg);
        opacity: 100;
        letter-spacing: 0.25em;
    }
}

@keyframes appear2{
    0%{
        transform: translateY(1000px) rotateY(-270deg);
        opacity: 0;
    }
    100%{
        transform: translateY(0px) rotateY(0deg);
        opacity: 100;
    }
}

@keyframes example-1 {
    0%{
        color: #888;
        transform: scale(1);
        letter-spacing: 0.25em;
    }
    25%{
        color: #884444;
        transform: scale(0.90);
        letter-spacing: 1em;
    }
    50%{
        color: #888;
        transform: scale(1);
        letter-spacing: 0.25em;
    }
    75%{
        color: #444488;
        transform: scale(0.90);
        letter-spacing: 1em;
    }
    100%{
        color: #888;
        transform: scale(1);
        letter-spacing: 0.25em;
    }
}

@keyframes example-2 {
    0%{
        transform: rotate(5deg) translateY(-10px);
    }
    50%{
        transform: rotate(-5deg) translateY(10px);
    }
    100%{
        transform: rotate(5deg) translateY(-10px);
    }
}
@keyframes example-2b {
    0%{
        color: #ff8888;
        transform: rotate(5deg);
    }
    50%{
        color: #8888ff;
        transform: rotate(-5deg);
    }
    100%{
        color: #ff8888;
        transform: rotate(5deg);
    }
}
@keyframes example-2b2 {
    0%{
        color: #ff8888;
    }
    50%{
        color: #8888ff;
    }
    100%{
        color: #ff8888;
    }
}
@keyframes example-2c {
    0%{
        color: #8888ff;
        transform: rotate(5deg);
    }
    50%{
        color: #ff8888;
        transform: rotate(-5deg);
    }
    100%{
        color: #8888ff;
        transform: rotate(5deg);
    }
}
@keyframes example-2c2 {
    0%{
        color: #8888ff;
    }
    50%{
        color: #ff8888;
    }
    100%{
        color: #8888ff;
    }
}
@keyframes example-2d {
    0%{
        transform: translateY(-10px);
    }
    50%{
        transform: translateY(10px);
    }
    100%{
        transform: translateY(-10px);
    }
}
@keyframes example-2e {
    0%{
        transform: rotate(5deg) translateY(-10px);
    }
    50%{
        transform: rotate(-5deg) translateY(-10px);
    }
    100%{
        transform: rotate(5deg) translateY(-10px);
    }
}

@keyframes example-3 {
    0%{
        color: #fff;
        transform: scale(0.90);
        letter-spacing: 0.25em;
    }
    25%{
        color: #ff8888;
        transform: scale(1);
        letter-spacing: 1.25em;
    }
    50%{
        color: #fff;
        transform: scale(0.90);
        letter-spacing: 0.25em;
    }
    75%{
        color: #8888ff;
        transform: scale(1);
        letter-spacing: 1.25em;
    }
    100%{
        color: #fff;
        transform: scale(0.90);
        letter-spacing: 0.25em;
    }
}

@media all and (max-height: 600px){
    
    header{
        padding-top: 0.5em;
    }
    
    .dropdown{
        grid-template-columns: 1fr;
    }
    .dropdown:hover .dropdown-content a, .dropdown:active .dropdown-content a{
        font-size: 2rem;
        padding: 12px 10px;
    }
    
    .hide{
        font-size: 1rem;
    }
    
    .dropbtn{
        grid-column: 1/-1;
    }
    .dropbtn p{
        font-size: 3rem;
    }
    .dropdown:hover .dropbtn p, .dropdown:active .dropbtn p{
        font-size: 2.6rem;
    }
    
    .dropdown-content{
        grid-column: 1/-1;
    }
    
    .titleContainer{
        line-height: 3em;
    }
    
    .wrapper3 h1{
        font-size: 10rem;
        line-height: 1.1em;
    }
    .wrapper h5{
        font-size: 2rem;
        line-height: 1em;
    }
    .wrapper3 h6{
        font-size: 1rem;
    }
    
}

@media all and (max-width: 600px){
    
    header{
        padding: 5em 0;
    }
    
    .upperGradient{
        background: rgb(0,0,0);
        background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    }

    /* The container <div> - needed to position the dropdown content */
    .dropdown{
        grid-template-columns: 1fr 1fr;
        padding: 4em 0;
    }

    /* Dropdown Content (Hidden by Default) */
    .dropdown-item1{
        grid-row: 2/3;
    }
    .dropdown-item2{
        grid-row: 3/4;
        padding: 0;
    }
    .dropdown-content{
        grid-column: 1/2;
        flex-direction: column;
        justify-content: center;
        transform: translateY(-100px);
    }

    /* Links inside the dropdown */
    .dropdown-content a{
        font-size: 1rem;
        letter-spacing: -0.25em;
        transform-origin: left;
    }

    .dropdown-content a.home{
        transform-origin: left;
    }
    
    .hide{
        text-align: left;
        transform-origin: left;
        transform: translate(100px,0px);
        font-size: 1.25rem;
    }
    
    .dropbtn{
        grid-column: 1/-1;
        padding-bottom: -10em;
    }
    .dropbtn p{
        text-align: left;
        font-size: 3rem;
    }
        
    /* All hover */
    .dropdown-content a:hover + .hide, .dropdown-content a:active + .hide{
        transform: translate(0px,-10px);
        padding: 0 2em;
    }
    .dropdown:hover{
        background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    }

    .dropdown:hover .dropdown-content, .dropdown:active .dropdown-content{
        flex-direction: column;
        justify-content: center;
        transform: translateY(0px);
    }
    .dropdown:hover .dropdown-content a, .dropdown:active .dropdown-content a{
        font-size: 2rem;
        letter-spacing: 0em;
        padding: 12px 20px;
    }

    .dropdown:hover .dropbtn, .dropdown:active .dropbtn{
        margin: 0 2em;
        margin-right: auto;
        margin-bottom: 0em;
        transform-origin: left;
    }
    .dropdown:hover .dropbtn p, .dropdown:active .dropbtn p{
        text-align: left;
        transform-origin: center;
        transform: rotateX(180deg) rotateZ(720deg);
        font-size: 2.6rem;
        line-height: 2em;
    }
    
    /* Title */
    .titleContainer{
        margin: 0 auto;
        padding: 0 auto;
    }
    .wrapper3 h1{
        font-family: 'Alternate',serif;
        font-size: 10rem;
        line-height: 1.1em;
    }
    .wrapper h5{
        font-family: 'RockwellStd-Condensed',serif;
        font-size: 2.2rem;
        line-height: 1em;
    }
    .wrapper3 h6{
        font-family: 'Alternate',serif;
        font-size: 2rem;
    }
    
}