/** @format */

:root {
   /* 
   --bg-color: #0d0d0d;
	--1-color: #00ff85;
	--2-color: #1e90ff;
	--3-color: #ff0099; //hover
	--text-color: #ffffff;
*/

   /*
--bg-color: #003049;
--1-color: #d62828;
--2-color: #f77f00;
--3-color: #fcbf49;
--text-color: #eae2b7;
*/
   --bg-color: #2c3e50;
   --1-color: #34495e;
   --2-color: #1abc9c;
   --3-color: #d53ee3;
   --text-color: #ecf0f1;
}

* {
   box-sizing: border-box;
   padding: 0px;
   margin: 0px;
   font-family: "Trebuchet MS", Tahoma, sans-serif;
}

html {
   scroll-behavior: smooth;
}

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

#pageWrapper {
   width: 100%;
   min-height: 100vh;
   display: grid;
   grid-template-rows: 80px auto 100px;
}

main {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
}

section {
   width: 1600px;
   border-radius: 10px;
   margin: 10px;
   background-color: var(--1-color);
   min-height: 850px;
   padding: 20px;
   scroll-margin-top: 80px;
   padding-bottom: 60px;
}

.title h1 {
   color: var(--text-color);
   /* border-bottom: 5px solid var(--3-color); */
   padding: 0 10px;
   font-size: 40px;
   text-shadow: 0 0 10px var(--bg-color);
}

.title h2 {
   color: var(--text-color);
   padding: 0 10px;
   font-size: 28px;
}

.underline {
   height: 4px;
   background-color: var(--3-color);
   width: 100%;
   content: "";
   box-shadow: 0 0 5px 0px var(--3-color);
}

.title {
   margin-bottom: 20px;
}

#projects_grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   column-gap: 20px;
   row-gap: 20px;
}

#education_grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 20px;
   row-gap: 20px;
}

#technologies_grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   column-gap: 20px;
   row-gap: 20px;
}
.tech_grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 10px 10px;
}