@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cherry+Cream+Soda&display=swap');

:root {
    --dark-bg: #111;
    --darker-bg: #070707;
}

* {
    font-family: Russo One;
}

body {
    margin: 0; padding: 0;
    background-color: var(--dark-bg);
    overflow: hidden;
}

#main-container {
    display: flex;
    flex-direction: row;
    height: 100%; width: 100%;
}

#page-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sidebar {
    width: 13.7%; height: 100vh;
    color: #fff;
    position: relative;
    top: 0; left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: var(--darker-bg);
    padding: 20px;
}

#sidebar::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 3px; height: 100%;
    background-color: white;
    box-shadow: -5px 0px 30px white;
    opacity: 1;
}

#sidebar > a {
    display: flex;
    width: 125%;
    font-size: 3vw;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: -100px;
}

#sidebar > a > img {
    width: 1em; 
    height: auto;
}

#sidebar ul {
    list-style: none;
    padding: 0;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

#sidebar ul li {
    margin: 0;
}

#sidebar ul li a {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 1.25vw;
    position: relative;
    transition: color 0.3s;
}

#sidebar ul li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: white;
    transition: width 1s;
    box-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #5865f2, 0 0 40px #5865f2;
    border-radius: 2px;
    opacity: 0.8;
}

#sidebar ul li a:hover::after {
    width: 100%;
}

#side-icons {
    position: absolute;
    top: 66.7%; left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 40%;
    justify-content: center;
    align-items: center;
}

#side-icons > #icon {
    position: relative;
    display: inline-block;
}

#side-icons > #icon > img {
    width: 2vw; height: auto;
    filter: brightness(0) invert(1);
}

#side-icons > #icon::after {
    content: '';
    position: absolute;
    bottom: -8px; left: 0;
    width: 0; height: 2px;
    background-color: white;
    transition: width 0.5s;
    box-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #5865f2, 0 0 40px #5865f2;
    border-radius: 2px;
    opacity: 0.8;
}

#side-icons > #icon:hover::after {
    width: 100%;
}

#a_hyperlink {
    color: #a9b0ff;
    text-decoration: none;
}

#side-footer {
    position: relative;
    top: -10px;
    font-size: 1.34vw;
}

/* INDEX.HTML */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */

#bio-card, #contact-card, #services-card {
    background-color: var(--darker-bg);
    width: 80%; height: 80%;
    border: 3px solid white;
    border-radius: 25px;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

#contains {
    width: 100%; height: 40%;
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: space-evenly;
}

#bio-image {
    margin-top: 30px;
    width: 12vw; height: 12vw;
    border-radius: 50%;
    position: relative;
    border: 3px solid white;
}

#bio-title {
    margin-top: 90px;
    color: white;
    font-size: 3vw;
    white-space: nowrap;
}

#bio-desc {
    display: flex;
    position: relative;
    color: white;
    font-size: 1vw;
    max-width: 100%;
}

#notice {
    border: 0.3vw solid white;
    border-radius: 15px;
    width: 100%; height: 20%;
}

#notice-message, #notice-author {
    color: white;
    margin-left: 15px;
    font-size: 0.85vw;
    transition: display 1s, opacity 1s;
}

#buttons {
    margin-top: 2em;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

#buttons > a > button {
    width: 11vw; height: 8vh;
    background-color: transparent;
    cursor: pointer;
    border: 3px solid white;
    border-radius: 8px;
    color: white;
    font-size: 1vw;
    transition: border-color 1s;
    margin-right: 25px;
}

#buttons button:hover {
    border-color: #04fde2;
}

/* SERVICES.HTML */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */

#serv-container {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 15px;
    gap: 5%;
}

.serv-contain {
    position: relative;
    left: 0;
    height: 28%; width: 28%;
    background-size: cover;
    border-radius: 8px;
    border: 3px solid white;
}

#serv-contain1 {
    background-image: url(I/coach1.png);
}

#serv-contain2 {
    background-image: url(I/coach2.png);
}

#serv-contain3 {
    background-image: url(I/coach3.png);
}

.serv-contain-desc {
    width: 100%; height: 100%;
    color: white;
    z-index: 2;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

.extend-contain {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    top: -3px; left: -3px;
    border-radius: 8px;
    border: 3px solid white;
    height: 100%; width: 100%;
    transition: left 1s ease-in-out, width 1s ease-in-out;
    overflow: hidden;
}

.serv-title {
    position: relative;
    font-size: 1.1vw;
    bottom: -65%;
    text-align: center;
    /* white-space: nowrap; */
    transition: left 1s ease-in-out, padding-left 1s ease-in-out;
}

.serv-desc {
    font-size: 1.1vw;
    opacity: 0;
    color: #ddd;
    transition: opacity 1s 1s ease-in-out;
    padding-left: 15px; padding-right: 10px;
}

.serv-button {
    position: relative;
    left: 50%;
    transform: translate(-50%, -35%);
    color: white;
    background-color: transparent;
    border-radius: 15px;
    width: 23vw; height: 6vh;
    border: 3px solid white;
    opacity: 0;
    font-size: 1.1vw;
    visibility: hidden;
    transition: opacity 1s 1s ease-in-out, border-color 1s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.serv-button:hover {
    border-color: #04fde2;
}

.serv-contain-desc:hover > .extend-contain {
    left: 115%;
    width: 230%;
}

.serv-contain-desc:hover .serv-desc {
    opacity: 1;
    transition: opacity 1s;
}

.serv-contain-desc:hover .serv-button {
    opacity: 1; visibility: visible;
    transition: opacity 1s, visibility 1s;
}

.serv-contain-desc:not(:hover) > .extend-contain {
    left: -3px;
    width: 100%;
    transition: left 1s, width 1s;
}

.serv-contain-desc:not(:hover) .serv-desc {
    opacity: 0;
    transition: opacity 1s;
}

.serv-contain-desc:not(:hover) .serv-button {
    opacity: 0; visibility: hidden;
    
}

/* CONTACT.HTML */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */


#contact-card {
    flex-direction: row;
}

#required {
    color: #04fde2
}

.point {
    color: white;
}

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

.req {
    color: red;
    font-size: 1vw;
    visibility: hidden;
    height: 18px;
}

.req.show {
    visibility: visible;
}

#mini-footer {
    width: 100%;
    color: #BBBBBB;
    white-space: nowrap;
}

.label {
    color: white;
    font-size: 16px;
    white-space: nowrap;
}

.text-input, .text-input:hover {
    color: white;
    background-color: transparent;
    border: 3px solid white;
    border-radius: 8px;
    transition: border 1s;
}

.text-input:focus {
    outline: none;
    border: 3px solid #04fde2;
}

#vertical-separator {
    background-color: white;
    border-radius: 15px;
    width: 5px; height: 100%;
    margin: 0 30px;
}

.column {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#column1 {
    display: flex;
}

.input-container {
    display: flex;
    flex-direction: column;
    width: 90%;
}

#user-input, #email-input {
    height: 5vh;
    padding-left: 10px;
}

.input-container input:invalid {
    border-color: red;
}

#message > textarea {
    height: 20vh; width: 100%;
    resize: none;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    overflow-y: hidden;
}

#check-boxes {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 1vh;
}

input[type=checkbox] {
    display: none;
}

.title-label {
    font-size: 1vw;
}

.label {
    display: inline-flex;
    align-items: center;
}

.label .checkmark {
    width: 1.25vw; height: 1.25vw;
    border: 2px solid white;
    border-radius: 4px; 
    margin-right: 8px;
    position: relative;
    background-color: transparent;
    transition: border-color 1s, background-color 1s;
}

.checkbox-label {
    cursor: pointer;
    font-size: 1vw;
}

.label input[type="checkbox"]:checked + .checkmark {
    border-color: #04fde2;
    background-color: #04fde2;
}

.label input[type="checkbox"]:checked + .checkmark::after {
    opacity: 1;
}

.checked {
    color: #04fde2;
}


.info {
    color: #fff;
}

#column2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#title-info {
    text-align: center;
    color: white;
    font-size: 2vw;
}

#informations {
    display: flex;
    flex-direction: column;
    gap: 2%;
    font-size: 1.1vw;
}

#column2 button {
    cursor: pointer;
    width: 100%; height: 7vh;
    border-radius: 12px;
    border: 3px solid white;
    color: white;
    background-color: transparent;
    transition: border-color 1s;
}

#column2 button:hover {
    border-color: #04fde2;
}

/* Responsive */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */
/* #00FF00 */

@media screen and (max-width: 1024px) {
    #bio-card, #services-card, #contact-card {
        height: 70%;
    }

    #bio-title {
        margin-top: 80px;
    }

    #buttons > a > button {
        width: 12vw; height: 7vh;
    }

    /*  */

    #column1 {
        gap: 2.5vh;
    }

    .title-label {
        font-size: 1.3vw;
    }

    #check-boxes {
        margin-top: -5px;
    }
}

@media screen and (max-width: 768px) {
    #bio-card, #services-card, #contact-card {
        height: 60%;
    }

    #bio-title {
        margin-top: 70px;
    }

    #buttons > a > button {
        height: 6vw;
        width: 17vw;
        font-size: 1.65vw;
    }

    /*  */

    #bio-desc {
        font-size: 1.3vw;
    }

    #notice-message, #notice-author {
        font-size: 1vw;
    }

    /*  */

    .serv-button {
        width: 32vw; height: 4.5vh;
        border-width: 2px;
    }

    /*  */

    .title-label {
        font-size: 1.vw;
    }

    .text-input {
        font-size: 1.3vw;
    }

    #title-info {
        font-size: 3vw;
    }

    #informations {
        font-size: 1.3vw;
    }
}

@media screen and (max-width: 426px) {
    #main-container {
        flex-direction: column;
    }

    #page-content {
        width: 100%;
        height: calc(695px - 8%);
    }

    #sidebar {
        width: 100%; height: 8%;
    }

    #sidebar > a {
        font-size: 6vw;
        justify-content: unset;
        margin-left: 21%;
        gap: 3%;
        position: relative;
        top: 25%;
        transform: translateY(-50%);
    }

    #sidebar ul {
        list-style: none;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        left: 16%; top: 106%;
        gap: 20px;
    }

    #sidebar ul li a {
        font-size: 2vw;
    }

    #side-icons {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        gap: 14%;
        top: 135%; left: 66%;
    }

    #side-icons > #icon > img {
        width: 3vw;
    }

    #side-footer {
        position: relative;
        font-size: 2.5vw;
        top: 25%; left: -39%;
    }
    
    /*  */

    #bio-image {
        width: 17.5vw; height: 17.5vw;
    }

    #bio-title {
        font-size: 3.7vw;
        margin-left: 20px;
        margin-top: 63px;
    }

    #bio-desc {
        font-size: 1.8vw;
    }

    #notice {
        border-width: 2px;
    }

    #notice-message, #notice-author {
        font-size: 2vw;
        margin-left: 10px;
        margin-right: 10px;
    }

    #buttons {
        display: flex;
        justify-content: space-evenly;
    }

    #buttons > a {
        width: 34%;
    }

    #buttons > a > button {
        height: 7vw; width: 27vw;
        border-width: 2px;
    }

    /*  */

    .serv-title {
        font-size: 2.3vw;
    }

    .serv-desc {
        font-size: 2.5vw;
    }

    .serv-button {
        width: 60vw;
        font-size: 2.5vw;
    }

    #serv-container {
        flex-direction: row;
        margin-left: -14px;
    }

    .extend-contain {
        transition: left 1s ease-in-out, top 1s ease-in-out, width 1s ease-in-out;
    }

    .serv-contain-desc:hover > .extend-contain {
        position: absolute;
        left: -3px;
        height: 130%;
    }

    .serv1:hover > .extend-contain {
        top: 180%;
        width: 350%;
    }

    .serv2:hover > .extend-contain {
        left: -125%; top: 180%;
        width: 350%;
    }

    .serv3:hover > .extend-contain {
        left: -250%; top: 180%;
        width: 350%;
    }

    .serv1:not(:hover) > .extend-contain {
        left: -3px;
        top: 0;
        width: 100%;
        transition: top 1s, width 1s;
    }

    .serv2:not(:hover) > .extend-contain {
        left: -3px;
        top: 0;
        width: 100%;
        transition: left 1s, top 1s, width 1s;
    }

    .serv3:not(:hover) > .extend-contain {
        left: -3px;
        top: 0;
        width: 100%;
        transition: left 1s, top 1s, width 1s;
    }

    /*  */

    #column1 {
        position: relative;
        top: -20px;
        width: 120%;
    }

    .title-label {
        font-size: 2vw;
    }

    #user-input, #email-input {
        height: 4vh;
    }

    #check-boxes {
        flex-direction: column;
    }

    .checkbox-label {
        font-size: 1.5vw;
        margin-bottom: 5px;
    }

    #title-info {
        font-size: 3.5vw;
    }

    #informations {
        font-size: 2vw;
    }

    #column2 > button {
        height: 5vh;
    }

    #send-demand {
        font-size: 2.2vw;
    }
}

@media screen and (max-width: 376px) {
    #side-footer {
        top: 15%;
    }

    #side-icons {
        width: 90%;
        left: 64%;
    }

    /*  */

    #bio-title {
        margin-top: 58px;
    }

    #bio-desc {
        margin-top: -10px;
        margin-bottom: 20px;
    }

    /*  */

    .serv-desc {
        font-size: 3vw;
    }

    .serv-button {
        font-size: 3vw;
    }

    /*  */

    .title-label {
        font-size: 2.2vw;
    }

    #informations {
        font-size: 2.1vw;
    }
}

@media screen and (max-width: 321px) {
    #sidebar > a {
        font-size: 4.5vw;
    }

    #side-footer {
        top: -5%; left: -41%;
    }

    /*  */

    #bio-desc {
        margin-top: -20px;
        font-size: 2.2vw;
    }

    /*  */

    .checkbox-label {
        font-size: 1.8vw;
        margin-bottom: 10px;
    }

    #informations {
        font-size: 2.3vw;
    }
}