/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)

   css reset code begins here
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
 display: block;
}

body {
 line-height: 1;
}

ol,
ul {
 list-style: none;
}

blockquote,
q {
 quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
 content: '';
 content: none;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
} 

/* css reset code ends here */


/* global styles */
html{
 box-sizing: border-box;
}

body {
 background-color: #000;
 color: rgb(52, 126, 226);
 width: 100%;
 height: 100%;
}

a{
color: rgb(52, 126, 226);
}

@font-face {
  font-family: "mesoThin";
  src: url("fonts/mesoFonts/mesoThin.otf") format("opentype");
  src: url("fonts/mesoFonts/mesoThinWebfont.woff") format("woff");
  src: url("fonts/mesoFonts/mesoThinWebfont.woff2") format("woff2");
  src: url("fonts/mesoFonts/mesoThin.ttf") format("truetype");
 }

 p {
  font-family: 'Gotu', sans-serif;
 }

h1{
 font-family: "mesoThin", serif;
}

h6{
 font-family: 'Noto Sans', sans-serif;
}

li{
   list-style: none;
}

a{
   color: rgb(52, 126, 226);
   text-decoration: none;
}

.navbar {
   min-height: 70px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 24px;
}

.nav_menu {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 60px;
}

.nav_branding {
   font-size: 2rem;
}

.nav_links {
   transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
}

.nav_links:active{
color: rgb(227, 134, 35);
}

.nav_link:hover {
   color: rgb(227, 134, 35);
}

footer a{
   color: rgb(52, 126, 226);
}

footer a:active{
   color: rgb(227, 134, 35);
}

footer a:visited{
   color: rgb(57, 181, 74);
}

footer a:hover{
   color: rgb(227, 134, 35);
   transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
   
}

.bar {
   display: block;
   width: 25px;
   height: 1.5px;
   margin: 5px auto;
   transform: all 0.3s ease-in-out;
   -webkit-transform: all 0.3s ease-in-out;
   -moz-transform: all 0.3s ease-in-out;
   -o-transform: all 0.3s ease-in-out;
   background-color: rgb(52, 126, 226);
}

@media screen and (min-width: 601px) and (max-width: 2000px) {
   body {
         box-sizing: border-box;
         height: 100%;
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
}

.logo_hero {
   width: 40vw;
   /* img is svg so I need to use vw and vh */
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin: 25px auto;
}

.hamburger{
   display: none;
}

.navbar {
   min-height: 70px;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   padding: 0 24px;
}

.nav_menu {
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   gap: 60px;
}
.hidden_heading{
   display: none;
}

h1{
text-align: center;
margin: 50px auto;
font-size: 3rem;
}

 .nav_branding:hover {
   color: rgb(227, 134, 35);
   transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
 }

 .nav_branding:visited{
   color: rgb(57, 181, 74);
      transition: all 0.3s ease;
         -webkit-transition: all 0.3s ease;
         -moz-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
 }

  .home-page-text {
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
     margin: 10px;
     font-size: 2rem;
  }

  .mascot{
  width: 40vw;
  /* img is svg so I need to use vw and vh */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin: 25px auto;
  }


 .btn {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    margin: 15px auto;
    background-color: rgb(248, 20, 171);
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
 }

 .btn a{
   color: #000;
   font-size: 1.5rem;
 }

  footer {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     margin: 10px 0;
  }

  .socials_nav {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     /* margin: 5px auto; */
     text-align: center;
  }

  footer a {
     justify-content: center;
     margin: 10px 10px;
     font-size: 1.5rem;
  }

 footer p {
         margin: 10px 10px;
      }

.flex-container{
  /* background-color: rgba(226, 11, 23, .2); */
  border-radius: 5px;
  width: 66%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

p{
   line-height: 1.6;
   font-size: 1.25rem;
   margin: 25px auto;
}


.headshot{
   /* display: flex;
   flex-direction: column;
   justify-content: center;
   align-self: center; */
      width: 25%;
      float: left;
      margin: 10px auto;
}

 .project_thumbnail {
    float: left;
    width: 20vw;
    margin: 10px 10px 10px 5px;
    padding: 10px 10px;
 }

  .project_heading {
     margin: 16.5px 0;
     font-size: 1.5rem;
     line-height: 1.6;
  }

.project_description {
   margin: 0 10px;
   font-size: 1.2rem;
   line-height: 1.6;
}

.resume_download_link {
   color: rgb(52, 126, 226);
   font-size: 1.2rem;
   font-family: "Gotu", sans-serif;
   margin-bottom: 15px;
}

.resume_download_link:active {
   color: rgb(227, 134, 35);
}

.resume_download_link:visited {
   color: rgb(57, 181, 74);
}

.resume_download_link:hover {
   color: rgb(227, 134, 35);
   transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
}

.download_icon {
   color: rgb(52, 126, 226);
   font-size: 1.2rem;
   margin: 15px 15px;
}

.download_icon:active {
   color: rgb(227, 134, 35);
}

.download_icon:visited {
   color: rgb(57, 181, 74);
}

.download_icon:hover {
   color: rgb(227, 134, 35);
   transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
}

#resume_container{
   margin-top: 25px;
}

.contact_copy{
   width: 50%;
   margin: 10px 10px;
   font-size: 1.2rem;
   line-height: 1.6;
}

}

@media screen and (min-width: 200px) and (max-width: 600px){
body{
 box-sizing: border-box;
 height: 100%;
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}


 .logo_hero{
  width: 66vw; /* img is svg so I need to use vw and vh */
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  margin: 25px 0;
 }

 .hamburger{
   display: block;
 }

 .hamburger.active .bar:nth-child(2){
   opacity: 0;
 }

  .hamburger.active .bar:nth-child(1) {
     transform: translateY(8px) rotate(45deg);
  }

 .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
 }

 .nav_menu{
   position: fixed;
   left: -100%;
   top: 70px;
   gap: 0;
   flex-direction: column;
   background-color: rgb(248, 20, 171);
   width: 100%;
   text-align: center;
   transition: 0.3s;
 }

 .nav_item{
   margin: 16px 0;
 }

 .nav_menu.active{
   left: 0;
 }

 .home-page-text{
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;
   margin: 10px;
 }

.flex-container{
  width: 66%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
 }

 .mascot{
   width: 50vw;
      /* img is svg so I need to use vw and vh */
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   align-self: center;
   margin: 25px auto;
 }

 .btn{
   width: 40%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-self: center;
   margin: 15px auto;
   background-color: rgb(248, 20, 171);
   border: none;
   border-radius: 5px;
   padding: 5px 0;
   
 }

 .btn a{
   color: #000;
 }

 footer{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 10px 0;
 }

 .socials_nav{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   /* margin: 5px auto; */
   text-align: center;
 }

 footer a{
   justify-content: center;
   margin: 10px 10px;
   font-size: 1.15rem;
 }

 footer p{
   margin: 10px 10px;
 }

 .headshot{
   width: 50%;
   float: left;
   margin: 10px 10px;
 }
 
.project_description {
  margin: 0 10px;
  font-size: .7rem;
  line-height: 1.6;
}

 .project_thumbnail{
   float: left;
   width: 30vw;
   margin: 10px 10px 10px 5px;
   padding: 10px 10px;
 }

 .project_heading{
   margin: 16.5px 0;
   font-size: .8rem;
   line-height: 1.6;
 }

 .resume_download_link{
   margin: 10px;
 }

 .contact_copy{
   margin: 10px 10px;
   font-size: .7rem;
   line-height: 1.6;
 }
}