app.css

@font-face {
    font-family: titleFont;
    src: url(./assets/font.otf);
}

body {
    font-family: 'Playfair Display', serif;
    height: 100%;
}

#name-h1 {
    font-family: titleFont, 'Mr Dafoe', cursive;
    text-align: center;
    color: white;
    text-shadow: 4px 4px black;
    white-space: nowrap;
    padding-top: 0.2em;
    transition: text-shadow .3s;
}

#name-h1:hover {
    text-shadow: 4px 4px black, 0 0 100px rgb(255,255,0),  0 0 50px rgb(255,255,0),  0 0 150px rgb(255,255,0),  0 0 200px rgb(255,255,0);
}

#socials {
    width: 100%;
    text-align: center;
}

#socials img {
    width: 5em;
    height: 5em;
    margin: 1em 2em;
    border-radius: 1.3em;
    transition: box-shadow .3s;
}

#socials img:hover {
    box-shadow: 0 0 60px rgb(255,255,0),  0 0 100px rgb(255,255,0); 
}

#main-content-container {
    position: relative;
    text-align: center;
}

#bio {
    text-align: left;
    padding: 3em;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4em;
}

#bio p {
    font-size: 1.1em;
    font-weight: 420;
    color: black;
}

#bio a {
    color: red;
    text-decoration: none;
}

#bio a:hover {
    text-decoration: underline;
}

#bio .name {
    font-family: 'Mr Dafoe', cursive;
    font-weight: 720;
    font-size: 1.5em;
    line-height: 1em;
    display: inline-block;
    transition: transform .2s;
}

#bio .name:hover {
    transform: rotate(-3deg) scale(1.2) translate(-2px, -2px);
    text-shadow: 0 0 3px rgb(255,0,255),
                 0 0 5px rgb(255,0,255), 
                 0 0 10px rgb(255,0,255),
                 0 0 15px rgb(255,0,255),
                 0 0 20px rgb(255,0,255), 
                 0 0 25px rgb(255,0,255), 
                 0 0 30px rgb(255,0,255), 
                 0 0 35px rgb(255,0,255), 
                 0 0 40px rgb(255,0,255),
                 0 0 50px rgb(255,0,255); 
}

#bio .name:hover a {
    color: white;
}

#bio .go-blue {
    font-family: 'Graduate', cursive;
    font-weight: 720;
}

#bio .go-blue a {
    color: #00274C;
}

#main-carousel-container {
    position: fixed;
    z-index: -1;
}

#carousel-1 {
    background-image: url("./assets/c1.jpg");
    background-size: cover;
    background-position: center;
}

#carousel-2 {
    background-image: url("./assets/c2.jpg");
    background-size: cover;
    background-position: center;
}

#carousel-3 {
    background-image: url("./assets/c3.jpg");
    background-size: cover;
    background-position: center;
}

#carousel-4 {
    background-image: url("./assets/c4.jpg");
    background-size: cover;
    background-position: center;
}

#carousel-5 {
    background-image: url("./assets/c5.jpg");
    background-size: cover;
    background-position: center;
}

#carousel-6 {
    background-image: url("./assets/c6.jpg");
    background-size: cover;
    background-position: center;
}

#carousel-7 {
    background-image: url("./assets/c7.jpg");
    background-size: cover;
    background-position: center;
}

#credit {
    display: inline-block;
    padding: 0.8em;
    margin: 2em;
    font-family: 'Playfair Display', serif;
    font-size: 0.8em;
    font-style: italic;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 1em;
}

#credit a {
    color: red;
    text-decoration: none;
}

#credit a:hover{
    -webkit-animation: rainbow 0.5s infinite;
    animation: rainbow 0.5s infinite;
}

.wendy {
    font-weight: 700;
    font-size: 1.6em;
    line-height: 0.8em;
    font-family: 'Tangerine', cursive;
}

#bio .hiddenlink {
    color: black;
    text-decoration: none;
}

#bio .hiddenlink:hover {
    font-weight: 900;
    text-decoration: none;
}

.show {
    font-weight: 900;
    display: inline-block;
}

.email_link {
    margin-bottom: 0;
}

.email_link a:hover {
    animation: rainbow 1.2s infinite;
}

.email_link a {
    font-weight: 700;
}

#bio .purple:hover {
    color: #A020F0;
}

.purple:hover::before {
    content: "💜 "; 
}

.purple:hover::after {
    content: " 💜"; 
}

.hover_thing:hover {
    font-weight: 700;
}

.comedian:hover::before {
    content: "😂 ";
}

.comedian:hover::after {
    content: " 🤣";
}

.singer:hover::before {
    content: "🎤 ";
}

.singer:hover::after {
    content: " 🎶";
}

.musical_writer:hover::before {
    content: "🎹 ";
}

.musical_writer:hover::after {
    content: " ✏️";
}

.love:hover::before {
    content: "💖 ";
}

.love:hover::after {
    content: " 💖";
}

.show {
    transition: .3s;
}

#bio .show:hover {
    text-decoration: none;
    color: white;
    text-shadow: 0 0 5px rgb(255,0,255), 
                 0 0 10px rgb(255,0,255),
                 0 0 15px rgb(255,0,255),
                 0 0 20px rgb(255,0,255), 
                 0 0 25px rgb(255,0,255), 
                 0 0 30px rgb(255,0,255), 
                 0 0 35px rgb(255,0,255), 
                 0 0 40px rgb(255,0,255),
                 0 0 50px rgb(255,0,255);
    animation: jiggle 1s infinite;
}

.pronouns {
    font-style: italic;
}

@-webkit-keyframes rainbow {
    0%, 100% { color: red; }
    15%      { color: #ff8800; }
    20%      { color: yellow; }
    30%      { color: #00ff00; }
    40%      { color: green}
    50%      { color: cyan; }
    60%      { color: lightblue; }
    70%      { color: blue; }
    80%      { color: purple; }
    90%      { color: magenta; }
}
@keyframes rainbow {
    0%, 100% { color: red; }
    15%      { color: #ff8800; }
    20%      { color: yellow; }
    30%      { color: #00ff00; }
    40%      { color: green}
    50%      { color: cyan; }
    60%      { color: lightblue; }
    70%      { color: blue; }
    80%      { color: purple; }
    90%      { color: magenta; }
}

@-webkit-keyframes jiggle {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-1px, 0); }
    20% { transform: translate(1px, 1px); }
    30% { transform: translate(1px, 0); }
    40% { transform: translate(0, 1px); }
    50% { transform: translate(-1px, -1px); }
    60% { transform: translate(-1px, 0); }
    70% { transform: translate(-1px, 1px); }
    80% { transform: translate(0, -1px); }
    90% { transform: translate(1px, -1px); }
    100% { transform: translate(1px, 1px); }
}
@keyframes jiggle {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-1px, 0); }
    20% { transform: translate(1px, 1px); }
    30% { transform: translate(1px, 0); }
    40% { transform: translate(0, 1px); }
    50% { transform: translate(-1px, -1px); }
    60% { transform: translate(-1px, 0); }
    70% { transform: translate(-1px, 1px); }
    80% { transform: translate(0, -1px); }
    90% { transform: translate(1px, -1px); }
    100% { transform: translate(1px, 1px); }
}

@media (min-width: 850px) and (min-height: 800px) {
    #bio {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        max-width: 70vw;
        max-height: 70vh;
    }

    #socials {
        position: fixed;
        bottom: 1em;
        left: 0;
    }

    #credit {
        position: fixed;
        bottom: 0;
        right: 0;
        margin: 0.8em;
    }
}

@media (max-width: 500px) {
    #socials img {
        width: 4em;
        height: 4em;
        margin: 1em 1.5em;
    }
}

@media (max-width: 400px) {
    #bio p {
        font-size: 1em;
        color: black;
    }

    #socials img {
        width: 3.5em;
        height: 3.5em;
        margin: 0.5em 1em;
    }
}

@media (max-width: 300px) {
    #bio p {
        font-size: 0.9em;
        color: black;
    }

    #socials img {
        width: 2em;
        height: 2em;
        margin: 0.5em 1em;
    }
}

@media (max-width: 250px) {
    #bio p {
        font-size: 0.8em;
        color: black;
    }

    #site-container {
        width: 230px;
    }
}