@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Raleway:wght@800&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --bluePrim: #548CFF;
    --greenPrim: #93FFD8;
    --purplePrim: #7900ff;
    /* --borderColor: rgba(84, 140, 255, 0.5); */
    --borderColor: rgba(147, 255, 216, 0.5);
    --resumeTitlePrimary: #548CFF;
    --resumeTitleSecondary: #93FFD8;
    --background-color: #222831;
    --dark-purple: #AA2EE6;
    --nav-color: #212121;
    --light-purple: #AD62AA;
    --red: #E94560;
    --success: #5cb85c;
    --danger: #FA1E0E;
    /* --borderColor: rgba(121, 0, 255, 0.5); */
}

#myText {
    transition: color ease;
}

.fullPage {
    width: 100%
}

.horizontal {
    flex-direction: row;
}

.wrapper {
    flex-wrap: wrap;
}

.spread {
    justify-content: space-evenly;
}

.flex {
    display: flex;
}

.card {
    content: "";
    width: 100%;
    height: 2lh;
    margin: 1rem;
    padding: 0.25em;
    border-radius: 5px;
    border: 1px solid var(--light-purple);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 5px var(--light-purple);
    font-family: "Permanent Marker", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    text-align: center;
    background-color: var(--background-color);
    color: var(--light-purple);
    transition: all 0.25s ease-in;
    position: relative;
    z-index: 2;
    overflow: hidden;
    flex: 1 1 10%;
    /* 4 items per row (approx 25% minus spacing) */
}

.card:hover {
    box-shadow: 4px 4px 5px var(--dark-purple);
    cursor: pointer;
    color: var(--nav-color);
}

.card:before {
    transition: 0.4s all ease;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    bottom: 0%;
    opacity: 0;
    content: "";
    background-color: var(--light-purple);
    border: var(--light-purples) solid 1px;
    z-index: 1;
}

.card:hover:before {
    border: var(--light-purples) solid 1px;
    transition: 0.4s all ease;
    left: 0;
    right: 0;
    opacity: 1;
    z-index: -1;
}

#cardArea {
    justify-content: center;
    align-items: center;
    display: flex;
}

#cardContainer {
    width: 80%;
    margin: 0;
    padding: 0;

}

.cardRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

#flippedCard {
    position: absolute;
    top: 0;
}

.fullCardWrapper {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#flexCardFlipped {
    align-self: center;
    justify-self: center;
    justify-content: space-evenly;
    align-items: space-evenly;
    height: 80%;
    width: 80%;
    background-image: linear-gradient(to bottom right, #fd0800, #d38c20, #eba30a);
    border-radius: 40px;
    opacity: 95%;
    z-index: 1;
}

#cardContent {
    font-size: 1.25em;
    padding: 0 25px;
    text-align: justify;
}

.hide {
    opacity: 0%;
}

.show {
    opacity: 100%;
}

.shown {
    background-color: var(--light-purple);
    color: var(--nav-color);
    border: 1px solid var(--dark-purple);
    box-shadow: 2px 2px 5px var(--dark-purple);
}

.shown:hover {
    box-shadow: 2px 2px 10px var(--dark-purple);
    z-index: 1100;
}

#randomContainer {
    border: solid var(--light-purple) 2px;
    border-radius: 4px;
    padding: 2rem;
}

#randomContainer h3 {
    font-family: "Permanent Marker";
    font-weight: 400;
    color: var(--light-purple);
}

#randomFactTitle {
    margin-top: 0;
}

@media(max-width:1300px) {
    #cardContainer {
        width: 90%;
    }
}


@media(max-width:992px) {
    .card {
        font-size: 1rem;
        flex: 1 1 17%;
        margin: 5px;
    }
}

/* Tablet screens (768px and below) */
@media (max-width: 768px) {
    .card {
        font-size: 0.75rem;
        padding: 0.5rem;
        flex: 1 1 45%;
    }

    .cardRow {
        width: 100%;
    }
}

/* Mobile screens (480px and below) */
@media (max-width: 480px) {
    .card {
        font-size: 0.5rem;
    }

    .sticky {
        width: 30%;
    }

    #rightColumn {
        width: 70%;
    }

    #leftColumn {
        padding: 5px;
        padding-left: 10px;
    }

    #contactMe {
        padding-left: 5px;
    }

    ul {
        padding-left: 10px;
    }

    .skillItem {
        font-size: 0.4rem;
    }
}