/*CSS style sheet*/
/*mobile-first style*/
/*variables*/
/*sets variables for reusable colors*/
:root {
  --main-radius: 0.4em;
  --main-padding: 0em;
  --backgroundNavBarColor: #336600;
  --backgroundMainColor: #ffffff;
  --fontTitleColor: #006600;
  --fontMainColor: #000000;
}

/*reset*/
body, p, th, td{
  margin: 0;
  padding: 0;
  text-decoration: none;
} /*resets the default html styles*/

/*set fonts*/
/*sets the font families uploaded to the font file*/
@font-face {
  font-family: 'Roboto-Regular';
  src: url(../assets/fonts/Roboto-Regular.ttf);
}

@font-face {
  font-family: 'BlackOpsOne';
  src: url(../assets/fonts/BlackOpsOne-Regular.ttf);
}

@font-face {
  font-family: 'SpecialElite';
  src: url(../assets/fonts/SpecialElite-Regular.ttf);
}/*ends setting the font families*/

/*set basic style*/
/*sets the background color and disables the scrolling option*/

body {
  background: var(--backgroundMainColor);
  overflow-x: hidden; 
  font-family: 'RobotoRegular', 'Times New Roman', 'sans-serif';   
} /*ends setting the background color*/

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1.5fr 2fr 6fr 1.5fr;
  grid-template-areas:
    "header"
    "nav"
    "sidebar" 
    "main"
    "footer";
  grid-gap: 0.2em;
  font-size: 1em;
  color: #000000;
}

/*set the heading properties*/
h2, h3, h4, h5{
  font-family: 'BlackOpsOne';
  color: var(--fontTitleColor);
  font-weight: normal;
  line-height: 1.4em;
  font-size: 3em;
} /*ends setting general settings for headings*/

h2, h3{
  text-align: center;
} /*sets specific property for some headings*/

/*set paragraph properties*/
p{
  font-family: 'RobotoRegular';
  color:var(--fontMainColor);
  text-align: left;
  font-weight: normal;
  line-height: 1.4em;
  letter-spacing: 0.04em;
  word-spacing: 0.15em;
  font-size: 1em;
  text-indent: 3em;
  margin-bottom: 1em;
  padding-left: 1em;
  padding-right: 1em;
}/*settings specific for paragraphs*/

header {
  background: #dcdcdd;
  grid-area: header;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  margin-top: 0em;
  padding-top: 1em;
  color: #ffffff;
}

/*set the properties for the website's logo*/
.logo{
  background-color: #206c83;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1em;
  align-items: center;
  text-align: center;
  grid-row: 1;
  margin: 0%;
  position: relative;
}

.logo img{
    top: 0;
    left: 0;
    width: 100%;
} /*ends of setting properties for the site's logo*/

#sidebar {
  background: #6bad79;
  grid-area: sidebar;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

/*set image properties*/
.profilePic img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
}/*adjusted settings for profile pic*/

#profilePicCaption {
  text-align: center;
  font-family: 'SpecialElite';
  color:var(--fontMainColor);
  font-weight: normal;
  line-height: 1.4em;
  letter-spacing: 0.04em;
  word-spacing: 0.15em;
  font-size: 1em;
}/*aligned the caption with the profile*/

.socialMediaIcon img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 32px;
}/*aligned social media icon below profile pic*/

main {
  background: #f5f4d7;
  grid-area: main;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

main p{
  text-align: left;
  font-size: 1.6em;
  padding-inline: 1em;
  text-indent: 1.5em;
}

/*set properties for education unordered list (customUL1)*/
.customUL1 {
  list-style: none;
  padding-left: 3em;
  font-family: 'Courier New';
  font-size: 1.6em;
}/*sets basic properties for the UL*/

.customUL1 li {
  position: relative;
  padding-left: 1em;
  padding-bottom: 1em;
/*sets padding from border*/}

/*customizing the unordered list with an image*/
.customUL1 li:before {
  content: '';
  width: 2em;
  height: 2em;
  position: absolute;
  background-image: url('../assets/images/education_icon.png');
  background-size: 2em;
  background-position: top;
  left: -1.8em;
  top: 50%;
  transform: translateY(-100%);
}/*ends customization of UL*/

#getDegreesButton, #getCoursesButton {
  margin-top: 2em;
  border-radius: 1em;
  background-color: #213d27;
  color: #ffffff;
  font-weight: bold;
  padding-inline: 2em;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  margin-bottom: 4em;
  font-size: 1.3em;
  margin-left: 3em;
}

/*set properties for links en general*/
a:link{
  color: #0000ff;
  text-decoration: none;
}

a:visited{
  color:#720356;
}

a:hover{
  color: #0846ca;
  text-decoration: underline;
}

a:active{
  color:#ce2e19;
}/*end of customizing links*/

/*set properties for the table*/
.educationTable{
  margin-left: 0.3em;
  margin-right: 0.3em;
}

.educationTable th, td{
  padding: 0.5em;
  text-align: left;
}/*sets the table heading and data properties*/

/*sets shade alternate rows color*/
.educationTable tr.even {
  background-color: #4e884eaf;
}

/*sets the font properties for the th element*/
.educationTable th{
  font-family: 'SpecialElite';
  color:var(--fontTitleColor);
  font-weight: bold;
  line-height: 1.4em;
  font-size: 1.7em;
} 

/*sets the font properties for the table data*/
.educationTable td{
  font-family: 'Courier New';
  color:var(--fontMainColor);
  font-weight: normal;
  line-height: 1.4em;
  font-size: 1.3em; 
}

/*sets the font properties for the table foot*/
#tableFoot{
  font-family: 'SpecialElite';
  color:var(--fontMainColor);
  font-weight: normal;
  line-height: 1.4em;
  font-size: 0.9em;
  text-align: right;
}/*ends setting properties for the table*/

footer {
  background: #adf032;
  grid-area: footer;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  padding-top: 1em;
  padding-bottom: 0.5em;
}

/*set the properties for the project index file*/
* {box-sizing: border-box;}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 0.15em solid #117272;
  border-radius: 1em;
  background-color: #07f7f7;
  padding: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
  max-width: 87.5em;
}/*sets the outter grid*/

.project-item-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 0.1em solid #7a7765;
  border-radius: 1em;
  background-color: #fff9db;
  padding: 1em;
  margin-top: 0em;
  margin-bottom: 1em;
}/*sets the inner grid*/

.project-item-grid img{
  max-height: 7em;
  margin-left: -2em;
  margin-top: -1em;
  margin-right: 0.5em;
  border-radius: 1em;
}/*sets the image size*/

.project-item-grid h4{
  margin-top: -0.5em;
}/*sets the paragraph top margin*/

.project-item-grid figcaption{
  display: none;
}/*removes the figcaption*/

.project-item-grid p{
  margin-top: -2em;
  text-indent: 0em;
}/*sets paragraph properties within the grid*/

.project-item-grid a{
  text-decoration: none;
}/*removes anchor decoration within the grid*/

/*set properties for articles related to projects*/
.projectsArticles h2{
  margin-top: 0.8em;
  text-align: center;
}

.projectsArticles h3{
  margin-top: 0.5em;
  text-align: left;
  margin-left: 0.5em;
  font-size: 2.2em;
}

.projectsArticles h4{
  margin-top: 0.5em;
  text-align: left;
  margin-left: 0.5em;
  margin-bottom: 0em;
  font-size: 2.2em;
}

.projectsArticles p{
  margin-top: 0.5em;
  text-indent: 0em;
  font-size: 1.6em;
}

.projectsArticles ul{
  margin-top: 0.5em;
  font-size: 1.6em;
}

.projectsArticles ol{
  margin-top: 0.5em;
  font-size: 1.6em;
}

.projectsArticles video{
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 30em;
} /*ens setting the properties for the articles*/

/*set properties for the blog index file*/
.blogContent h5{
  text-align: left;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 0.4em;
}/*ends setting properties for title*/

.blogContent figure{
  float: left;  
  margin: 0.5em; 
  padding-right: 0.5em;
} /*ends of setting properties for the blog images*/

.blogContent img{
  max-width: 8em;
  max-height: 9em;
}

.blogContent figcaption{
  display: none;
}/*ends of setting properties for blog images captions*/

.blogContent p{
  text-indent: 1.5em;
  padding-top: 0em;
}/*ends of setting properties for blog paragraphs*/

.credits {
  text-align: right;
}

/*set the navigation bar properties*/
nav {
  grid-area: nav;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  /*overflow: hidden;*/
  background-color: var(--backgroundNavBarColor);
  color: #ffffff;
} /*sets the general properties for the navbar layout*/

nav a {
  float: left;
  text-align: center;
  padding: 1em 1em;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
  border-radius: var(--main-radius);
}/*sets the general properties for the navbar contents*/

nav a:visited{
  color:white;
  text-decoration: none;
}

nav a:hover {
  background-color: rgb(201, 240, 166);
  color: black;
  text-decoration: none;
}/*sets the hover properties*/

nav a.current {
  background-color: #0aaa04;
  color: #ffffff;
  font-weight: bold;
  border-radius: var(--main-radius);
}/*sets the current page property*/
/*end of navbar settings*/

/* CALCULATOR */
.calculatorContainer {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 6.2em);
  grid-template-rows: minmax(7.5em, auto) repeat(5, 6.2em);
}

.calculatorContainer > button {
  cursor: pointer;
  font-size: 2em;
  border: 0.07em solid rgb(239, 243, 187);
  outline: none;
  background-color: rgba(65, 168, 199, 0.432);
  border-radius: 0.3em;
}

.calculatorContainer > button:hover {
  background-color: rgba(28, 103, 243, 0.9);
}

.span-two {
  grid-column: span 2;
}

.output {
  grid-column: 1 / -1;
  background-color: var(--backgroundNavBarColor);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  flex-direction: column;
  padding: 0.62em;
  word-wrap: break-word;
  word-break: break-all;
  border-radius: 0.3em;
}

.output .previous-operand {
  color: rgba(255, 255, 255, .75);
  font-size: 1.5rem;
}

.output .current-operand {
  color: white;
  font-size: 2.5rem;
}

.hoverImg img, span{
  display: block;
}

.hoverImg img {
  width: 20em;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1em;
  padding-bottom: 0.5em;
  transition: all 2s ease-in-out;
}

.hoverImg span {
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 2em;
}





/* ************************************************************************************ */
/*                                  TABLET STYLE                                        */
/* ************************************************************************************ */
@media only screen and (min-width: 641px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1.5fr 2fr 6fr 1.5fr;
    grid-template-areas:
      "header"
      "nav"
      "sidebar" 
      "main"
      "footer";
  }

 /* logo img{
    max-width: 100%;
  } adjusts properties for the site's logo*/

  .profilePic img {
    margin-top: 2.5em;
  }

  h2, h3, h4, h5{
    font-size: 2.2em;
    margin-top: 0.5em;
  } /*adjusts general settings for headings*/

  main p{
    font-size: 1.4em;
  }/*adjusts settings specific for paragraphs*/
 
  .customUL1 {
    font-size: 1.4em;
  }
  /*adjusts font properties for the ul element*/

  .educationTable th{
    font-size: 1.6em;
  } /*adjusts font properties for the table header element*/

  .educationTable td{
    font-size: 1.4em; 
  } /*adjusts font properties for the table data element*/

  #tableFoot{
    font-size: 1.2em;
  }/*adjusts properties for the table foot*/

  .projectsArticles h2{
    margin-top: 0.6em;
    font-size: 2.2em;
  }/*adjusts properties for the articles title*/

  .projectsArticles h3{
    text-align: left;
    margin-left: 0.5em;
    font-size: 2em;
  }/*adjusts properties for article subtitle*/

  .projectsArticles h4{
    text-align: left;
    margin-left: 0.5em;
    font-size: 2em;
  }/*adjusts properties for article subtitle*/

  .projectsArticles p{
    font-size: 1.4em;
  }

  .projectsArticles ul {
    font-size: 1.4em;
  }/*adjusts properties for ul item*/

  .projectsArticles ol {
    font-size: 1.4em;
  }/*adjusts properties for ol item*/

  .projectsArticles ol li{  
    margin-bottom: 0.5em;
  }/*adjusts properties for ol item*/

  .projectsArticles video{  
    max-width: 40em;
  }

  .blogContent h5{
    margin-top: 0.8em;
    margin-bottom: 0.5em;
  }/*adjusts setting properties for title*/

  .blogContent img{
    max-width: 10em;
    max-height: 12em;
  } /*adjusts of setting properties for the blog images*/

  .blogContent p{
    font-size: 1.4em;
  }
    
  nav a {
    padding: 0.6em 0.6em;
    font-size: 1.2em;
    }/*adjusts the general properties for the navbar contents*/

}

/* ************************************************************************************ */
/*                                  DESKTOP STYLE                                       */
/* ************************************************************************************ */
@media only screen and (min-width: 1100px) {
  .container {
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 4em 6fr 1.5fr;
    grid-template-areas:
      "header header"
      "sidebar nav"
      "sidebar main"
      "sidebar footer";
  }

  .logo img{
    width: 100%;
    max-width: 1300px;
  } /*adjusts properties for the site's logo*/

  .profilePic img {
    margin-top: 12em;
  }

  header {
    font-size: 1.8em;
    padding-top: 0em;
  }

  h2, h3, h4, h5{
    font-size: 2.8em;
  } /*adjusts general settings for headings*/

  p{
    font-size: 1.2em;
  }/*adjusts settings specific for paragraphs*/
 
  #sidebar {
    font-size: 1.3em;
  }

  .profilePic img {
    width: 12em;
  }

  .socialMediaIcon img{
    width: 7em;
  }

  main p{
    padding-right: 2em;
    text-indent: 3em;
  }

  #getDegreesButton, #getCoursesButton {
    margin-left: 4em;
    padding-top: 1em;
    padding-bottom: 1em;
    border-radius: 3em;
  }

  #bostonUnivCourses {
    padding-right: 2em;
  }

  .customUL1 {
    font-size: 1.4em;
  } /*adjusts font properties for the ul element*/
  
  .educationTable th{
      font-size: 1.8em;
  } /*adjusts font properties for the table header element*/

  .educationTable td{
      font-size: 1.4em; 
  } /*adjusts font properties for the table data element*/

  #tableFoot{
      font-size: 1.1em;
  }/*adjusts properties for the table foot*/
  
  .project-item-grid h4{
      margin-top:0em;
      margin-bottom: 1em;
  }

  .projectsArticles {
    padding-right: 2em;
  }

  .projectsArticles h2{
    margin-top: 0.6em;
    font-size: 2.8em;
  }/*adjusts properties for the articles title*/
  
  .projectsArticles h3{
    text-align: center;
    margin-top: 0.6em;
    font-size: 2.3em;
  }/*adjusts properties for the articles title*/

  .projectsArticles p{
    font-size: 1.4em;
  }

  .projectsArticles ul{
    font-size: 1.4em;
  }/*adjusts properties for ul item*/

  .projectsArticles ol {
    font-size: 1.4em;
  }/*adjusts properties for ol item*/

  .projectsArticles video{  
    max-width: 55em;
  }

  .blogContent h5{
      margin-top: 0.8em;
      margin-bottom: 0.5em;
  }/*adjusts setting properties for title*/

  .blogContent img{
      max-width: 100%;
      max-height: 18em;
  } /*adjusts the image properties to full*/

  .blogContent figcaption{
      display: inherit;
      text-align: center;    
  }/*adjust the image caption to display*/

  .blogContent p{
    text-indent: 3em;
    padding-right: 2em;
  }


  nav a {
      padding: 0.9em 0.9em;
      font-size: 1.4em;
    }/*adjusts the general properties for the navbar contents*/

  body {
      margin-left:auto;
      margin-right: auto;
      max-width: 1300px;
  }/*adjusts the entire site's width to a max*/
  
}