@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400&display=swap');

body {
  padding:0;
  margin:0;
  background-color:#2B4162;
  color:#FFF7EB;
  font-size:1.2em;
  font-family:Poppins, sans-serif;
}

header {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  width:100vw;
  font-size:2em;
  background:#4e647f url('images/yellowroseleaves.png') no-repeat fixed center;
}

header p {
  background-color:#2B4162;
  padding:10px 20px 20px 20px;
  animation: fadeIn linear 2s;
    -webkit-animation: fadeIn linear 2s;
    -moz-animation: fadeIn linear 2s;
    -o-animation: fadeIn linear 2s;
    -ms-animation: fadeIn linear 2s;
}

#sidecontent {
  margin:50px auto;
  background-color:#2B4162;
  width:60%;
  padding:30px;
}

#sidecontent img {
  width:650px;
  margin:10px auto;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

a {
  color:#ffdd00;
  background-color:#44679C;
  display:inline-block;
  padding:0 2px;
}

a:hover, a:active, a:focus {
  color:#000;
  background-color:#ffdd00;
}

#social {
  position:absolute;
  top:20px;
  left:20px;
}

#social img {
  width:30px;
  height:30px;
}

#social a {
  background:none;
}

.important {
  background-color:#ffdd00;
  color:#000;
  text-decoration:underline;
  display:inline-block;
  padding:0 8px;
}

h1 {
  background-color:#ffdd00;
  color:#000;
  text-decoration:underline;
  font-size:1.5em;
  font-weight:normal;
  padding-left:20px;
}

h2 {
  font-style:italic;
  margin-bottom:20px;
  font-size:.9em;
}

#projects {
  margin:0 auto;
  width:60%;
  text-align:justify;
}

#projects div {
  margin:50px 0;
  padding:30px;
  background-color:#1F2F47;
}

#about {
  margin:0 auto;
  width:70%;
  text-align:justify;
}

#about div {
  margin-top:50px;
}

#about div img {
  float:left;
  border-radius:50%;
  width:200px;
  height:200px;
  margin:0 10px 10px 0;
  border:4px solid #efdc8f;
}

#about img {
  display:block;
  width:600px;
  margin:0 auto;
}

/* .tile {
  opacity:0;
} */

.tile img {
  float:left;
  width:250px;
  height:250px;
  margin:0 10px 10px 0;
  border:4px solid #efdc8f;
}

footer {
  padding:50px;
  font-size:.7em;
  background-color:#2B4162;
}

@media screen and (max-width:650px) {
  body {
    font-size:1em;
  }

  header {
    background:#4e647f url('images/yellowrose.png') no-repeat fixed;
    background-size:contain;
      -webkit-background-size:contain;
      -moz-background-size:contain;
      -o-background-size:contain;
      -ms-background-size:contain;
    display:block;
    font-size:1em;
    height:auto;
    padding:75px 0;
  }

  h1 {
    font-size:1em;
  }

  #projects, #about {
    width:100%;
    background-color:#2B4162;
    margin:0;
    text-align:left;
  }

  #projects::after {
    display: block;
    content: "";
    clear: both;
  }

  #projects div, #about div {
    padding:10px;
  }

  #projects div {
    margin:0 0 30px 0;
  }

  #about img {
    width:100%;
  }

  .tile img {
    display:block;
    float:none;
    margin:20px auto;
  }

  #about div img {
    display:block;
    float:none;
    margin:10px auto;
  }

  #sidecontent {
    margin:30px 0;
    width:100%;
    padding:0;
  }

  #sidecontent img {
    width:80%;
    margin:0 auto;
  }

}