/* GLOBAL*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --primary-txt: #f8f8f8;
    --primary-bg: #333;
    --secondary-bg: #1f18188e;
    --third-bg: #000;
    --danger-bg: rgba(245, 57, 57);
    --success-bg: rgba(27, 221, 27, 0.842);
    --link-txt : rgb(15, 89, 250); 
    
}


html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--link-txt);
}

body {
    background-color: var(--third-bg);
    color: var(--primary-txt);
}

header, footer, nav, .header {
    display: flex;
    gap: 10px;
    min-height: 10vh;
    padding: 10px;

}

header, nav{
    justify-content: space-around;
    justify-items:center;

}

header, footer {
    background-color: var(--primary-bg);
}

header {
    margin-bottom: 20px;
}

.anchor {
    text-transform: uppercase;
}


.logo .img img {
    border-color: var(--third-bg);
    width: 100px;
}

.logo, nav {
    padding: 20px;
    width: 50%;
}
.header {
    width: 75%;
    margin: 0 auto;
}


footer {
    justify-content: center;
    padding-top: 20px;
}
.fa-linkedin {
    font-size: 1.5rem;
}

.container {
    min-height: 100vh;
    padding: 10px;
    background-color: var(--primary-bg);

}
main {
    padding: 20px;
}


.statement, .exhibition, .result {
    background-color: var(--secondary-bg);
}

.container, .statement, .exhibition, .result, ol {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 90%;
    margin: 0 auto;
    max-width: 1400px;
    padding: 30px;
    border-radius: 10px;
}

.result {
    min-height: 30vh;
    gap :50px;
}
.result p {
    margin: 0 auto;
}
.redirection {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.img {
    display: flex;
    justify-content: center;
}
.img img {
    border-radius: 50%;
    border: 5px solid rgb(253, 253, 0);
 }


h1, h2 {
    text-align: center;
}

h1::first-letter,
h2::first-letter,
h2 span {
    text-transform: capitalize;
}

.container p{
    text-align: justify;
}
.exhibition {
    min-height: 80vh;
    /* background-color: darkgreen; */
}

.pre {
    padding: 20px;
    background-color: var(--third-bg);
    border-radius: 10px;
}

section {
    min-height: 10vh;
}

#story section:first-child {
    min-height: 5vh;
}


@media screen and (max-width: 500px) {
    .code {
        font-size: .5rem;
        box-sizing: border-box;
        word-wrap: break-word;
        padding-inline: 20px;
    }
    .pre {
        padding: 20px 5px;
    }
    #discount {
        font-size: .8rem;
    }

    .header {
        flex-direction: column;
        align-items: center;
    }
    .string-link {
        word-wrap: break-word;
    }
    
    .container, .statement, .exhibition, .result, ol {
        padding: 30px 10px;
    }
    
}