WebsiteArchive/style.css

/* Images make everything better! Well, depending what sort of images... */
.header_image{
  width: 7vw;
}

.small_icons{
  width: 12px;
}

.about_image{
  width: 160px;
  float: left;
  margin-right: 15px;
  border-radius: 30px;
}

.photos{
  height: 25vw;
  width: 15vw;
  object-fit: cover;
  border-radius: 30px;
  transition-duration: 0.2s;
}

.photos:hover{
  border-radius: 0px;
  width: 30vw;
  object-fit: contain;
  margin: 0px 20px
}

#image_text{
  border-radius: 30px;
  display: flex;
  overflow-x: scroll;
  width: 100%;
}

@media (max-width:621px) { /* heheheheh 621... I'm so childish */
  img.header_image {
    display: none;
  }
}

/* Making text look pretty :3 */
h1{
  text-decoration-line: underline;    /* color */
  text-decoration-style: wavy;
  text-decoration-color: coral;
  font-size: 5.3vw;                    /* font */
  text-align: center;
  font-family: 'Rubik', sans-serif;
  text-align: center;
  justify-content: center;
  align-items: center;
}

header{
  margin-left: 4vw;      /* spacing */
  margin-right: 4vw;
}

h2{
  color: coral;           /* color */
  font-size: 40px;        /* font */
  text-align: left;
  font-family: 'Rubik', sans-serif;
}

a{
  color: coral;           /* color */
  text-decoration: none;  /* animation */
  transition-duration: 0.1s;
}
a:hover{
  font-weight: bolder;
  color: white;
}

p{
  /* font-family: 'Roboto Mono', monospace; */
}

#introduction_to_fluffy,
#about_fluffy,
#more_on_fluffy,
#social_media,
#image_gallery{
  transition-duration: 0.1s;
  font-size: 18px;        /* font */
  margin-left: 3vw;      /* spacing */
  margin-right: 5vw;
  margin-bottom: 6vw;
}

#font_correction{
  font-family: "Lato", sans-serif;    /* font */
  transition: all 5s;                 /* animation */
}
#font_correction:hover{
  color: red;
}

#bottom_text_uwu{
  font-family: 'Open Sans', sans-serif;   /* font */
  text-align: center;                     /* spacing */
}

#impotant_creature{
  font-weight: bold;      /* Important! */
  color: cadetblue;
}

#fluffy_color{
  font-weight: bold;      /* Not so important! */
  color: #FB9645;
}

#social_media_list{
  display: flex;
  flex-direction: column;
}

/* Spotify player */
#spotify_player{
  border-radius: 30px;
  transition: all 0.1s;
}
#spotify_player:hover{
  border-radius: 10px;
}

/* Push all the buttonsssssssssssssss */
#navigation_button{
  border-color: coral;    /* I have no clue what's going on here */
  color: coral;             /* Just don't touch and break anything Fluffy */
  border-radius: 15px;
  display:inline-block;
  padding:3px 3px;
  margin:2px;
  border:2px solid coral;
  box-sizing: border-box;
  margin: 10px;
  transition: all 0.1s;
}

#navigation_button:hover{
  color: white;
  border-color: white;
  border-radius: 10px;
}

#navigation_row_top,
footer{
  text-align: center;
  justify-content: center;
  align-items: center;
}

#footer_button{
  text-align: center;
}
/* Now all the site needs is some legs, hands and a head */
body{
  color: white;                                             /* font */
  font-family: "Lato", sans-serif;
  background: linear-gradient(to bottom,#253652,#354c73);   /* background */
  display: grid;
  grid-template-columns: 100%;                             /* grid */
  grid-template-rows: auto auto auto auto auto auto auto auto;
  grid-template-areas:  "header"
                        "#navigation_row_top"
                        "#introduction_to_fluffy"
                        "#about_fluffy"
                        "#more_on_fluffy"
                        "#image_gallery"
                        "#social_media"
                        "footer";
}