/* styles for portfolio */

.grid {
	width:100%;
	height:100%;
	display:grid;
	grid-template-columns: 12.3% 85.4%;
	grid-template-rows:9vw 2.5vw 0.2vw 1fr;
	/*grid-gap:0 0.3vw;*/
	box-sizing:border-box;
	position:relative;
	transition-timing-function:ease;
	transition: all 1s;
}

.header {
	grid-row-start:1;
	grid-row-end:2;
	grid-column-start:1;
	grid-column-end:3;
	position:sticky;
	top:0;
	z-index:10;
	box-sizing:border-box;
	font-family:'Cinzel',serif;
	display:flex;
	justify-content:space-around;
	align-items:center;
	background-color:white;
	border-bottom:0.2vw solid black;
}
	
.vicon {
	width:10%;
	height:88%;
	box-sizing:border-box;
	font-size:1vw;
	border-radius:1vw;
	/* background-color:#f2f3f4; */
}
	
.headtext {
	display:inline-block;
	text-align:right;
	vertical-align:text-bottom;
	font-size:5.5vw;
	line-height:100%;
	padding:0.1% 1% 0 1%;
	transform:scaleX(1.02) scaleY(1.5);
}

.leftside {
	grid-row-start:4;
	grid-row-end:5;
	grid-column-start:1;
	grid-column-end:2;
	background-color:#00001a;
	box-sizing:border-box;
	color:white;
	transition:0.5s;
	border-radius:0 0 0 0;
}

.lefttextcontainer1 {
	width:100%;
	border-radius:0 0 0 0;
}

.lefttext {
	width:100%;
	height:8vw;
	box-sizing:border-box;
	background-color:#000080;
	font-size:3.5vw;
	font-family:'Montserrat',sans-serif;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:0 0 0 0;
}

.lefttextcontainer2 {
	text-align:center;
}

.leftlist {
	list-style-type:none;
	padding:0;
}

.leftlistel {
	margin-bottom:3vw;
}

#leftlistel1 {
	margin-top:3vw;
}

.ohmanbutton {
	display:flex;
	width:100%;
	height:3.5vw;
	justify-content:center;
	align-items:center;
	background-color:#00001a;
	color:white;
	box-sizing:border-box;
}

#icon4, #icon5, #icon6 {display:flex;justify-content:center;align-items:center;}

.projtlink {
	text-decoration:none;
	color:inherit;
	font-size:1.5vw;
}

.projtdes {
	font-size:1.2vw;
	padding:1.2vw 3vw;
}

.ohmanbutton:hover {
	background-color:#000080;
}

.rightside {
	grid-column-start:2;
	grid-column-end:3;
	grid-row-start:4;
	grid-row-end:5;
	background-color:white;
	box-sizing:border-box;
}

h2 {
	font-family:'Montserrat',sans-serif;
	font-size:1.7vw;
	color:white;
}

.droppers {
	cursor:pointer;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:3.5vw;
}

.tridrop {
	box-sizing:border-box;
	width:0;
	height:0;
	border-left: 0.6vw solid transparent;
	border-right: 0.6vw solid transparent;
	border-top: 1vw solid white;
}

.drop-content {
	display:none;
}

.con:hover {
	background-color:#000080;
}

.ptitles {
	display:none;
}

#projects {
	display:none;
}

#soft {
	font-size:1.1vw
}

.infin-marquee {
	grid-row-start:2;
	grid-row-end:3;
	grid-column-start:1;
	grid-column-end:3;
	box-sizing:border-box;
	margin:0;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	overflow:hidden;
	background-color:black;
	position:sticky;
	top:9vw;
	z-index:10;
}

h3 {
	font-size:1.3vw;
	white-space:nowrap;
	padding:0 0 0 2vw;
	animation: move-rtl 48000ms linear infinite;
	color:white;
	font-family: 'Courier Prime', monospace;
	letter-spacing:0.13vw;
}

@keyframes move-rtl {
	0% {
		transform:translateX(0);
	}
	100% {
		transform:translateX(-300%);
		padding:0 2vw;
	}
}

.mainMess {
	position:relative;
	width:100%;
	height:auto;							/* F1C40FCC; */
	border-radius:0 0 0 0;
	background:linear-gradient(to left, #121212 99.5%, #202020);
}


.article {
	
}

.fix {
	border-radius:3vw;
	height:100%;
	width:100%;
}

.words {
	color:white;
	font-size:1.15vw;
	font-family:'Montserrat',sans-serif;
}

.hdr {
	padding:0vw 0;
	margin-left:3.1vw;
	font-size:3.5vw;
	font-family:'Montserrat',sans-serif;
	color:#000080;
	font-weight:bold;
	text-shadow:
	0.05vw  -0.05vw 0.2vw #ffffffff,
	-0.05vw  -0.05vw 0.2vw #ffffffff,
	-0.05vw  0.05vw 0.2vw #ffffffff,
    0.05vw  0.05vw 0.2vw #ffffffff; /* Bottom-right shadow */
	transform:scaleX(1.1) scaleY(1.17);
	letter-spacing:0.2vw;
}

#context {
	padding:4vw 0 2vw 0;
}

.padder {
	padding:0 5vw;
}

.keyimage {
	width:100%;
	height:auto;
	text-align:center;
	z-index:1;
}

#gradientOverlay {
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	background:linear-gradient(to left, #00000000 99.5%, #202020);
	z-index:2;
}


.secMess {
	width:100%;
	height:25vw;							/* F1C40FCC; */
	border-radius:0 0 0 0;
	background:linear-gradient(to left, #121212 99.5%, #202020);
	text-align:right;
}

#about {
	margin-right:3.1vw;
	padding-top:7vw;
}

#warp {
	padding:1vw 0 2vw 0;
}

#arp {
	padding:0 0 8vw 0;
}