.mainpage {
                 
  display: grid;
  grid-template-columns: 1fr 2fr;
  background-color: transparent;
  
}

.logo {
 position: fixed;
 margin-top: -130px;
 margin-left: 10px;
}

.sidebar {
    position: fixed;
    display: grid;
    grid-template-columns: 1fr
    height: 390px;
    width: 165px;
    background-image: linear-gradient(#fffbe8, #ffbaef);
    border: 30px solid transparent;
    border-image: url("png/pinklace.png") 34 round;
    background-clip: padding-box;
    margin-top: 200px;
    margin-left: 1610px;
    justify-content: center;

}

.button {
    background-color: #f2bed8;
    border: 3px solid #ef5ba1;
    border-radius: 6px;
    color: #ef5ba1;
    text-align: center;
    display: inline-block;
    margin-left: -35px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    width: 105px;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6);
}

.button:hover {
    background-color: #E65787;
    border-radius: 8px;
    color: white;
    width: 105px;
    box-shadow: 10px 10px 9px rgba(0,0,0,0.6);
    transition: 0.2s ease
}

.honey {
 position: fixed; 
 margin-top: 680px;
 margin-left: -300px;
}

.haruhi {
  position: fixed;
  margin-top: 730px;
  margin-left: 620px;
}


.body {
    width: 640px;
    background-color: #fffbe8;
    background-image: linear-gradient(#fffbe8, #ffbaef);
    border: 40px solid transparent;
    border-image: url("png/pinklace.png") 34 round;
    background-clip: padding-box;
    text-align: center;
    margin: 12px;
    margin-left: 900px;
    padding: 30px;
}




body {
    font-family: "sprocket";
    font-size: 14px;
    src: url("fonts/Sprocket Regular.woff") format("truetype");
    background-image: url('https://gifdb.com/images/high/cherry-blossom-ouran-high-school-host-club-z52lux5fgbijhi8p.gif');
    background-size: cover;
}

@font-face {
  font-family: "sprocket";
    font-size: 14px;
    src: url("fonts/Sprocket Regular.woff") format("truetype");
}

h1 {
    font-family: "sprocket";
    font-size: 3em;
    color: #ef5ba1;
}


.warning {
    color: white;
    font-size:0.69rem;
    background-color: #f44336;
    margin: 5px;
    
    
}



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

a:hover {
    color: #085435;
}

.table {
    margin: 0px 0px 0px 200px;
    background-color: #ef5ba1;
    padding: 1px 1px 1px 1px;
}

.star {
    width: 15px;
}

/*

  MISCELLANEOUS
    flexbox = adjusts content based on browser size

  ACRONYMS
    html = hypertext markup language
    css = cascading styles sheets
  
  CSS CODE FORMATTING
    selector {
            property: valueunit;
            property: valueunit;
    }
    
  UNITS (not necessary when value is 0)
    px = pixels
    em = calculated size of a font
    pt = points
    % = percentages (duh)
    
  COLORS
    color
    rgb(255, 0, 0)
    rgb(100%,0%,0%)
    #ff0000
    #f00
    
  FONTS
    font-size = #px
    font-weight = normal or bold text
    font-style = normal or italic text
    font-variant = small caps
    
  TEXT
    text-decoration = underline, overline, strikethrough
    text-transform = capitalize, uppercase, lowercase, none
    letter-spacing = #em
    word-spacing = #em
    text-align = left, right, center, justify
    text-indent = indent first line of paragraph
    
  MARGIN 
    The space outside something
    margin-top/right/bottom/left = specific dimensions
    
  PADDING 
    The space inside something
    padding-top/right/bottom/left = specific dimensions
    
  BORDER 
    border-style = solid, dotted, dashed, double, groove, ridge, inset, outset
    border-width = #px
    border-left/right/top/bottom-width = #px
    border-color = ...color.
    
  
*/