@import url(https://fonts.google.com/specimen/Geo?preview.text=Stuff%20I%26apos;m%20into&categoryFilters=Feeling:%2FExpressive%2FStiff&preview.script=Latn);
body{
background-color: grey;
width: 80%;
margin: auto;
}

h2 {
  font-family: rubik glitch;
  font-weight: 10px;
  
}

html {
  background-image: url("https://i.pinimg.com/736x/2c/53/da/2c53da4b48fdeff737aa7e4d377a8280.jpg");
  color: black;
  font-family: Verdana;
  height: 100%
}

head {
  background-color: black;
  font-family: Verdana;
  height: 100%;
}

h1 {
    font-family: 'Tulados';
    src: url("https://www.dafont.com/tulados.font", sans-serif);
    font-size: 40px;
    margin-bottom: 5px
}

p {
 font-family: Geo; 
}



#content {
 background: black; 
 padding-top: 30px;
 margin-top: 10px;
 margin-bottom: 10px;
 border: 10px solid transparent;
 border-image: url(https://i.pinimg.com/1200x/d9/75/47/d97547ec9759b760a08a6ca86df138c7.jpg) 20 round;
}

/*setting the parent container to display as grid*/
.parent{
  display: grid;
  /*there are two ways of setting this up:*/
    /*4 columns split into multiples of 1/5 width*/
      /*grid-template-columns: 1fr 1fr 2fr 1fr;*/
    /*5 rows split into multiples of 1/10 width 
    (typically it's best to use an easily divisible number like 12)*/
     /*grid-template-rows: 1fr 1fr 1fr 5fr 1fr 1fr;*/
    /*the reason it's 1/5 despite being 4 columns is that you add up the total fraction numbers,
    so in this case 1 + 1 + 2 + 1 = 5
    and set it as the denominator or bottom number in a fraction,
    and that's the width of a "1fr" area.
    You can do the same for rows to find the height of a 1fr area.
    To find the width/height of a multiple fr area, you just multiply it by the number you're wanting.
    So for example a 3fr area is the height of 1fr times 3*/

  /*OR*/
    /*having an amount of equal sections and manually describing how long they are*/
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    /*personally I've found this version to be easier for people to understand, but it's up to you*/

  /*gap is just the area between columns/rows
  you can set this individually for columns and rows
  by using column-gap and row-gap*/
  Column-gap: 10px;
  row-gap: 15px;
}

.welcomebox {
  background-color: white;
  /*IMPORTANT: i misremembered about the numbers when I spoke
  to you the other day. It isn't that it starts at 0, it's that it ends
  at +1 to where you think it will. 
  It's the same concept just shifted to the right by 1 unit, sorry*/
  
  /*if you're using grid-column, this is the same thing as using
  both grid-column-start and grid-column-end.
  you don't need to use both and they'll overwrite eachother*/
  grid-column: 1 / 6;
  /*if you think you'll get confused remembering the end points
  you can specify the start point, and how many areas it will "span"
  i.e. how many areas it will cover with its size*/
  grid-row: 1 / span 2;

}


.welcomebox img {
 position: absolute;
 right: 10px;
 top: 1px;
}

.welcomebox p {
  font-size: 20.1px;
  overflow-wrap: break-word;
  width: 90%;
  margin: auto;
}

/*changed to buttons container*/
.buttons-container {
  grid-column: 1 / 6;
  grid-row: 3/4;
  padding-bottom: 20px;
}

.interests {
  grid-column: 2 / 3;
  grid-row: 4 / 9;
  border: 100px;
  background-color: white;

}

.Info {
  grid-column: 3 / 5;
  grid-row: 4 / 9;
  border: 100px;
  background-color: white;
}

.navi {
  grid-column: 1 / 2;
  grid-row: 4 / 10;
  border: 100px;
  background-color: white;
}

.silly {
  grid-column: 5 / 6;
  grid-row: 4 / 10;
  background-color: white;
}

.silly img {
 object-fit: cover;
}

#text {
  text-align: left;
}


ul {
 text-align: left;
 list-style-image: url(https://64.media.tumblr.com/26348881fb200ff950517be50abf3f6c/45b70a72e20d3d24-58/s75x75_c1/df2c2837ed1817975d182af976fd3545d8a95ad0.gifv);
  font-family: Geo;
}

.pagedoll img {
  float: right;
  width: 15%;
  height: auto;
  position: fixed; 
  bottom:5px; 
  right:5px; 
  z-index:8;
  cursor: grab;
}

.blinkies {
  grid-column: 2 / 5;
  grid-row: 9 / 10;
 background-color: white;
 border: 100px;
 border-radius: 5px;
 padding: 20px 10px;
}

img {
 justify-content: center; 
}

footer {
  grid-column: 2 / 5;
  grid-row: 10 / 11;
  margin: auto;
}