/* 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 {
  margin: 0;
background: linear-gradient(to bottom, #6dddf9 0%,#12a2fc 100%);
  background-repeat:no-repeat;
  font-family:work sans;
  }
  
/*Everything goes inside here.*/
.wrapper {
  width: 900px;
  margin: 0 auto;
  background-color:#12A2FC;
  padding:10px;
  }
  
.sidebar-img, .footer, .title, .links, .box {
  margin-top: 25px;
  }
  
.title, .links, .footer {
  text-align: center;
}
.title .box {
  background: linear-gradient(to bottom, #feffff 0%,#d2ebf9 100%);
  border:2px solid white;
  padding-top:1px;
}
.title .box h2 {
  font-family: Albert Sans;
  color:#12A2FC;
  font-weight:900;
  font-size:200%;
  line-height:2px;
}
.title .box span {
  color:#D61C2C;
font-family:work sans;
  font-weight:500;



}
/*Navigation links.*/

/*Basic box code that is used for all content boxes on the page.*/
.box {
  border: 2px solid lightblue;
  padding: 0.5em 1em;
  background-color:white;
  
  
  }


/*Goes inside the box class. Not given any style by default, but can be used for stuff like fancy borders.*/
.inner {

  }
.updates {
  text-align:center;
  background-color:teal;
  color:white;
  border:2px solid teal;
  margin-top:20px;
  border-radius:50px;
  font-family:albert sans;
 line-height:5px;
  font-size: 2rem;
  
}

.mood {
  background-color:teal;
  text-align:center;
  border-radius:10px 10px 0px 0px;
  padding-bottom:10px;
 
}
/*Prevent image overflow.*/
.box img, .sidebar img {
  max-width: 100%;
  height: auto;
  }
  
/*Wrapper for the sidebar.*/
.sidebar {
  width: 200px;
  float: left;
  }
  
/*Container for the sidebar image.*/
.sidebar-image {
  border: 1px solid white;
  }
  
/*Remove extra padding line at the bottom of the image.*/
.sidebar-image img {
  display: block;
  }
  
/*This is where the title, navbar, and main content all go.*/
.main-wrapper {
  margin-left: 225px;
  }
  
/*Two columns by default. The "single-column" class can be added to make it one column.*/
.main {
  columns: 1;
  column-gap: 25px;
 
  }
  
/*Make sure boxes don't spread over multiple columns.*/
.main .box {
  display:inline-block ;
  }
  
.single-column {
  columns: 1;
 
}
.beforepics {
  text-align:center;
  width:100%;
 
}
.beforepics iframe {

}
.beforepics table {
  margin-top:20px;
display:inline-block;
 background-color:white;
  text-align:center;
  font-size:12px;
  padding:0px;
    padding-right:10px;
  padding-left:10px;
  border-radius:10px;
  border:2px solid lightblue;
 
}
.secondclass {
  background-color:white;
  border:1px solid white;
  display:block;
  margin-top:10px;
  padding:15px;
}
.newblog {
  animation: blinker 1.5s linear infinite;
                color: blue;
                font-family: sans-serif;
            }
            @keyframes blinker {
                50% {
                    opacity: 0;
                }
}
@media(max-width:915px) {
  .wrapper {    
    width: 95%;
    }
    
  .main-wrapper {
    width: calc(100% - 225px);
    }
  }
  
@media (orientation: portrait), (max-width: 480px) {
  .wrapper {
    width: 100%;
    }
  
  .main-wrapper, .sidebar, .footer {
    margin: 0 auto;
    width: 90%;
    }
  
  .sidebar {
    float: none;
    display: block;
    }

  .sidebar-image {
    margin: 0 auto;
    width: 100%;
    margin-top:25px;
    }

  .sidebar .sidebar-image img {
    width: 100%;
    }
    
  .footer {
    margin-bottom: 25px;
    }

  }
  }