Nightmares/static/css/site.css

html, body {
    min-width: 100vw;
    min-height: 100vh;
}

body {
    background-color: black;
    color: snow;
}

a:hover {
    font-weight: 500;
}

.title-page a {
    font-size: 4vw;
    animation: 3s ease-out 0s 1 fadeIn;
    color: snow;
}

.title-page a:hover {
    color: snow;
}

.shift-left {
    margin-right: 55%;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.shift-right {
    margin-left: 55%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.title-page>h1 {
    font-size: 12vw;
    height: 12vh+12vw;
    font-family: "Times New Roman", Times, serif;
    text-align: center;
    padding-top: 5vh;
    padding-left: 7vw;
    padding-bottom: 5vw;
}

.lift {
    display: inline-block;
}

.lift.anim {
    animation: 3s ease-out 0s 1 slideDown;
}

.drop {
    display: inline-block;
    position: relative;
    transform: translateY(50%);
}

.drop.anim {
    animation: 3s ease-out 0s 1 slideInFromRight;
}

.title-desc {
    animation: 6s ease-out 0s 1 fadeIn;
}

@keyframes slideDown {
    0% {
        transform: translate(50%);
        opacity: 0.0;
    }
    50% {
        transform: translateY(50%);
        opacity: 0.0;
    }
    100% {
        transform: translateY(0);
        opacity: 1.0;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translate(50%, 50%);
        opacity: 0.0;
    }
    50% {
        transform: translate(50%, 50%);
        opacity: 0.0;
    }
    100% {
        transform: translateY(0, 50%);
        opacity: 1.0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0.0;
    }
    50% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}

.list h1 {
    font-size: 14vw;
}

.list p {
    font-size: max(24px,4vw);
    width: 100%;
}

.list li {
    font-size: max(22px,3.5vw);
}

.page {
    background-color: floralwhite;
    /* background-image: linear-gradient(to right,rgba(0,0,0,1) 0%, rgba(255,255,255,1) 3%, rgba(255,255,255,1) 97%, rgba(0,0,0,1) 100%); */
    width: 100%;
    color: black;
    filter: drop-shadow(0 0 30px white);
}

.page article {
    min-height: 95vh;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2vh;
    padding-bottom: 10vh;
}

.page a {
    color: black;
}

.page a:hover {
    color: black;
}

.header {
    width: 100%;
    display: none;
}

.header .page {
    filter: none;
    padding-bottom: 5vh;
}

@media only screen and (min-width: 993px) {
    .header.large { 
        display: initial;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .header.medium { 
        display: initial;
    }
}

@media only screen and (max-width: 767px) {
    .header.small { 
        display: initial;
    }
}

.navbar {
    padding-left: 10px;
}

nav span, nav a {
    font-size: max(30px,2vw);
}

nav.bg-dark span, nav.bg-dark a {
    color: ivory;
}

nav .logo {
    text-decoration: none;
}

nav .logo:hover {
    font-weight: initial;
}

nav .spacer {
    margin-left: 1vw;
    margin-right: 1vw;
}