a:hover {
    color: whitesmoke;
}

.adjust-button:hover {
    background-color: #000;
    color: #3f3d3d;
}

.blog-link {
    display: inline-block;
    background-color: white;
    color: black;
    padding: 10px 20px;
    border-radius: 5px;
    border-radius: 5px;
    z-index: 2;
    width: fit-content;
    text-align: center;  
    margin-left: 30%;
    top: 20%;
    margin-bottom: 50%;
    animation: breathe 5s ease-in-out infinite;
}

.blog-link:hover {
    background-color: #000;
    color: #3f3d3d;
}


/*ANIMATION*/
@-webkit-keyframes breathe {
    0% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
    }
  
    25% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  
    60% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
    }
  
    100% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
    }
}
  

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes shiver {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-1px);
    }

    50% {
        transform: translateX(0px);
    }

    75% {
        transform: translateX(1px);
    }

    100% {
        transform: translateX(0px);
    }
}
/* Media Query for Small Screens (600px or less) */
@media (max-width: 600px) {

    .banner {
        margin-top: 10%;

    }

    .blog-link {
        margin-left: auto;
    }

    .adjust-button {
        display: inline-block;
        border-radius: 5px;
        width: fit-content;
        text-align: center; 
        margin: 0% -50% 0% -50%; 
        position:relative;
        top:50%; 
        right: inherit;
    }

    .about {
        flex-direction: column;
        align-items: center;
        padding: 2rem;
    }

    .aboutLeft, .aboutRight {
        width: 100%;
        text-align: center;
    }

    h2 {
        font-size: 2rem;
    }

    p {
        font-size:1rem;
    }

    .contact {
        padding: 2rem;
    }

    .frontCards {
        z-index: 2;
        position: absolute;
        padding: 0;
        margin-left: 0.5rem;
        animation: float 6s ease-in-out infinite;
    }
    .social-button-text {
        text-align: center;
        font-size: 20px;
        position: relative;
        margin: auto;
        padding: 0;
    }
    .mal-social-text, h2 {
        font-size: 1rem;
    }
    .iconimage {
        margin: auto;
        padding: 50px;
        display: flex;
        max-width: 70%;
        padding-bottom: 10px;
        padding-top: 10px;
    }
}


/*Social pages*/
.iconimage {
    margin: auto;
    padding: 15%;
    display: flex;
    min-width: 44%;
    max-width: 50%;
    border: white;
    padding-bottom: 10px;
    padding-top: 10px;
}

.social-text {
    margin: auto;
    display: block;
}
#eli-text, h2 {
    color: white;
    
}

.social-card, .mal-social-card {
    box-sizing: border-box;
    border: 2px solid rgb(255, 255, 255);
    max-width: 70%;
}

.social-card {
    background-color: rgb(84, 7, 25);
    border-radius: 5px;
    animation: float 4s ease-in-out infinite;
    padding-bottom: 0;
}

.mal-social-card {
    background-color: rgb(69, 69, 69);
    border-radius: 5px;
    animation: float 4s ease-in-out infinite;
    padding-bottom: 0;
}

.mal-social-text, h2 {
    color: rgb(0, 0, 0);
}
.social-link-button {
    background-color: rgb(84, 7, 25);
    display: inline-block;
    text-align: center;
    font-size: larger;
    color: white;
    height: fit-content;
    width: 100%;
    border: 2px dotted rgb(137, 55, 60) ;
    padding: 5%;
}

.mal-social-link-button {
    background-color: rgb(69, 69, 69);
    display: inline-block;
    text-align: center;
    font-size: larger;
    color: white;
    height: fit-content;
    width: 100%;
    border: 2px dotted rgb(99, 99, 99) ;
    padding: 5%;
}

svg {
    width: 100%;
    display: flex;
    padding-top: 10px;
}

.link-word {
    width: 100%;
}

.mal-social-link-button:hover {
    background-color: #000000;
    opacity: .87;
    height: 150%;
    box-sizing: border-box;
    font-size: larger;
    padding-top: 1rem;
}

.social-link-button a {
    margin: 0;
    padding: 10px;
    width: 100px;
    height: 200%;
    display: flex;
    border-radius: 10px;
    text-align: center;
    unicode-bidi: isolate;
    font-size: 1.6rem;
    -webkit-font-smoothing: antialiased;
}

.social-button-text {
    text-align: center;
    font-size: larger;
    color: #a2858a;
    margin: 10px;
    padding: 0;
    position: flex;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

.main1 {
        display: flex;
        flex: 1;
        align-items: bottom;
        justify-content: space-between;
        padding: 30%;
        margin: 10%;
        flex-direction: column;
        align-items: center;
        animation: float 4s ease-in-out infinite;
        
}

.main1 p {
        flex: 1;
        
}

.main1 img {
        width: 100%; /* Images take full width on small screens */
        max-width: 400px;
        margin: 0 0 0 0;
        padding-bottom: 0;
}

.main1-text {
        text-align: center;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 44px;
}

/* Main Sections */
.main1 {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 0;
    color: whitesmoke;
    animation: float 4s ease-in-out infinite;
    min-width: fit-content;
    
}

.main1 {
    background-color: #171717; /* Light gray */
    padding: 0px 10px 0px 0px;
    border-radius: 10px;
    align-self: right;
    margin-left: 10px;
}

.main1 h2 {
    color: white;
}



.main1:hover {
    background-color: rgb(47, 28, 52);
    padding: 0;
}



.main1 img {
    flex: 1;
    max-width: 44%;
    margin-right: 20px;
    padding-right: 10px;
    margin-left: 0px;
    padding-left: 0px;
    padding-bottom: 0;
    
}

.loreImage {
    animation: shiver 4s ease-in-out infinite;
    position: relative;
    flex-direction: row-reverse;
}

.loreImage:hover {
    content: url("./Images/Loretta_Elixiink.png");
}


.main1 img {
    width: 100%;
    margin: 5px 5px 0px 5px;
    padding: 20px;
    padding-bottom: 0;
    flex-direction: row-reverse;
}

.main1-text p {
    text-align: center;
    padding-left: 0;
    margin-left: 0;
}

.main1-text {
    margin-left: -20%;
}



/*ANIMATION*/
@-webkit-keyframes breathe {
    0% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
    }
  
    25% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  
    60% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
    }
  
    100% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
    }
}
  

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes shiver {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-1px);
    }

    50% {
        transform: translateX(0px);
    }

    75% {
        transform: translateX(1px);
    }

    100% {
        transform: translateX(0px);
    }
}


/* Media Query for Small Screens (600px or less) */
@media (max-width: 800px) {


    .adjust-button {
        display: inline-block;
        border-radius: 5px;
        width: fit-content;
        text-align: center; 
        margin: 0% -50% 0% -50%; 
        position:relative;
        top:50%; 
        right: inherit;
    }


    .main1 {
        display: flex;
        flex: 1;
        width: 75dvw;
        align-items: center;
        padding: 2%;
        padding-bottom: 0;
        animation: float 4s ease-in-out infinite;
        
    }

    .main1 img {
        height: 100%; 
        margin: 0 0 0 0;
        padding-bottom: 0;
        display: flex;
        flex-wrap: wrap;
    }

    .main1-text {
        text-align: right;
        padding-left: 10px;
        padding-right: 10px;
    }
    .popup-text {
        display:inline-block;
        text-align: center;
        padding: 10px;
        padding-bottom: 0px;
        font-size: 1rem;
    }
    
    .social-card, .mal-social-card {
        box-sizing: border-box;
        border: 2px solid rgb(255, 255, 255);
        width: 100%;
    }
    .popup {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    padding: 20px;
                    border-radius: 8px;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                    background:rgb(0, 0, 0);
                    z-index: 9998;
    }

    @media (min-width: 1000px) {
        .link-word {
            font-size: 44px;
        }
    }

}

.popup-text {
    display: inline-block;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    margin: 5px;
}

.popup-text h2 {
    padding-top: 10px;
}

.popup-text p {
    display: inline-block;
    font-size: 14px;
}

#clickme {
}

#closePopup {
    top: 10%;
    color: white;
}

#popup.popup.ad {
    display: inline-block;
}
            /*want a break from the ads?*/
.popup-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background:rgba(70, 32, 68, 0.54);
}
.popup-content {
                z-index: 4;
}
.popup {
                position: absolute;
                top: 60%;
                left: 50%;
                transform: translate(-50%, -50%);
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                background:rgb(0, 0, 0);
                z-index: 9998;
                max-height: fit-content;
                display: flex;
                min-height: fit-content;
}
.glitch:hover {
                color: transparent;
                text-shadow: 0 0 7px rgba(255, 107, 2, 0.658);
}