/* Box Model Hack */
* {
     -moz-box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/

body, p {
     color: #464646;
     font-family: 'Nunito', Arial, Helvetica, sans-serif;
     margin: 0;
     padding: 0;
}

h1,h2,h3,h4,h5,h6 {
     font-family: 'Ubuntu', Verdana, Geneva, Tahoma, sans-serif;
     font-weight: 700;
     margin: 0;
     padding: 0 0 .5rem 0;
}

p {
     font-size: 1.2rem;
     line-height: 1.6rem;
     padding-bottom: .5rem;
}

ul {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     list-style-type: none;
     margin: 0;
     padding: 0;
}

ul li {
     padding: 0 1rem;
}

a {
     color: #fff;
     font-family: 'Ubuntu', Verdana, Geneva, Tahoma, sans-serif;
     font-size: 1.4rem;
     text-decoration: none;
}

a:hover {
     color: rgb(255,124,0)
}

.container {
     background-color: #835f97;
     overflow-x: hidden;
     width: 100%;
     scroll-behavior: smooth;
}

/******************************************
/* LAYOUT
/*******************************************/
header {
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background: linear-gradient(to top, rgba(70, 10, 105, .5), transparent 20%);
}

nav{
     background-color: rgba(70, 10, 105, .4);
     border-radius: 10px;
     margin: 1rem 0;
     padding: 1rem;

}

section {
     width: 100%;
     overflow-x: hidden;
}

#intro {
     background: #fff;
}

header .wrapper {
     padding: 0rem 6rem 3rem 6rem;
}

header .penguin {
     width: 64%;
     margin-right: 40%;
}

header .penguin img {
     width: 100%;
}

header .welcome {
     position: absolute;
     bottom: 15%;
     right: -5%;
     width: 54%;
}

header .welcome h3 {
     color: rgb(70,10,105);
}

header .logo-whole {
     width: 250px;
     padding-bottom: .6rem;
}

header .logo-whole img {
     width: 100%;
}

#projects {
     background: #835f97;
     text-align: center;
}

#contact {
     background: #fff;
}

footer {
     background: #835f97;
     width: 100%;
}

.wrapper {
     max-width: 1024px;
     margin: 0 auto;
     padding: 3rem 6rem;
     position: relative;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/
ul.plugs {
     justify-content: start;
     flex-wrap: wrap;
}

ul.plugs li {
     padding: 0 1rem 0 0;
}

.fas, .fab {
     color: rgb(255,124,0);
}

ul.plugs a:hover i {
     color: rgb(70,10,105);
     box-shadow: 0px 0px 5px rgba(255,255,255,.5);
}

.resumebtn {
     box-shadow: 0 2px 2px 2px rgba(70,10,105,.3);
     background-color: rgb(255,124,0);
     background: linear-gradient(to top, rgb(255,108,0), rgb(255,150,0));
     border: #fff 4px solid;
     border-radius: 2rem;
     padding: .8rem 1rem;
}

.resumebtn:hover {
     background: linear-gradient(to top, rgb(176,85,229), rgb(70,10,105));
     box-shadow: 0 3px 2px 2px rgba(255,108,0,.3);
     /* border: rgb(255,108,0) 4px solid; */
}

h2 {
     font-size: 2rem;
}

span.design {
     color: #ff7c00;
     font-size: 1.3rem;
     font-weight: bold;
}

span.webdev {
     color: #460a69;
     font-size: 1.3rem;
     font-weight: bold;
}

#intro .wrapper {
}

#projects .wrapper {
     padding: 3rem 3rem;
}

#projects h1 {
     color: #fff;
}

#projects #project-1 {
     grid-area: proj-1;
}

#projects #project-2 {
     grid-area: proj-2;
}

#projects #project-3 {
     grid-area: proj-3;
}

#projects #project-4 {
     grid-area: proj-4;
}

#projects #project-5 {
     grid-area: proj-5;
}

#projects #project-6 {
     grid-area: proj-6;
}

#projects #project-7 {
     grid-area: proj-7;
}

#projects ul {
     display: grid;
     gap: 1rem;
     grid-template-columns: repeat(11, 1fr);
     grid-template-rows: repeat(3, 1fr);
     grid-template-areas: 
     "... proj-1 proj-1 proj-1 proj-1 proj-1 proj-1 proj-2 proj-2 proj-2 proj-2"
     "proj-3 proj-3 proj-3 proj-3 proj-4 proj-4 proj-4 proj-4 proj-4 proj-4 ..."
     "... proj-5 proj-5 proj-5 proj-6 proj-6 proj-6 proj-7 proj-7 proj-7 ...";
     width: 100%;
     height: 100%;
     padding: 1rem 0;
}

#projects ul li {
     width: 100%;
     height: 100%;
     padding: 0;
}

#projects .project-block {
     background: #fff;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     position: relative;
     border-radius: 1.5rem;
     height: 150px;
     cursor: pointer;
}

#projects .design-block {
     border: rgb(255,108,0) 4px solid;
}

#projects .webdev-block {
     border: rgb(70,10,105) 4px solid;
}

#projects .img-block {
     background: #000;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 0;
}

#projects .img-block img{
          width: auto;
          height: 100%;
}


#projects .img-overlay {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
     text-shadow: #000 1px 1px 5px;
     visibility: hidden;
     z-index: 1;    
}

#projects .project-block:hover .img-overlay {
     visibility: visible;
     transition: all ease-in .2s;
}

#projects .webdev-block .img-overlay {
     background:rgba(70,10,105, .95);
     background: linear-gradient(to top, rgba(70,10,105, .9), rgba(187,98,255,.9));
     box-shadow: inset 0 0 1rem rgb(38,0,55);
}


#projects .design-block .img-overlay {
     background:rgba(183,89,0, .95);
     background: linear-gradient(to top, rgba(255,108,0,.9), rgba(255,150,0,.9));
     box-shadow: inset 0 0 1rem rgb(152,75,0);
}

#projects h4 {
     color: #fff;
     font-family: 'Nunito', Arial, Helvetica, sans-serif;
     font-size: 1.8rem;
     font-weight: normal;
     padding: 0 0 .2rem 0;
}

#projects p {
     color: #fff;
     font-size: 1rem;
     font-weight: bold;
}

#projects a:hover {
     color: white;
}

#contact .wrapper {
     display: flex;
     flex-direction: row;
     flex-grow: 1;
     flex-shrink: 1;
     justify-content: space-between;
     align-items: center;
}

.textblock {
     padding: 0 1rem 0 0;
     width: 64%;
}

.selfie {
     min-width: 200px;
     min-height: 200px;
     max-width: 200px;
     max-height: 200px;
     border-radius: 50%;
     overflow: hidden;
     display: flex;
     justify-self: center;
     align-items: center;
}


.selfie img {
     width: 100%;
     height: auto;
     
}

footer p {
     color: #fff;
     font-size: .8rem;
     text-align: center;
}

footer .wrapper {
     padding: 1rem;
     
}

.project-modal {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1; /* Sit on top */
     padding-top: 100px; /* Location of the box */
     left: 0;
     top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.project-content {
     background: #fff;
     margin: auto;
     padding: 3rem;
     border-radius: 2rem;
     width: 80%;
     max-width: 1024px;
}

/* The Close Button */
.close {
     color: #aaaaaa;
     float: right;
     font-size: 28px;
     font-weight: bold;
   }
   
   .close:hover,
   .close:focus {
     color: #000;
     text-decoration: none;
     cursor: pointer;
   }

@media (max-width: 767px) {
     .wrapper {
          padding: 2.5rem 1.5rem;
          text-align: center;
     }

     header .wrapper {
          text-align: left;
     }

     #projects .wrapper {
          padding: 3rem 1rem;
     }

     #projects ul {
          display: flex;
          flex-direction: column;
     }

     #projects .project-block {
          width: 100%;
     }

     #projects .img-overlay {
          justify-content: flex-end;
          visibility: visible;
     }

     #projects .webdev-block .img-overlay {
          background: linear-gradient(to top, rgba(183,89,0, .8), transparent);
     }

     #projects .design-block .img-overlay {
          background: linear-gradient(to top, rgba(70,10,105, .8), transparent);
     }

     #contact .wrapper {
          flex-direction: column-reverse;
     }

     #contact .textblock {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          padding: 1rem 0;
          text-align: center;
     }

     header .wrapper {
          padding: 0 1rem 3rem 1rem;
     }

     header .penguin {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: -30%;
     }

     header .welcome {
          width: 90%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          position: relative;
          right: 0;
          bottom: 0;
          padding: 1rem;
          margin: 0 auto;
          background: linear-gradient(to bottom, #a580bb, transparent);
          border-radius: 1.2rem;
     }

     ul.plugs {
          padding: 1rem;
          display: grid;
          row-gap: .8rem;
          grid-template-columns: repeat(3, 1fr);
          grid-row: repeat(2,1fr);
     }

     ul.plugs .resumeli {
          grid-column: 1/span 3;
     }

     #contact .selfie {
          width: 80%;
          margin: 0 auto;
     }
}