*,*::after,*::before{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
:root {
  --black: #0f0f0f;
  --white: #ffffff;
  --gray: #1a1a1a;
  --light-gray: #f5f5f5;
  --gold: #d4af37;
  --transprent:rgba(0, 0, 0, 0.598);
  --green:#1d9e75;
  --pupule:#7f77dd;
  --red:#e24b4a;
}
@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(200px);
    }
    50%{
        opacity: 0.5;
    }
    100%{
        opacity:1;
        transform: translateY(0px);
    }
}
@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateX(-100vw);
    }
    50%{
        opacity: 0.3;
        transform: translateX(0vw);  
    }

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

body{
    font-family: "Roboto","sans-serif";
    color:var(--white);
    background-color: var(--black);
    height:100vh;

}
main{
    display: flex;
    flex-direction: column;
   
}

h1,h2,h3,h4,h5,h6{
    font-family: "Poppins" ,"sans-serif";
}
img{
    width: 100px;
}
.nav-bar{
    width:100%;
    display: flex;
    flex-direction: row;
    padding:1rem;
    background-color:rgba(0,0,0);
    position: sticky;
    z-index: 1;
    top:0px;
    border-bottom-style:hidden; 
}
.nav-bar{
    display: flex;
    justify-content: space-between;
}
.nav-bar ul{
    display:flex;
    gap:2rem;
}
.nav-bar li{
    display: inline-block;
}
.nav-bar a{
    text-decoration: none;
    color:white;
}
.nav-bar a:hover{
    color:var(--light-gray);
}
a span{
    font-size: 1.2rem;
}
.small-intro{
    padding:1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:1rem;
    background-image: url(./images/number-8-svgrepo-com.svg);
    background-repeat: no-repeat;
    background-position:center;
    height:80vh;
    background-color: #202020;

}
.small-intro h1,p,a{
    font-weight: 400; 
}
.small-intro h1{
    font-size: 3rem;
    font-weight: bold;
}
.small-intro p{
    font-size: 1.4rem;
}
.learn-more{
    background-color: var(--black);
    width:fit-content;
    padding:1rem 1.2rem;
    border-radius: 1rem;
    cursor:pointer;
    font-size: 1.2rem;
    text-align: left;
    
    
    
}
.learn-more:hover{
    transition: background-color 0.5s ease;
    background-color: #202020;
   
}

.small-intro a{
    text-decoration: none;
    color:white;
    
}
.real-content{
    padding:3rem;
}

.about{
    display: grid;
    grid-template-areas:
    "about about about"
    "who who who"
    "early early traits"
    ;
    gap:2rem;
    animation: slide-up 2s  ease ;
    animation-timeline: view();
    animation-range:entry;
    
    

}
h2{
    padding-left: 0.4rem;
    font-size: 2rem;
}
.about h2{
    width:100%;
    grid-area: about;
    justify-self: start;

}

.about .Basic-info{
    grid-area: who;
    grid-template-columns: repeat(2,1fr);
    display: flex;
    flex-direction: row;
    gap:2rem;
    background-color:#202020;
    padding:1rem;
    border-radius: 1rem;
    justify-content:space-between;

}
.Basic-info div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: top;
    width:40%;
}
.Basic-info div h3{
    font-size: 2rem;
    margin-bottom: 2rem;
    text-decoration-line:underline;
}

.Basic-info div p{
    line-height: 1.6;
    font-weight: 500;
}
.Basic-info img{
    min-width:400px;
    border-radius: 2rem;
    justify-self: end;
    align-self: center;
    
}
.Basic-info strong{
    background-color: #d4af37;
    color:black;
}

.persnoal-traits{

    grid-area:traits;
    background-color:#202020;
    display: flex;
    flex-direction: column;
    padding:2rem;
    border-radius: 1rem;
    gap:1rem;

}
.persnoal-traits h3{
     text-decoration-line:underline;
}
.persnoal-traits p{

    grid-area: text;
    line-height: 1.6;
}
.persnoal-traits .images{
    grid-area: image;
    display: flex;
    gap:2rem;
    justify-content:space-evenly;
    margin-top: 1rem;
    flex:1 0 0;

}
.images svg{
    width:50px;
}
.images svg:hover path{
    fill:black;
}
.images div{
    text-align: center;
}
.images +p {
    background-color: black;
    border-radius: 1rem;
    padding:10px;
}
.images +p span{
    font-weight: bold;
    align-self: bottom;
}
.images +p q{
    font-style: italic;
}


.early-life{
    grid-area:early ;
    background-color:#202020;
    border-radius: 1rem;
    display:grid;
    grid-template-areas:
    "text text image"
    "text text image";
    padding:2rem;
    gap:2rem;

}
.early-life div {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap:2rem;
    width:80%;
}
.early-life h3{
    text-decoration-line:underline;
}
.early-life div p{
    line-height: 1.7;
}
.early-life img{
   align-self:top;
   width:350px;
   border-radius: 2rem;

}
.career > h2{
    margin-top:1rem;
}
.career {
    display: flex;
    flex-direction: column;
    gap:2rem;
    animation: slide-in 2s ease-in-out ;
    animation-timeline: view();
    animation-range:entry;
}
.career h2 + h3{
    text-align: center;
}
.timeline{
    display:grid;
    grid-template-columns: repeat(2,1fr);

    gap:2rem;
}

.ph1,.ph2,.ph4,.ph3{
    display: flex;
    flex-direction: column;
    gap:0.4rem;
    line-height: 1.6;
    background-color: #202020;
    padding:2rem;
    border-radius: 1rem;
    color:rgba(255, 255, 255, 0.624);
}
.ph1 h3,.ph2 h3,.ph4 h3,.ph3 h3{
    color:white;
}
.ph1 span,.ph2 span,.ph4 span,.ph3 span{
    color:white;
}
.ph1 time,.ph2 time,.ph4 time,.ph3 time{
    color:white;
}
.timeline .button{
    padding:5px 10px;
    width:fit-content;
    border-radius:10px ;
}

.ph1 .button ,.ph1 h4{
    color:var(--green);
}
.ph1 .button{
    background-color: #d2eee6;
}
.ph1{
    border-left: 4px solid var(--green);
    
}
.ph1 li::marker{
    color:var(--green);
}

.ph2 .button ,.ph2 h4{
    color:var(--pupule);
}
.ph2 .button{
    background-color: #d6d2fa;
}
.ph2{
    border-left: 4px solid var(--pupule);
    
}
.ph2 li::marker{
    color:var(--pupule);
}


.ph3 .button ,.ph3 h4{
    color:var(--gold);
}
.ph3 .button{
    background-color: #ffffff;
}
.ph3{
    border-left: 4px solid var(--gold);
    
}
.ph3 li::marker{
    color:var(--gold);
}

.ph4 .button ,.ph4 h4{
    color:var(--red);
}
.ph4 .button{
    background-color: #e0c3c3;
}
.ph4{

    border-left: 4px solid var(--red);

}

.ph4 li::marker{
    color:var(--red);
}
.playstyle svg{
    width:60px;
}

.playstyle {
    display: flex;
    justify-content: space-between;
    gap:2rem;
    animation: slide-up 2s ease-in-out ;
    animation-timeline: view();
    animation-range:entry;
}
.playstyle div{
    gap:1rem;
    background-color: #202020;
    border-radius: 1rem;
    padding:1rem 1.2rem;
    
}

.box1,.box2,.box3,.box4,.box5{
    border: 2px solid rgba(255,255,255,0.08);
}
.playstyle h3{
    margin-bottom:10px;
    
}
.playstyle span{
    padding:3px;
    border-radius: 10px;

}
.box3 ,.box1,.box2,.box4,.box5{
    display: flex;
    flex-direction: column;
    align-items: center;

}

.box3 svg path{
    fill:#60a5fa;
}

.box3 span{
    background-color:#60a5fa ;
    color:black;
    margin-right:2px;
}
.box3 p ,.box1 p ,.box2 p ,.box4 p , .box5 p{
    line-height: 1.6;
}

.box1 span{
    background-color:#f97316 ;
    color:black;
    margin-right:2px;
    margin:3px;
}
.box2 span{
    background-color:#facc15;
    color:black;
    margin-right:2px;
    margin:3px;
}
.box4 span{
    background-color:#ef4444 ;
    color:black;
    margin:3px;
}
.box5 span{
    background-color:#22c55e;
    color:black;
    margin-right:2px;
    margin:3px;
}
.box6{
    display:none;
}
@media (min-width:1100px) and (max-width:1400px) {
    .playstyle {
    display: grid;
    grid-template-areas:
    "box1 box2 box3"
    "box4 box6 box5";
    gap:1rem;

}
.box5{
    grid-area: box5;
}
.box6{
    display:flex;
    justify-content: center;
    align-items: center;

}
.box6 q{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
}
.box6 h3 span{
    text-decoration: underline;
}


}
/*Do not Touch this*/

.Trophies{
    display: flex;
    flex-direction: column;
    gap:1rem;
    animation: slide-up 2s  ease ;
    animation-timeline: view();
    animation-range:entry;
    
}
.Trophies > h2{
    margin-top:1rem;
}
.Trophies .Dum{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1a1a1a;
    border-radius: 1rem;
    padding:2rem;
}
.Dum h3 span{
    font-size: 2.3rem;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-radius: 10px;
    margin-left:10px;
    vertical-align: middle;
}
.gl{
    margin: 2rem 0rem;

}
.Gallery-main{
    animation: slide-in 2s ease-in-out ;
    animation-timeline: view();
    animation-range:entry;
}
.Gallery{
    display:grid;
    grid-template-areas: 
    "fl gr"
    "fl gr";
    gap:2rem;
    justify-content: center;

}
.Gallery img{
    width:400px;
    border-radius: 1rem;
}
.fl{
    grid-area: fl;
    display:flex;
    gap:2rem;
    flex-direction: column;
}
.grd{

    display:grid;
    grid-template-columns: repeat(1,1fr);
    gap:2rem;
}
.learn-more-small{
        display: none;
}