/* style.css */
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 25px;
  background-color: #666666;
  /*
  background-image: url(../images/full-bloom.png);
  background-repeat: repeat;
  background-attachment: fixed;
  */
  color: #BBBBBB;
  font-family: 'Nanum Gothic', sans-serif;
}

#wrapper {
    min-height: 100%;
    position: relative;
}

#content {
    padding-bottom: 100px;    /* height of footer */
    overflow: auto;
}

footer {
    height: 100px; 
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

a {
  text-decoration: none;
  color: LightSalmon;
}

p {
  padding: 5px 15px 15px 15px;
}

.site-header {
  margin-bottom: 20px;
}

#site-title {
  font-size: 33px;
  font-weight: bold;
}

.indented {
  margin-top: 10px;
  padding-left: 20px;
}

.lighter {
  color: lightgrey;
}

#copyright {
  float: right;
}

#go-left {
  float: left;
}

.top-right {
  width: 400px;
  position: absolute;
  top: 0px;
  right: 0px;
}

.centered {
  width: 1224px;
  height: 883px;
  background-color: lightgrey;
  position:absolute; /*it can be fixed too*/
  left:0; right:0;
  top:0; bottom:0;
  margin:auto;
  /*this to solve "the content will not be cut when the window is smaller than the content": */
  max-width:100%;
  max-height:100%;
  overflow:auto;
}

.centered-img {
  width: 1024px;
  height: 683px;
  background-color: lightgrey;
  position:absolute; /*it can be fixed too*/
  left:0; right:0;
  top:0; bottom:0;
  margin:auto;
  /*this to solve "the content will not be cut when the window is smaller than the content": */
  max-width:100%;
  max-height:100%;
  overflow:auto;
}

.flower-frame {
  float: left;
  margin: 15px;
  padding: 20px;
  background-color: white;
  border-width: 100px;
  border-style: solid;
  border-color: lightgrey;
}

.black-text {
  color: black;
}

@media screen and (max-width: 1355px) {
  body {
    padding: 5px !important;
  }
  .flower-frame img {
    width: 99% !important;
    height: auto !important;
  }
  .flower-frame {
    width: 65% !important;
    margin: 5px !important;
    padding: 10px !important;
    border-width: 40px !important;
  }
}