/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: lightblue;
  color: black;
  font-family: Verdana;
}
@snowsize: 450px;
@snowfall: 20s;

html {

  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0AgMAAAC2uDcZAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAP///////////zjAO6gAAAAEdFJOUwAuxHKQ3Q8qAAADW0lEQVR42u3dP26jQByGYUbaEe0Wi+jgKj5CirjFp9gGKXAfkOUmW+YOW2QvgdtN45XlHMAgB2aYz955nzrJp2AYM39/SYJrmTLcbDfK9MtvYbod3oXp6fCqTO8iTpdeeaNNP/1VprfKJy7ZPinTLV91AAAAAAAAAAD4kkkH/XfKCQ/TSCd7Tm/K9GHv9+89KdOzrTK9PM/68dpverXfzPnxxu9d1/Sz0ncfXtPreenZszLd+G1pq17Zchfz/nfPyoMyPT0r0802AQDMYZWt9uS7R5jWfOK9y7wEuSYT75z2EuQNph5/QU67IItrJ14S0+5dmv4aQfpBmT7RLUuHIGMO+XiXNNCCcjve1pk2TI9lIkW6lB8AAACITcxTza12qvmXMt3zdCvpX//clelJ/SZ93j+U6bl0J6+VtrQAAAAAAADwxz4r03PpGNtOOr7YLN2D8MNHer1w/4WfA00Xp3tZ8bk03R59DMo2C9PTzscUUHFYmu5j1WN+VqbbhWul/aSbhS2t5UBTFfGBppsEAAAA+Mp7qzJcW/Ik0J7QqZ7ioCy4EmhP6Kq9ZNKX3HXaEQLtwmjlEyfeE/qNrzoAc1+SmPQTaaQHj9U96RqVNF172F4uPe7OSlsbI21pAQAAAPyPjHSlWibt5WgPami0R2QwnhRleqMtn7BXpudn5ROnHTtPOJgFAIA7c58VQgL1wpT7xHxXpZvZ+a73MadH3Adc83+/OaRTrXnP39wrW6456nJzycCqvbCb1QFXHW0rxEtF3NbTun0whWNNJbfKiq7pblUlXa+8232TH9zuabdrZx2XCLmlu1bEdLxvvkvTXVvqXrrj5aJsK81P6fs+S8sAAAAAAAAAAAAAPJKYS3430pP3B0p+R5lOyW8VSn4DAAAAANbt80t3EljpLoqAO0hGLnPA3TMjGzoD7hwa2dAZMH1kY17A9KK/GlrJA6ZfR6XSdHtRpps22DhXOfJwh6sXkx6VA3pWeua7kRZAw0OSlnIK2CyNpf9TTj1oC5xri6dZ8TRrxOknadG8Vnpc0k7a48uULS0AAHhQDFiL5L2yn6o96irm9LzTFraXph/d0t1Oi3QdGcr+OP2646hYKa3VUEmrozRRV0eRfk/EXG1Xes8z7wMAAHAHPgHhchfsTyUPMgAAAABJRU5ErkJggg==) center center repeat scroll, url(data:image/png;base64,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) center center repeat fixed hsl(210, 50%, 75%);   
  
  height: 100%;
  position: relative;
  .background-size(@snowsize auto);
  .animation(snowing @snowfall linear infinite);
}

h1 {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;

  width: 100%;
  line-height: 1em;
  text-align: center;
  
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: hsl(210, 20%, 35%);
  
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
  
// Animation
@-webkit-keyframes snowing {
  from { background-position-y: 0px, 0px; }
    to { background-position-y: (@snowsize * 2), @snowsize; }
}

@-moz-keyframes snowing {
  from { background-position-y: 0px, 0px; }
    to { background-position-y: (@snowsize * 2), @snowsize; }
}

@-ms-keyframes snowing {
  from { background-position-y: 0px, 0px; }
    to { background-position-y: (@snowsize * 2), @snowsize; }
}

@-o-keyframes snowing {
  from { background-position-y: 0px, 0px; }
    to { background-position-y: (@snowsize * 2), @snowsize; }
}

@keyframes snowing {
  from { background-position-y: 0px, 0px; }
    to { background-position-y: (@snowsize * 2), @snowsize; }
}

// Mixins
.animation(@settings) {
-webkit-animation: @settings;
   -moz-animation: @settings;
    -ms-animation: @settings;
     -o-animation: @settings;
        animation: @settings;
}
  
.background-size(@size) {
-webkit-background-size: @size;
   -moz-background-size: @size;
     -o-background-size: @size;
        background-size: @size;
}

:root {
     --dk-color:#bf776b;
     --mid-color:#f2b1a4;
     --lt-color:#ffe8e3;
     --dkest-color:#8e534a;
      --accent:#226051;
}
 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:100%;
     font-family:Verdana;
     font-size:11px;
     background-image:url('https://neothemes.neocities.org/images/roses-bg.gif');
     background-repeat:repeat;
     color:var(--dkest-color);
     padding:1px;
     overflow-y:hidden;
}
body a {
  color:var(--accent);
  font-weight:bold;
  }
 #container {
     max-width:900px;
     margin:0 auto;
     margin-top:15px;
     height:100%;
}
 h1, h3, h5 {
     color:var(--dk-color);
}
 h2, h4, h6 {
     color:var(--accent);
  }
 #header {
     max-width:850px;
     height:105px;
     margin-left:5px;
     margin-right:5px;
     margin:0 auto;
     background-color:var(--lt-color);
     border:1px solid var(--dkest-color);
}
 .title {
     font-size:35px;
     text-align:center;
     font-style:italic;
}
 #wrapper {
     margin:0 auto;
     max-width:860px;
}
.content {
  padding:10px;
  }
 #two-boxes {
     display:flex;
     flex-wrap:wrap;
     max-width:900px;
}
 .box-one, .box-two, .box-three, .box-four, .box-five, .box-six {
     border:1px solid var(--dkest-color);
     background-color:var(--lt-color);
     overflow:auto;
}
 .box-one, .box-two {
     height:200px;
     width:418px;
     margin-left:5px;
}
 .box-one {
     margin-top:5px;
     margin-right:5px;
}
 .box-two {
     margin-top:5px;
     margin-right:5px;
}
 .box-three {
     margin-left:5px;
     margin-top:5px;
     width:260px;
     height:326px;
}
 .box-four {
     margin-top:5px;
     margin-left:5px;
     width:581px;
     height:326px;
}
 .section-title {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:var(--mid-color);
     color:var(--dkest-color);
     font-size:12px;
}
 .nav-wrapper {
     display:flex;
     flex-wrap:wrap;
     width:400px;
     height:50px;
     margin:0 auto;
     justify-content:space-evenly;
     margin-top:5px;
}
 button {
     width:190px;
     height:35px;
     background-color:var(--mid-color);
     color:var(--dkest-color);
     font-weight:bold;
     border:none;
     margin-top:5px;
     margin-right:5px;
}
  button a {
    color:var(--accent);
    font-weight:bold;
  }
  p {
     padding:5px;
}
 p a {
  color:var(--dkest-color);
  font-weight:bold;
  }
 .scroll::-webkit-scrollbar-track {
     background-color: var(--lt-color);
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #f2b1a4;
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: var(--dk-color);
}
 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     background-color:white;
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
textarea {
  background-color:var(--dkest-color);
  color:var(--lt-color);
  font-size:10px;
  }
 @media only screen and (max-width: 860px) {
     html, body {
         overflow:visible;
    }
    #header {
      width:97.6%;
    }
     #container {
         width:100%;
    }
     .box-one, .box-two, .box-three, .box-four, .box-five, .box-six {
         width:100%;
    }
    .box-two {
      order:1;
    }
    .box-one {
      order:2;
    }
     .box-three {
         width:98%;
    }
     .three-boxes {
         width:98%;
    }
     .two-boxes {
         width:100%;
    }
     .wrapper {
         width:100%;
    }
}