2021-07-13 21:54:55 +00:00
|
|
|
|
/* Images make everything better! Well, depending what sort of images... */
|
|
|
|
|
.header_image{
|
2021-07-14 19:36:38 +00:00
|
|
|
|
width: 6vw;
|
2021-07-13 21:54:55 +00:00
|
|
|
|
}
|
2021-07-14 19:36:38 +00:00
|
|
|
|
|
2021-07-13 21:54:55 +00:00
|
|
|
|
.small_icons{
|
|
|
|
|
width: 12px;
|
|
|
|
|
}
|
2021-07-14 19:36:38 +00:00
|
|
|
|
|
2021-07-13 21:54:55 +00:00
|
|
|
|
.about_image{
|
|
|
|
|
width: 125px;
|
|
|
|
|
float: left;
|
|
|
|
|
margin-right: 20px;
|
2021-07-14 19:36:38 +00:00
|
|
|
|
margin-bottom: 20px;
|
2021-07-13 21:54:55 +00:00
|
|
|
|
border-radius: 25px;
|
|
|
|
|
}
|
2021-07-14 19:36:38 +00:00
|
|
|
|
|
2021-07-13 21:54:55 +00:00
|
|
|
|
/* Making text look pretty :3 */
|
|
|
|
|
h1{
|
2021-07-14 19:36:38 +00:00
|
|
|
|
text-decoration-line: underline; /* color */
|
2021-07-13 21:54:55 +00:00
|
|
|
|
text-decoration-style: wavy;
|
|
|
|
|
text-decoration-color: coral;
|
2021-07-14 19:36:38 +00:00
|
|
|
|
font-size: 5.3vw; /* font */
|
2021-07-13 21:54:55 +00:00
|
|
|
|
text-align: center;
|
|
|
|
|
font-family: 'Rubik', sans-serif;
|
2021-07-14 19:36:38 +00:00
|
|
|
|
text-align: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header{
|
|
|
|
|
margin-left: 4vw; /* spacing */
|
|
|
|
|
margin-right: 4vw;
|
2021-07-13 21:54:55 +00:00
|
|
|
|
}
|
2021-07-14 19:36:38 +00:00
|
|
|
|
|
|
|
|
|
h2{
|
|
|
|
|
color: coral; /* color */
|
|
|
|
|
font-size: 40px; /* font */
|
2021-07-13 21:54:55 +00:00
|
|
|
|
text-align: left;
|
|
|
|
|
font-family: 'Rubik', sans-serif;
|
|
|
|
|
}
|
2021-07-14 19:36:38 +00:00
|
|
|
|
|
2021-07-13 21:54:55 +00:00
|
|
|
|
a{
|
2021-07-14 19:36:38 +00:00
|
|
|
|
color: coral; /* color */
|
|
|
|
|
text-decoration: none; /* animation */
|
2021-07-13 21:54:55 +00:00
|
|
|
|
transition: all 0.1s;
|
|
|
|
|
}
|
|
|
|
|
a:hover{
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
2021-07-14 19:36:38 +00:00
|
|
|
|
|
|
|
|
|
#introduction_to_fluffy,
|
|
|
|
|
#about_fluffy,
|
|
|
|
|
#more_on_fluffy,
|
|
|
|
|
#social_media{
|
|
|
|
|
font-size: 18px; /* font */
|
|
|
|
|
margin-left: 4vw; /* spacing */
|
|
|
|
|
margin-right: 4vw;
|
|
|
|
|
margin-bottom: 7vw;
|
2021-07-13 21:54:55 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#font_correction{
|
2021-07-14 19:36:38 +00:00
|
|
|
|
font-family: "Lato", sans-serif; /* font */
|
|
|
|
|
transition: all 5s; /* animation */
|
2021-07-13 21:54:55 +00:00
|
|
|
|
}
|
|
|
|
|
#font_correction:hover{
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#bottom_text_uwu{
|
2021-07-14 19:36:38 +00:00
|
|
|
|
font-family: 'Open Sans', sans-serif; /* font */
|
|
|
|
|
text-align: center; /* spacing */
|
2021-07-13 21:54:55 +00:00
|
|
|
|
}
|
2021-07-14 19:36:38 +00:00
|
|
|
|
|
2021-07-13 21:54:55 +00:00
|
|
|
|
#impotant_creature{
|
2021-07-14 19:36:38 +00:00
|
|
|
|
font-weight: bold; /* Important! */
|
2021-07-13 21:54:55 +00:00
|
|
|
|
color: cadetblue;
|
|
|
|
|
}
|
2021-07-14 19:36:38 +00:00
|
|
|
|
|
|
|
|
|
#fluffy_color{
|
|
|
|
|
font-weight: bold; /* Not so important! */
|
|
|
|
|
color: orange;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#social_media_list{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Spotify player */
|
2021-07-13 21:54:55 +00:00
|
|
|
|
#spotify_player{
|
|
|
|
|
border-radius: 30px;
|
|
|
|
|
transition: all 0.1s;
|
|
|
|
|
}
|
|
|
|
|
#spotify_player:hover{
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
}
|
2021-07-14 19:36:38 +00:00
|
|
|
|
|
2021-07-13 21:54:55 +00:00
|
|
|
|
/* Push all the buttonsssssssssssssss */
|
2021-07-14 19:36:38 +00:00
|
|
|
|
#navigation_button{
|
|
|
|
|
border-color: coral; /* I have no clue what's going on here */
|
|
|
|
|
color: coral; /* Just don't touch and break anything Fluffy */
|
2021-07-13 21:54:55 +00:00
|
|
|
|
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;
|
|
|
|
|
}
|
2021-07-14 19:36:38 +00:00
|
|
|
|
|
|
|
|
|
#navigation_button:hover{
|
2021-07-13 21:54:55 +00:00
|
|
|
|
color: white;
|
|
|
|
|
border-color: white;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2021-07-14 19:36:38 +00:00
|
|
|
|
#navigation_row_top,
|
|
|
|
|
footer{
|
2021-07-13 21:54:55 +00:00
|
|
|
|
text-align: center;
|
2021-07-14 19:36:38 +00:00
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin: 0px 2vw;
|
2021-07-13 21:54:55 +00:00
|
|
|
|
}
|
2021-07-14 19:36:38 +00:00
|
|
|
|
|
|
|
|
|
#footer_button{
|
2021-07-13 21:54:55 +00:00
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
/* Now all the site needs is some legs, hands and a head */
|
|
|
|
|
body{
|
2021-07-14 19:36:38 +00:00
|
|
|
|
color: white; /* font */
|
2021-07-13 21:54:55 +00:00
|
|
|
|
font-family: "Lato", sans-serif;
|
2021-07-14 19:36:38 +00:00
|
|
|
|
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;
|
|
|
|
|
grid-template-areas: "header"
|
|
|
|
|
"#navigation_row_top"
|
|
|
|
|
"#introduction_to_fluffy"
|
|
|
|
|
"#about_fluffy"
|
|
|
|
|
"#more_on_fluffy"
|
|
|
|
|
"#social_media"
|
|
|
|
|
"footer";
|
2021-07-13 21:54:55 +00:00
|
|
|
|
}
|