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: 500px;
  width: 300px;
  object-fit: cover;
  border-radius: 30px;
  transition-duration: 0.2s;
  transition: all 0.2s;
}

@media (min-width:621px) { /* heheheheh 621... I'm so childish */
  .photos:hover{
    width: 500px;
    margin: 0 10px;
  }
}

#image_text{
  border-radius: 30px;
  display: flex;
  overflow-x: scroll;
  -ms-overflow-style: none; /* IE and EDGE */
  scrollbar-width: none;  /* Firefogie */
  width: 100%;
}

#image_text::-webkit-scrollbar {
  display: none;  /* everything else */
}

@media (max-width:621px) { /* heheheheh 621... again..... :3 */
  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,
#other_sections{
  transition-duration: 0.1s;
  font-size: 18px;        /* font */
  margin-left: 3vw;      /* spacing */
  margin-right: 3vw;
  margin-bottom: 6vw;
}

#about_text{
  text-align: justify;
}

#font_correction{
  font-family: "Lato", sans-serif;    /* font */
}

#footer_text{
  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;
}

@media (max-width:340px){ /* heheheheh 621... I'm so childish */
  #extra_e{
    display: none;
  }
}
/* Now all the site needs is some legs, hands and a head */
html{
  background: #354c73;
}

@media (min-width:1300px) {
  body {
    border-radius: 30px;
    margin: 50px auto 50px auto;
    background: #253652;
  }
}

@media (max-width:1300px) { /* heheheheh 621... again..... :3 */
  body {
    border-radius: 0;
    margin: 0;
    background: linear-gradient(to bottom, #253652, #354c73 );
  }
}

body{
  border: 0px solid;
  max-width: 1300px;
  color: white;                                             /* font */
  font-family: "Lato", sans-serif;
  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";
}