172 lines
2.7 KiB
CSS
172 lines
2.7 KiB
CSS
/* GENERAL */
|
|
body {
|
|
margin:0;
|
|
height:100vh;
|
|
background:
|
|
linear-gradient(
|
|
135deg,
|
|
hsl(279deg 33% 47%) 0%,
|
|
hsl(279deg 40% 33%) 39%,
|
|
hsl(279deg 62% 19%) 61%,
|
|
hsl(279deg 94% 7%) 100%
|
|
);
|
|
background-size:300% 100%,cover;
|
|
animation:change 4s linear infinite;
|
|
animation-direction: alternate;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
@keyframes change {
|
|
from {
|
|
background-position: right,center;
|
|
}
|
|
}
|
|
|
|
/* TEXT */
|
|
* {
|
|
font-family: Lato, sans-serif;
|
|
color: white;
|
|
}
|
|
|
|
h1, h2 {
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
margin: 5vw 0 5vw 0;
|
|
font-size: 8vw;
|
|
}
|
|
|
|
|
|
h2 {
|
|
font-size: 4vw;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 3vw;
|
|
}
|
|
|
|
p {
|
|
font-size: 2vw;
|
|
}
|
|
|
|
.dark-text {
|
|
color: #4A245E;
|
|
}
|
|
|
|
.light-text {
|
|
color: white;
|
|
}
|
|
|
|
/* NAV-BAR */
|
|
.bg-light {
|
|
background-color: white !important;
|
|
padding: 0;
|
|
}
|
|
|
|
.navbar-brand {
|
|
padding-left: .5vw;
|
|
color: #4A245E;
|
|
font-size: 2vw;
|
|
font-weight: bold;
|
|
|
|
animation: 500ms;
|
|
}
|
|
|
|
.navbar-toggler {
|
|
border: none;
|
|
}
|
|
|
|
.navbar-toggler:focus {
|
|
box-shadow: none;
|
|
border:none;
|
|
}
|
|
|
|
.navbar-light .navbar-toggler-icon {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(74, 36, 94, 1)' stroke-width='3.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.navbar-brand:hover {
|
|
color: #4A245E;
|
|
}
|
|
|
|
.nav-link {
|
|
padding: 1.5vw;
|
|
}
|
|
|
|
.nav-link, .nav-link > .nav-item {
|
|
color: #4A245E;
|
|
font-size: 1.3vw;
|
|
|
|
animation: 500ms;
|
|
}
|
|
|
|
.nav-link:hover, .nav-link:hover > .nav-item {
|
|
color: white;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background-color: #4A245E;
|
|
}
|
|
|
|
/* MISC */
|
|
|
|
.custom-container {
|
|
align-content: center;
|
|
|
|
padding: 5vw;
|
|
|
|
width: 90% !important;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.bar {
|
|
display: block;
|
|
width: 100%;
|
|
border-top: 5px #4A245E solid;
|
|
padding-bottom: 1vw;
|
|
}
|
|
|
|
.card-text {
|
|
font-size: 2vw;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
h1 {
|
|
font-size: 12vw;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 8vw;
|
|
}
|
|
|
|
h3, .navbar-brand {
|
|
font-size: 6vw;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 4vw;
|
|
}
|
|
|
|
p, .nav-link, .nav-link > .nav-item {
|
|
font-size: 3vw;
|
|
}
|
|
|
|
.nav-link > .nav-item {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
/*Buttons*/
|
|
.btn {
|
|
background-color: #4A245E;
|
|
border: none;
|
|
transition: background-color 300ms;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: #673283;
|
|
}
|