*{
margin:0;
padding:0;
box-sizing:border-box;
}

/*
body{

background:#05070a;
color:white;
font-family:Arial;

overflow-x:hidden;

}
*/

#bg{

position:fixed;
left:0;
top:0;

width:100%;
height:100%;

z-index:-2;
opacity: 0.6;
}

#overlay{

position:fixed;

width:100%;
height:100%;

background:
radial-gradient(circle at center,
transparent,
rgba(0,0,0,.6));

pointer-events:none;

z-index:-1;

}


/*
section{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

padding:10vw;

}
*/


.center{

text-align:center;

}

#terminal{

font-family:monospace;

color:#39bdf8;

opacity:.7;

margin-bottom:50px;

line-height:1.8;

}

h1{

font-size:7vw;

font-weight:900;

}

h2{

font-size:4vw;

color:#4fc3ff;

}

h3{

font-size:2vw;

font-weight:300;

margin-top:20px;

}

.scroll{

margin-top:100px;

font-size:30px;

animation:blink 2s infinite;

}

@keyframes blink{

50%{
opacity:.2;
}

}

.huge{

font-size:5vw;

max-width:900px;

}

.small{

margin-top:60px;

font-size:2vw;

color:#999;

}

#skills{

position:relative;

overflow:hidden;

}

.floating{

position:absolute;

padding:15px 25px;

border:1px solid rgba(255,255,255,.2);

backdrop-filter:blur(20px);

background:rgba(255,255,255,.03);

transition:.5s;

}

.floating:hover{

transform:scale(1.2);

background:#1d4ed8;

}

.kotlin{

top:10%;
left:15%;

}

.regex{

top:30%;
right:20%;

}

.android{

top:50%;
left:10%;

}

.ai{

top:20%;
left:60%;

}

.php{

top:65%;
right:10%;

}

.dtp{

top:75%;
left:40%;

}

.sqlite{

top:45%;
left:70%;

}

.translate{

top:80%;
right:35%;

}

#timeline{

flex-direction:row;

gap:40px;

font-size:4vw;

}

.line{

width:120px;

height:2px;

background:#39bdf8;

}

#quote{

font-size:4vw;

text-align:center;

line-height:1.6;

}

.logo{

font-size:8vw;

font-weight:900;

letter-spacing:15px;

margin-bottom:60px;

}

@media(max-width:900px){



#timeline{

flex-direction:column;

}

.line{

width:2px;
height:50px;

}

.floating{

position:relative;

margin:20px;

left:auto;
top:auto;
right:auto;

}

#skills{

display:flex;
flex-wrap:wrap;

}

h1{

font-size:15vw;

}

h2{

font-size:8vw;

}

h3{

font-size:5vw;

}

.huge{

font-size:9vw;

}

.small{

font-size:5vw;

}

}