/* I am importing from google fonts and my files */
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&family=Kalnia+Glaze:wght@100..700&family=Nabla&family=New+Amsterdam&family=Sixtyfour+Convergence&family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&family=Kalnia+Glaze:wght@100..700&family=Nabla&family=New+Amsterdam&family=Nothing+You+Could+Do&family=Sixtyfour+Convergence&family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&family=DotGothic16&family=Kalnia+Glaze:wght@100..700&family=Nabla&family=New+Amsterdam&family=Nothing+You+Could+Do&family=Sixtyfour+Convergence&family=Space+Grotesk:wght@300..700&display=swap');
@font-face {
    font-family: 'Rocher';
    src: url(https://assets.codepen.io/9632/RocherColorGX.woff2);
}
@font-palette-values --Mint {
    font-family: Rocher;
    base-palette: 7;
}
@font-face {
    font-family: 'kamikaze';
    src: url('fonts/kamikaze.3d-gradient-italic.ttf')
}
@font-face {
    font-family: 'gunplay';
    src: url('fonts/gunplay.3d-regular.otf');
}

body {
    margin-top: 25px;
    font-family: 'Space Grotesk', sans-serif;
    padding: 0px;
    background-color: #faca78;
}

/* this is the beginning of my main page. */
h3 {
    text-align: center;
    font-family: 'rocher';
    font-size: 250px;
    color: #f37d59;
    text-shadow: 
        2px 2px 0px black,   
        -2px 2px 0px black,  
        2px -2px 0px black, 
        -2px -2px 0px black; 
}

.hide-title {
    position: absolute;
    z-index: 1;
    margin-top: -35px;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.5s ease;
    cursor: pointer;
}

.hide-title:hover {
    animation: lifts 2.5s ease-out forwards;
}

.hide-title:hover ~ .seek-title {
    animation: drowns 2.5s ease-out forwards;
}

.hide-title:hover ~ .and-title1 {
    animation: drowns1 2.5s ease-out forwards;
    opacity: 1;
    transition: opacity 2.5s ease;
}

.hide-title:hover ~ .and-title2 {
    animation: drowns2 2.5s ease-out forwards;
}

.hide-title:hover ~ .and-title3 {
    animation: drowns3 2.5s ease-out forwards;
    opacity: 0;
    transition: opacity 2.5s ease;
}

.hide-title:hover ~ .and-title4 {
    animation: drowns4 2.5s ease-out forwards;
}

.hide-title:hover ~ .and-title5 {
    animation: drowns5 2.5s ease-out forwards;
    opacity: 1;
    transition: opacity 2.5s ease;
}

.hide-title:hover ~ .small-title {
    animation: drowns_r 2.5s ease-out forwards;
    opacity: 1;
    transition: opacity 2.5s ease;
}

.seek-title {
    position: absolute;
    z-index: 2;
    margin-top: 155px;
    left: 50%;
    transform: translateX(-50%);
    transition: 3s ease;
    cursor: pointer;
}

.seek-title:hover {
    opacity: 0;
}

.and-title1, .and-title2, .and-title3, .and-title4, .and-title5, .small-title {
    opacity: 1;
    position: absolute;
    z-index: 1;
    margin-top: 165px;
    font-family: 'rocher';
    font-palette: --Mint;
    font-size: 50px;
    color: #faca78;
    left: 50%;
    text-shadow: none;
    transition: 1.5s ease;
}

.and-title1 {
    transform: translateX(-120px);
    opacity: 0;
    transition: opacity 0s ease;
}

.and-title2 {
    transform: translateX(35px);
    transition: opacity 0s ease;
}

.and-title3 {
    transform: translateX(70px);
    transition: opacity 0s ease;
}

.and-title4 {
    transform: translateX(112px);
    transition: opacity 0s ease;
}

.and-title5 {
    transform: translateX(170px);
    opacity: 0;
    transition: opacity 0s ease;
}

.small-title {
    opacity: 0;
    transition: opacity 0s ease;
    transform: translate(72px);
}

.appear-text {
    opacity: 0;
    transition: opacity 0s ease;
}

@keyframes lifts {
    0% {
        transform: translateX(-50%) translateY(0px);
    }
    100% {
        transform: translateX(-50%) translateY(-30px);
    }
}

@keyframes drowns {
    0% {
        transform: translateX(-50%) translateY(0px);
    }
    100% {
        transform: translateX(-50%) translateY(30px);
    }
}

@keyframes drowns1 {
    0% {
        transform: translateX(-120px) translateY(0px);
    }
    100% {
        transform: translateX(-120px) translateY(30px);
    }
}

@keyframes drowns2 {
    0% {
        transform: translateX(35px) translateY(0px);
    }
    100% {
        transform: translateX(35px) translateY(30px);
    }
}

@keyframes drowns3 {
    0% {
        transform: translateX(70px) translateY(0px);
    }
    100% {
        transform: translateX(70px) translateY(30px);
    }
}

@keyframes drowns4 {
    0% {
        transform: translateX(112px) translateY(0px);
    }
    100% {
        transform: translateX(112px) translateY(30px);
    }
}

@keyframes drowns5 {
    0% {
        transform: translateX(170px) translateY(0px);
    }
    100% {
        transform: translateX(170px) translateY(30px);
    }
}

@keyframes drowns_r {
    0% {
        transform: translateX(72px) translateY(0px);
    }
    100% {
        transform: translateX(72px) translateY(30px);
    }
}

@keyframes flash {
    0% {
      background-color: #fff;
    }
    50% {
      background-color: #ff69b4;
    }
    100% {
      background-color: #fff;
    }
}

/* end of main page css */


/* start of header and nav bar css */
header {
    display: flex;
    align-items: center;
}

header img {
    height: 70px;
    width: auto;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav a {
    width: 9vw;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 37px;
    margin-left: 5px;
    color: black;
    text-decoration: none;
}

nav img {
    margin-top: 0px;
    margin-left: 20px;
}

/* To improve: it currently moves the other text on hover because the font is not the same size. */
nav a:hover {
    font-family: 'gunplay';
    font-weight: bold;
    /* color: #ff6213; */
    font-size: 20px;
}

/* the style for when the user is on the current page! */
nav a.active {
    font-family: 'gunplay';
    font-weight: bold;
    color: #ff6213;
    font-size: 20px;

}

.profile-header {
    margin-left: 490px;
}
/* end of header and nav bar css */


/* start of showing cards.  */
h1 {
    font-family: 'Rocher', sans-serif;
    text-align: center;
    font-size: 100px;
    margin-top: -25px;
    margin-bottom: -15px;
    color: #764838;
    text-shadow: 
        1.1px 1.1px 0px white,   
        -1.1px 1.1px 0px white,  
        1.1px -1.1px 0px white, 
        -1.1px -1.1px 0px white; 
}

.card-list-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    z-index: 1;
}

.card-list-item {
    flex-basis: 100px;
    margin: 20px;
    perspective: 1000px;  /* The perspective for my 3D effect */
}

.card-list-container img {
    width: 250px;
    height: auto;
    transition: transform 0.5s ease; 
    transform-origin: center; 
}

.card-list-container img:hover {
    /* I got this hover inspiration from: https://codepen.io/gayane-gasparyan/pen/wvxewXO */
    transform: perspective(1500px) translateY(-5%) rotateX(25deg) translateZ(0);
}

.heroes-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
    gap: 20px;
    z-index: 1;
}

.hero {
    display: flex;
    position: relative;
    width: 400px; /* set a fixed width for the hero container */
    margin: 20px;
}

.heroes-item {
    position: relative; 
}

.heroes-item img {
    width: 100%;
    height: auto; 
    opacity: 100%;
    transition: 0.5s ease; 
    transform-origin: center; 
}

.heroes-name {
    position: absolute;
    top: 0%; 
    width: 100%;
    text-align: center;
    line-height: 100px;
    font-weight: bold;
    font-size: 100px;
    opacity: 0%;
    transition: 1s ease;
}

.hero:hover .heroes-name {
    opacity: 100%;
    text-shadow: -2px 100px 17px grey;
    top: -35%;
}

.hero:hover .heroes-item img {
    opacity: 20%;
    /* I got this hover inspiration from: https://codepen.io/gayane-gasparyan/pen/wvxewXO */
    transform: perspective(1500px) translateY(-5%) rotateX(45deg) translateZ(0);
}
/* end of showing cards.  */


/* beginning of the one hero page */
.one-hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 20px;
    z-index: 1;
}


.one-hero-container img {
    width: 400px;
    height: auto; 
    opacity: 100%;
    border: 7px inset black;
}

.one-hero-card-title {
    font-palette: --Mint;
    font-size: 50px;
    text-shadow: none;
}
/* end of the one hero page */

/* start of search bar */
.search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
}

.search-form {
    display: flex;
    background-color: #fff;
    background-image: url('images/background47.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
    padding-left: 300px;
    padding-right: 400px;
}

.search-form h2 {
    margin-right: 100px;
    font-weight: normal;
}

.search-form input[type="text"] {
    flex-grow: 1;
    width: 300px;
    border: none;
    border-bottom: 1px solid black;
    font-size: 16px;
    padding: 5px;
    margin-left: 9px;
}

.search-table td, th {
    padding-bottom: 20px;
    text-align: left;
}

.search-form input[type="submit"] {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 5px 10px;
    margin-left: 2px;
    border-radius: 5px;
    cursor: pointer;
}

.search-form input[type="submit"]:hover {
    background-color: #0056b3;
}
/* end of search bar */



/* start of game page */
.game-status {
    text-align: center;
    transition: filter 1s ease;
}

.game-container {
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left: 250px;
    margin-right: 250px;
    gap: 20px;
    z-index: 1;
}

.hider-container, .seeker-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 350px;
    height: 650px;
    margin-top: -170px;
    gap: 20px;
}

.hider-image img, .seeker-image img {
    /* circle photo */
    border-radius: 50%;
    border: 4px solid black;
    width: 200px;
    height: 200px;
    opacity: 1;
    transition: filter 1s ease;
}

.hider-plays img, .seeker-plays img {
    width: 200px;
    height: auto;
    animation: moveDown 1s ease-in-out;
}

.hider-class-name, .seeker-class-name {
    font-family: 'rocher';
    font-size: 40px;
    font-palette: --Mint;
}

@keyframes scaleIn {
	0% {
		transform: scaleY(0);
		transform-origin: 100% 0%;
	}

	100% {
		transform: scaleY(1);
		transform-origin: 100% 0%;
	}
}

@keyframes moveDown {
    0% {
        transform: translateY(-100px);
        opacity: .5;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.hider-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.hider-buttons button {
    background-color: #00c8ff;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border: none;
    padding: 15px 30px;
    margin-left: 2px;
    border-radius: 50px;
    cursor: pointer;
    transition: 1s ease;
}

.hider-buttons button:hover {
    background-color: rgb(50, 53, 76);
}

.hide-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    margin-top: -600px;
    margin-right: 120px;
    transition: 1s ease;
}

#continue-btn {
    margin-top: 0px;
    text-decoration: none;
}
/* end of game page */


/* start of game over page */
.game-over-container {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    z-index: 1;
}

.game-over-result {
    font-size: 100px;
    font-weight: bold;
}
/* end of game over page */



/* start of show profile view */
.pie-chart {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    
}

.pie-chart-item {
    border: 10px solid #dd5341;
    margin-top: 50px;
    background-color: #dd5341;
    box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
}

.profile-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 150px;
    padding-right: 150px;
}

.profile-title {
    text-align: left;
    margin-left: 171px;
}

.profile-table {
    padding: 10px;
    padding-top: 30px;
    padding-bottom: 30px;
    min-width: 500px;

    /* I got the inspiration and some part of code of this rotating rainbow border from https://codepen.io/nocksock/pen/zYQVmwG */
    --border-angle: 0deg;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
    border: 0.5rem solid transparent;
    position: relative;
    background: url('images/background12.png') 70% 0% padding-box,
        conic-gradient(
            from var(--border-angle),
            oklch(100% 100% 0deg),
            oklch(100% 100% 45deg),
            oklch(100% 100% 90deg),
            oklch(100% 100% 135deg),
            oklch(100% 100% 180deg),
            oklch(100% 100% 225deg),
            oklch(100% 100% 270deg),
            oklch(100% 100% 315deg),
            oklch(100% 100% 360deg)
            )
            border-box; 
    background-blend-mode: hard-light;   
}

/* I got the inspiration and some part of code of this rotating rainbow border from https://codepen.io/nocksock/pen/zYQVmwG */
@keyframes border-angle-rotate {
    from { --border-angle: 0deg; }
    to { --border-angle: 360deg; }
}

/* I got the inspiration and some part of code of this rotating rainbow border from https://codepen.io/nocksock/pen/zYQVmwG */
@property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
  
.profile-table td {
    padding: 20px;
    
}

.table-fields {
    font-family: "DotGothic16", sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: .2em;
}

.favorite-card-container {
    padding: -50px;
    /* I got the inspiration and some part of code of this rotating rainbow border from https://codepen.io/nocksock/pen/zYQVmwG */
    --border-angle: 0deg;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
    animation: border-angle-rotate 2s infinite linear;
    transition: 2s ease;
    border: 0.5rem solid transparent;
    border-radius: 22px;
    position: relative;
    background: linear-gradient(white, white) padding-box,
      conic-gradient(
          from var(--border-angle),
          oklch(100% 100% 0deg),
          oklch(100% 100% 45deg),
          oklch(100% 100% 90deg),
          oklch(100% 100% 135deg),
          oklch(100% 100% 180deg),
          oklch(100% 100% 225deg),
          oklch(100% 100% 270deg),
          oklch(100% 100% 315deg),
          oklch(100% 100% 360deg)
        )
        border-box;
}

.favorite-card-container img {
    /* height: 400px;
    width: auto; */
    height: 350px;
    width: 250px;
}

.favorite-card-container:hover {
    box-shadow: 0px 2px 4px hsl(0 0% 0%);
    /* I got this hover inspiration from: https://codepen.io/gayane-gasparyan/pen/wvxewXO */
    transform: perspective(1500px) translateY(-5%) rotateX(25deg) translateZ(0);
}

.profile-cards {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.logout-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 50px;
    margin-top: 50px;
}

.update-profile-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-left: 150px;
    padding-right: 150px;
}

.click-button {   
    color: white;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    /* border: 3px solid black; */
    background-color: #f37d59;
    padding: 10px;
    transition: 1s ease;
    box-shadow: 0px 2px 4px hsl(0 0% 0%/ 50%);
}

.click-button:hover {
    background-color: #dd5341;
    box-shadow: 0px 2px 4px hsl(0 0% 0%);
}
/* end of show profile view */


/* start of leaderboard views */
.leaderboard-subtitle {
    font-weight: 900;
    font-size: 20px;
    letter-spacing: .2em;
    margin-left: 50vw;
}

.leaderboard-table-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-left: 150px;
    padding-right: 150px;
    margin-top: 50px;
}

.leaderboard-table {
    padding: 10px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 0px;
    width: 500px;
    border-collapse: separate;
    border-spacing: 50px 5px;

    /* I got the inspiration and some part of code of this rotating rainbow border from https://codepen.io/nocksock/pen/zYQVmwG */
    --border-angle: 0deg;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: left;
    box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
    border: 0.5rem solid transparent;
    position: relative;
    background: url('images/background12.png') 70% 0% padding-box,
        conic-gradient(
            from var(--border-angle),
            oklch(100% 100% 0deg),
            oklch(100% 100% 45deg),
            oklch(100% 100% 90deg),
            oklch(100% 100% 135deg),
            oklch(100% 100% 180deg),
            oklch(100% 100% 225deg),
            oklch(100% 100% 270deg),
            oklch(100% 100% 315deg),
            oklch(100% 100% 360deg)
            )
            border-box; 
    background-blend-mode: hard-light; 
}

.leaderboard-table td, th {
    padding: 20px;
}

.leaderboard-buttons-container {    
    display: flex;
    flex-direction: column;
    align-items: top;
    gap: 40px;
}
/* end of leaderboard views */


/* start of create game view */
.create-game-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding-left: 150px;
    padding-right: 150px;
    margin-top: 50px;

    /* I got the inspiration and some part of code of this rotating rainbow border from https://codepen.io/nocksock/pen/zYQVmwG */
    --border-angle: 0deg;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: left;
    box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
    /* animation: border-angle-rotate 2s infinite linear; */
    border: 0.5rem solid transparent;
    position: relative;
    background: url('images/background12.png') 70% 0% padding-box,
        conic-gradient(
            from var(--border-angle),
            oklch(100% 100% 0deg),
            oklch(100% 100% 45deg),
            oklch(100% 100% 90deg),
            oklch(100% 100% 135deg),
            oklch(100% 100% 180deg),
            oklch(100% 100% 225deg),
            oklch(100% 100% 270deg),
            oklch(100% 100% 315deg),
            oklch(100% 100% 360deg)
            )
            border-box; 
    background-blend-mode: hard-light; 
}

.how-to-play-title {
    font-family: 'gunplay';
    letter-spacing: .2em;
    font-size: 32px;
}

.how-to-play {
    /* background-color: white; */
    padding: 35px;
    padding-top: 10px;
    padding-bottom: 65px;
    
    /* I got the inspiration and some part of code of this rotating rainbow border from https://codepen.io/nocksock/pen/zYQVmwG */
    --border-angle: 0deg;
    border-radius: 12px;
    box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
    /* animation: border-angle-rotate 2s infinite linear; */
    /* border: 0.5rem solid transparent; */
    border: 10px solid #ffffff;
    position: relative;
    background: url('images/background12.png') 70% 0% padding-box,
        conic-gradient(
            from var(--border-angle),
            oklch(100% 100% 0deg),
            oklch(100% 100% 45deg),
            oklch(100% 100% 90deg),
            oklch(100% 100% 135deg),
            oklch(100% 100% 180deg),
            oklch(100% 100% 225deg),
            oklch(100% 100% 270deg),
            oklch(100% 100% 315deg),
            oklch(100% 100% 360deg)
            )
            border-box; 
    background-blend-mode: screen; 
    transition: 5s ease;
}

.how-to-play:hover {
    /* move to the right */
    transform: translateX(100px);
}

.create-game-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    margin-top: 20px;
}

.hider-text, .seeker-text {
    font-weight: bold;
    font-size: 20px;
    transition: 1.5s ease;
    cursor: pointer;
}

.hider-text:hover, .seeker-text:hover {

    text-shadow: 10px 2px 4px hsl(0 0% 0%/ 50%);
}

.number-text {
    font-family: 'rocher';
    font-size: 25px;
    transition: 1.5s ease;
    cursor: pointer;
}

.number-text:hover {
    font-palette: --Mint;
}

.button-p-text {
    border: 1px solid black;
    transition: 1.5s ease;
    cursor: pointer;
}

.button-p-text:hover {
    color: white;
    background-color: black;
}
/* end of create game view */


/* start of log out and log in view */
.logged-out-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 50px;
    margin-top: 50px;
    gap: 30px;
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 50px;
    margin-top: 50px;
    gap: 30px;
}
/* end of log out and log in view */

/* start of post card upload and delete view */

.post-card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin: 50px;
}

/* end of post card upload and delete view */

/* these are my different body backgrounds. */
.light-body {
    background-color: #faca78;
    background-image: url('images/background46.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: normal;
}

.pink-body {
    background-color: #faca78;
    background-image: url('images/background44.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: normal;
}

.pink-reverse-body {
    background-color: #62450f;
    background-image: url('images/background44_inverted.JPG');
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: normal;
    
}

.muddy-body {
    background-image: url('images/background32.png');
    background-size: cover;
}

.main-body {
    background-color: #faca78;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('images/background38.jpg');
    background-blend-mode: normal;
}

.blue-body {
    background-color: #faca78;
    background-image: url('images/background47.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: normal;
}
/* end of my different body backgrounds */