/* variables */
:root {
	--primary-color: #5924ed;
	--secondary-black: #0d081a;
	--secondary-gray: #48464b;
	--body-bg: #efebfa;
}

/* global styles */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html {
	font-family: 'Roboto Mono';
	font-size: 1.3em;
	scroll-behavior: smooth;
}
body {
	/* background-color: var(--body-bg); */
  /* font-family: "Roboto Mono", "Times New Roman", Times, serif; */
  font-family: "Schoolbell", "Times New Roman", Times, serif;
  min-height: 100vh;
  margin: auto 40px;
  padding-top: 10px;

  display: grid;
  grid-template-rows: 60px 1fr 90px;
  grid-template-columns: 60px 1fr 60px;
}
header,
footer {
  text-align: center;
  
}
.container {
	width: 95%;
	margin: 0 auto;
	max-width: 1000px;
}
header {
  grid-row: 1 / 1;
  grid-column: 1 / 3;
  grid-template-columns: 100px 1fr 60px; 

}
.title {
  font-family: "Permanent Marker", "Times New Roman", Times, serif;

}
.brand,
header {
  max-height: 150px;
}

main {
  grid-row: 2/ 3;
  grid-column: 1 / 3;
  margin-top: 15px;
  display:flex;
  flex-direction: row;
  -ms-flex-align: center;
}
section {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center
}
@media only screen and (max-width: 768px) {
  main {
    flex-direction: column;
  }
  section {
    width: 100%;
  }
}

footer {
  margin-top:10px;
  grid-row: 3/ 3;
  grid-column: 1/3;

}
.social {
  padding: 20px;
}
/* Menu Section */
/* Icon 1 */

.animated-icon1,
.animated-icon2,
.animated-icon3 {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon1 span,
.animated-icon2 span,
.animated-icon3 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

.animated-icon1 span {
background: #2d7ef7;
}

.animated-icon2 span {
background: #e3f2fd;
}

.animated-icon3 span {
background: #f3e5f5;
}

.animated-icon1 span:nth-child(1) {
top: 0px;
}

.animated-icon1 span:nth-child(2) {
top: 10px;
}

.animated-icon1 span:nth-child(3) {
top: 20px;
}

.animated-icon1.open span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

.animated-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}

.animated-icon1.open span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}

/* Icon 3*/

.animated-icon2 span:nth-child(1) {
top: 0px;
}

.animated-icon2 span:nth-child(2),
.animated-icon2 span:nth-child(3) {
top: 10px;
}

.animated-icon2 span:nth-child(4) {
top: 20px;
}

.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}

.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}

/* Icon 4 */

.animated-icon3 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}

.animated-icon3.open span:nth-child(2) {
width: 0%;
opacity: 0;
}

.animated-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}




/*  */
.fa-1x {
  font-size: 1.5rem;
  }
  .navbar-toggler.toggler-example {
  cursor: pointer;
  }
  .dark-blue-text {
  color: #0A38F5;
  }
  .dark-pink-text {
  color: #AC003A;
  }
  .dark-amber-text {
  color: #ff6f00;
  }
  .dark-teal-text {
  color: #004d40;
  }
  /* contact */
  .github-card{
    height:232px;
    border: 2px solid #ccc;
  }