*{
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	scroll-behavior:smooth;
	user-select:none;
}

:root{
	--bgcolor:white;/*black*/
	--txtcolor:black;/*white*/
	--modecolor:yellow;/*black*/
}

::-webkit-scrollbar{display:none;}

@font-face{
	font-family:portf1;
	src:url("fonts/NetflixSans_W_Blk.woff2");
}
@font-face{
	font-family:portf2;
	src:url("fonts/NetflixSans_W_Bd.woff2");
}
@font-face{
	font-family:portf3;
	src:url("fonts/NetflixSans_W_Md.woff2");
}
@font-face{
	font-family:portf4;
	src:url("fonts/NetflixSans_W_Rg.woff2");
}

#scrollbar{width:100%;height:4px;border:none;background-color:var(--txtcolor);position:fixed;top:0px;left:0px;z-index:3;animation:grow linear;animation-timeline:scroll(y);}
@keyframes grow{
	from{width:0%;}
	to{width:100%;}
}

body,html{width:100%;height:100%;background-color:var(--bgcolor);}
#header{border:none;width:100%;height:60px;position:fixed;top:0px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;font-family:portf4;z-index:2;background-color:var(--bgcolor);}
#header li{list-style-type:none;}
#header > div:first-child{border:none;min-width:100px;height:50px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-left:20px;color:var(--txtcolor);}
#header > div:first-child > img{border-radius:50%;width:40px;}
#header > div:first-child > li{margin-left:20px;font-size:120%;user-select:none;pointer-events:none;}
#header > div:nth-child(2){border:none;min-width:100px;height:50px;display:none;flex-direction:row;align-items:center;justify-content:space-between;gap:25px;color:var(--txtcolor);user-select:none;position:absolute;left:50%;transform:translateX(-50%);}
#header > div:nth-child(2) > li{font-size:120%;position:relative;cursor:pointer;}
#header > div:nth-child(2) > li::before{position:absolute;content:"";width:0%;height:2px;bottom:-3px;background-color:var(--txtcolor);transition:0.4s;right:0px;border-radius:5px;box-shadow:0px 2px 6px var(--txtcolor);}
#header > div:nth-child(2) > li:hover::before{width:100%;transition:0.2s;left:0px;}
#header > div:nth-child(3){border:2px solid var(--txtcolor);min-width:50px;height:23px;margin-right:20px;color:var(--txtcolor);position:relative;border-radius:15px;background-color:var(--bgcolor);user-select:none;display:none;}
#header > div:nth-child(3) > div{border:2px solid var(--bgcolor);border-radius:100%;position:absolute;padding:2px;top:50%;transform:translateY(-50%);transition:0.1s ease-out;left:-2px;background-color:var(--txtcolor);display:flex;align-items:center;justify-content:center;z-index:2;}
#header > div:nth-child(3) > div > span{color:var(--modecolor);pointer-events:none;}
#header > div:nth-child(4){display:flex;flex-direction:row;align-items:center;justify-content:center;width:30px;min-height:30px;margin-right:20px;border:none;}
#header > div:nth-child(4) > span{color:var(--txtcolor);border:none;transform:scale(1.2,1.2);pointer-events:none;}

#left_bar{border:none;position:fixed;right:-300px;min-height:100%;width:min(60%,270px);background-color:var(--bgcolor);z-index:10;box-shadow:0px 0px 8px var(--txtcolor);transition:0.2s;}
#left_bar #top{border:none;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:60px;padding:0px 20px;margin-top:0px;}
#left_bar #top > div:nth-child(1){border:2px solid var(--txtcolor);min-width:50px;height:23px;margin-right:0px;color:var(--txtcolor);position:relative;border-radius:15px;background-color:var(--bgcolor);user-select:none;}
#left_bar #top > div:nth-child(1) > div{border:2px solid var(--bgcolor);border-radius:100%;position:absolute;padding:2px;top:50%;transform:translateY(-50%);transition:0.1s ease-out;left:-2px;background-color:var(--txtcolor);display:flex;align-items:center;justify-content:center;z-index:2;}
#left_bar #top > div:nth-child(1) > div > span{color:var(--modecolor);pointer-events:none;}
#left_bar #top > div:nth-child(2){display:flex;align-items:center;justify-content:center;}
#left_bar #top > div:nth-child(2) > span{color:var(--txtcolor);pointer-events:none;transform:scale(1.2,1.2);}
#left_bar > div:nth-child(n+1){display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;border:none;width:100%;min-height:0px;margin-top:20px;}	
#left_bar > div:nth-child(n+1) > li{list-style-type:none;font-size:120%;color:var(--txtcolor);font-family:portf4;}

#upside{border:none;width:40px;height:40px;background-color:var(--txtcolor);color:var(--bgcolor);border-radius:7px;display:none;align-items:center;justify-content:center;position:fixed;right:20px;bottom:10px;z-index:50;}
#upside > span{pointer-events:none;user-select:none;}

.pdivs{width:100%;background-color:;min-height:100%;overflow-x:hidden;}
hr{border:none;width:70%;height:3px;background-color:#343434;margin:auto;border-radius:50%;}

/*
#home{border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:70px 10px;user-select:none;}
#home > h1{color:var(--txtcolor);font-size:240%;font-family:portf4;text-align:left;}
#home > p{color:var(--txtcolor);font-size:130%;font-family:portf4;margin-top:10px;text-align:left;}
#home > button{color:var(--txtcolor);background-color:var(--bgcolor);border:2px solid var(--txtcolor);font-size:160%;font-family:portf4;border-radius:10px;padding:7px 17px;margin-top:15px;outline:none;transition:0.2s;cursor:pointer;}
#home > button:hover{color:var(--bgcolor);background-color:var(--txtcolor);border:2px solid var(--bgcolor);}
*/
#home{border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:50px 20px;user-select:none;background-attachment:fixed;}
#home > #container{borde:1px solid var(--txtcolor);width:100%;min-height:0px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px;}
#home > #container > h1{color:var(--txtcolor);font-size:200%;font-family:portf4;position:relative;}
#home > #container > h1:first-child{font-size:200%;}
#home > #container >p{color:var(--txtcolor);font-size:125%;font-family:portf4;margin-top:15px;text-align:left;}
#home > #container >p:nth-child(3){font-size:125%;}
#home > #container >button{color:var(--txtcolor);background-color:var(--bgcolor);border:2px solid var(--txtcolor);font-size:170%;font-family:portf4;border-radius:10px;padding:7px 17px;margin-top:25px;outline:none;transition:0.2s;cursor:pointer;}
#home > #container >button:hover{color:var(--bgcolor);background-color:var(--txtcolor);border:2px solid var(--bgcolor);}
#home #nameintro::after{position:absolute;content:"";background-color:var(--bgcolor);right:-10px;top:5px;bottom:5px;width:3px;display:block;animation:blink 1.5s linear 0s 2 normal;}
@keyframes blink{
	0%{background-color:var(--bgcolor);}
	50%{background-color:var(--txtcolor);}
	100%{background-color:var(--bgcolor);}
}

#about{border:none;padding:50px 20px;min-height:300px;}
#about > h1{color:blue;text-align:left;font-size:250%;font-family:portf4;}
#about > p{color:var(--txtcolor);font-size:120%;margin-top:20px;text-align:left;line-height:1.5;font-family:portf4;/*animation:opa-in linear forwards;animation-timeline:view();animation-range:entry;*/}
/*@keyframes opa-in{
	from{opacity:0;}
	to{opacity:1;}

}*/

#skills{border:none;padding:50px 20px;min-height:200px;}
#skills > h1{color:blue;text-align:left;font-size:240%;font-family:portf4;}
#skills #skdiv{border:none;margin:auto;margin-top:25px;width:100%;min-height:100px;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;gap:15px;}
#skills #skdiv > li{border:1px solid var(--txtcolor);list-style-type:none;font-size:110%;color:var(--txtcolor);background-color:var(--bgcolor);transition:0.2s;min-width:80px;padding:4px 4px;border-radius:7px;text-align:center;cursor:default;user-select:none;font-family:portf4;}
#skills #skdiv > li:hover{background-color:var(--txtcolor);color:var(--bgcolor);border:1px solid var(--bgcolor);}

#projects{border:none;padding:50px 20px;min-height:400px;}
#projects > h1{color:blue;text-align:left;font-size:240%;font-family:portf4;}
#projects #prodiv{border:none;width:100%;min-height:260px;margin-top:25px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;overflow:hidden;}
#projects #prodiv > div{border:none;width:100%;min-height:245px;overflow:hidden;position:relative;}
#projects #prodiv > div > #left,#projects #prodiv > div > #right{position:absolute;top:50%;transform:translateY(-50%);width:auto;height:auto;padding:8px 8px;background-color:var(--txtcolor);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;}
#projects #prodiv > div > #left{left:0px;display:none;}
#projects #prodiv > div > #left > span{pointer-events:none;transform:scale(1.7,1.7);color:var(--bgcolor);}
#projects #prodiv > div > #right{right:0px;}
#projects #prodiv > div > #right > span{pointer-events:none;transform:scale(1.7,1.7);color:var(--bgcolor);}
/*#projects #prodiv > div::-webkit-scrollbar{width:10px;}*/
#projects #prodiv > div > #inner{border:none;width:100%;min-height:245px;overflow-y:hidden;overflow-x:auto;}
#projects #prodiv > div > #inner > div{border:none;min-width:1400px;min-height:240px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:20px;}
#projects #prodiv > div > #inner > div > div{border:1px solid var(--txtcolor);width:320px;min-height:200px;margin-left:0px;margin-right:0px;margin-bottom:0px;padding-bottom:10px;overflow:hidden;border-radius:7px;background-color:var(--bgcolor);transition:0.2s;}
#projects #prodiv > div > #inner > div > div > img{width:100%;}
#projects #prodiv > div > #inner > div > div > li{color:var(--txtcolor);font-family:portf4;text-align:center;margin-top:5px;list-style-type:none;font-size:120%;font-weight:500;}
#projects #prodiv > div > #inner > div > div:hover{background-color:var(--txtcolor);}
#projects #prodiv > div > #inner > div > div:hover > li{color:var(--bgcolor);}


#courses{display:none;}


#social{border:none;min-height:150px;padding:10px 100px;background-color:black;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
#social > p{font-family:portf4;color:rgba(255,255,255,1);font-size:140%;}
#social #links{border:none;height:auto;min-width:100px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;margin-top:10px;}
#social #links > a{color:white;width:25px;height:25px;background-color:white;text-align:center;position:relative;}
#social #links > a > img{width:35px;border:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}