You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
584 lines
11 KiB
CSS
584 lines
11 KiB
CSS
/* @font-face{
|
|
font-family: "subscriber";
|
|
src: url("/static/fonts/SUBSCRIBER-Regular.otf") format("opentype"); */
|
|
/* } */
|
|
/* CSS Reset */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body{
|
|
|
|
}
|
|
/* Add media queries for different screen sizes */
|
|
@media screen and (max-width: 600px) {
|
|
/* Adjust styles for screens smaller than 600px wide */
|
|
.buttoncontainer {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.backgroundgifs {
|
|
position:relative;
|
|
}
|
|
|
|
.fullcontainer {
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
padding-bottom:24em;
|
|
}
|
|
|
|
#welcomepage{
|
|
/* background: linear-gradient(90deg, rgba(153,150,244,1) 0%, rgba(128,205,229,1) 50%, rgba(147,102,237,1) 100%); */
|
|
background-color: #050725;
|
|
}
|
|
|
|
#gallery{
|
|
background-image: radial-gradient(circle, rgba(170,159,255,1) 0%, rgba(128,132,229,1) 50%, rgba(5,7,37,1) 100%);
|
|
background-repeat: repeat-x;
|
|
margin-top: 10em;
|
|
margin-bottom: 34em;
|
|
background-size: auto;
|
|
}
|
|
|
|
#swiperpages{
|
|
background-image: radial-gradient(circle, rgba(170,159,255,1) 0%, rgba(128,132,229,1) 50%, rgba(5,7,37,1) 100%);
|
|
margin-bottom:2em;
|
|
}
|
|
|
|
p{
|
|
text-align: center;
|
|
font-family: Inter,sans-serif;
|
|
font-size: 1.5em;
|
|
position: absolute;
|
|
left: 50%;
|
|
width: 1680px;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
|
|
.descriptioncontainer{
|
|
color: #b456ff;
|
|
margin-top: 8.5em;
|
|
text-align: justify;
|
|
width: 80%;
|
|
font-size: 1.2em;
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
font-family: monospace;
|
|
}
|
|
|
|
|
|
#description_color{
|
|
color:#87b5e7;
|
|
}
|
|
|
|
|
|
.header{
|
|
width:99%;
|
|
height: 10em;
|
|
position:absolute;
|
|
margin-bottom: 7em;
|
|
top:0;
|
|
}
|
|
|
|
.headerimage {
|
|
margin-top: 21em;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
position: absolute;
|
|
max-width: 100%;
|
|
height: auto;
|
|
width:74em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cooltext{
|
|
position: absolute;
|
|
text-align: center;
|
|
margin-left: 20em;
|
|
margin-top: 3.3em;
|
|
color: pink;
|
|
font-family: "Brush Script MT", cursive;
|
|
font-size: 2.5em;
|
|
text-shadow: 2px 2px #ff0000;
|
|
|
|
}
|
|
|
|
|
|
#nyancat{
|
|
margin-top: 13em;
|
|
margin-left: 4em;
|
|
}
|
|
#babyoncat{
|
|
margin-left: -3em;
|
|
margin-top: -1em;
|
|
}
|
|
#confusedgirl{
|
|
margin-left: 0em;
|
|
margin-top: 6em;
|
|
width: 12em;
|
|
}
|
|
|
|
#doge{
|
|
margin-left: 3em;
|
|
margin-top: 14em;
|
|
}
|
|
#angrydog{
|
|
margin-left: -6em;
|
|
margin-top: -5em;
|
|
width: 13em;
|
|
}
|
|
#travolta{
|
|
margin-left: -4em;
|
|
margin-top: -5em;
|
|
}
|
|
#simpsons{
|
|
margin-left: 7em;
|
|
margin-top: 9em;
|
|
}
|
|
#heartrain{
|
|
margin-left: 1em;
|
|
margin-top: -26em;
|
|
width: 13em;
|
|
}
|
|
#dance{
|
|
margin-left: -19em;
|
|
margin-top: -5em;
|
|
}
|
|
#happymanhat{
|
|
margin-left: 6em;
|
|
margin-top: -29em;
|
|
}
|
|
#girldance{
|
|
margin-left: 2em;
|
|
margin-top: 3em;
|
|
}
|
|
#heartjump{
|
|
margin-left: 13em;
|
|
margin-top: 0em;
|
|
width: 10em;
|
|
}
|
|
#takemymoney{
|
|
margin-left: 1em;
|
|
margin-top:1em;
|
|
}
|
|
|
|
.buttonback {
|
|
background-color: #050725;
|
|
border-radius: 8px;
|
|
border-style: none;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
height: 3rem;
|
|
padding: 0 1.6rem;
|
|
text-align: center;
|
|
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
|
|
transition: all .5s;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
margin:1em;
|
|
position: absolute;
|
|
top: 0;
|
|
z-index:10;
|
|
color: #a178ee;
|
|
}
|
|
|
|
.buttonback:hover {
|
|
box-shadow: rgba(115, 102, 220, 0.5) 0 10px 30px;
|
|
transition-duration: .1s;
|
|
z-index:10;
|
|
}
|
|
|
|
|
|
|
|
|
|
.buttoncontainer {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 27em;
|
|
justify-content: center;
|
|
position:relative;
|
|
}
|
|
|
|
|
|
.gotobutton {
|
|
background-image: linear-gradient(90deg, rgba(153,150,244,1) 0%, rgb(62 151 207 / 55%) 50%, rgb(95 52 182 / 57%) 100%);
|
|
border-radius: 8px;
|
|
border-style: none;
|
|
box-sizing: border-box;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
height: 3rem;
|
|
padding: 0 1.6rem;
|
|
text-align: center;
|
|
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
|
|
transition: all .5s;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
margin:1em;
|
|
}
|
|
|
|
.gotobutton:hover {
|
|
box-shadow: rgba(115, 102, 220, 0.5) 0 1px 30px;
|
|
transition-duration: .1s;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.gotobutton {
|
|
padding: 0 2.6rem;
|
|
}
|
|
}
|
|
|
|
#gotobuttoncolor{
|
|
color:black;
|
|
}
|
|
|
|
.thesisbutton {
|
|
background-image: linear-gradient(90deg, rgba(153,150,244,1) 0%, rgb(62 151 207 / 55%) 50%, rgb(95 52 182 / 57%) 100%);
|
|
border-radius: 8px;
|
|
border-style: none;
|
|
box-sizing: border-box;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
height: 3rem;
|
|
padding: 0 1.6rem;
|
|
text-align: center;
|
|
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
|
|
transition: all .5s;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
margin:1em;
|
|
}
|
|
#thesiscolor{
|
|
color:black;
|
|
}
|
|
|
|
.thesisbutton:hover {
|
|
box-shadow: rgba(115, 102, 220, 0.5) 0 10px 30px;
|
|
transition-duration: .1s;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.thesisbutton {
|
|
padding: 0 2.6rem;
|
|
}
|
|
}
|
|
|
|
.buttoncontainerslides{
|
|
position: absolute;
|
|
display: block;
|
|
min-width: 99%;
|
|
}
|
|
|
|
a:-webkit-any-link {
|
|
color: #a178ee;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.printbutton {
|
|
background-color: #050725;
|
|
border-radius: 8px;
|
|
border-style: none;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
height: 3rem;
|
|
padding: 0 1.6rem;
|
|
text-align: center;
|
|
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
|
|
transition: all .5s;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
margin:1em;
|
|
position: absolute;
|
|
top: 0;
|
|
right:0;
|
|
z-index:10;
|
|
color: #a178ee;
|
|
}
|
|
|
|
.printbutton:hover {
|
|
box-shadow: rgba(115, 102, 220, 0.5) 0 10px 30px;
|
|
transition-duration: .1s;
|
|
z-index:10;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.printbutton {
|
|
padding: 0 2.6rem;
|
|
z-index:10;
|
|
}
|
|
}
|
|
a:link {
|
|
color: #a178ee;
|
|
}
|
|
|
|
.grid{
|
|
display: grid;
|
|
justify-content: space-between;
|
|
grid-template-columns: auto auto auto auto auto;
|
|
align-items: center;
|
|
justify-items: center;
|
|
/* margin-left:2.5em;*/
|
|
/* margin-right: 2.5em;*/
|
|
margin-bottom: 8em;
|
|
margin-top: 29em;
|
|
/* gap: 70px;*/
|
|
grid-row-gap: 70px;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.gifgrid{
|
|
display: grid;
|
|
justify-content: space-between;
|
|
grid-template-columns: auto auto auto;
|
|
margin-bottom: 8em;
|
|
margin-top: 29em;
|
|
gap: 67px;
|
|
position: relative;
|
|
z-index: -10;
|
|
margin-top: 37em;
|
|
filter: blur(6px);
|
|
}
|
|
|
|
|
|
/* Styles for bigger-sized screens */
|
|
@media (min-width: 1025px) {
|
|
.grid {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
}
|
|
/* Styles for big-sized screens */
|
|
@media (max-width: 1024px) {
|
|
.grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
/* Styles for medium-sized screens */
|
|
@media (max-width: 820px) {
|
|
.grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
#travolta{
|
|
margin-left: -42em;
|
|
margin-top: 43em;
|
|
}
|
|
#confusedgirl{
|
|
margin-left: -44em;
|
|
margin-top: 46em;
|
|
width: 12em;
|
|
}
|
|
#dance {
|
|
margin-left: -28em;
|
|
margin-top: 23em;
|
|
}
|
|
}
|
|
|
|
/* Styles for smaller screens */
|
|
@media (max-width: 640px) {
|
|
.grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
margin-top: 19em;
|
|
margin-left:0;
|
|
}
|
|
.swiper-container{
|
|
min-width: 100%;
|
|
}
|
|
.alert{
|
|
font-size:auto;
|
|
}
|
|
|
|
.buttoncontainer{
|
|
position: absolute;
|
|
justify-content: center;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
width: 1em;
|
|
margin-top: 15em;
|
|
}
|
|
.gotobutton{
|
|
position:absolute;
|
|
right:1;
|
|
width:8.9em;
|
|
padding:0;
|
|
}
|
|
.thesisbutton{
|
|
position:absolute;
|
|
left:1;
|
|
width:8.9em;
|
|
padding:0;
|
|
}
|
|
.headerimage{
|
|
width: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
margin-top:9em;
|
|
}
|
|
#headerimagegallery{
|
|
margin-top: 0;
|
|
max-width: 100%;
|
|
width: 478px;
|
|
}
|
|
.descriptioncontainer{
|
|
margin-top: 34.5em;
|
|
position: relative;
|
|
}
|
|
.gifgrid{
|
|
grid-template-columns: none;
|
|
margin-top: 9em;
|
|
left: 3em;
|
|
}
|
|
}
|
|
|
|
.overviewimage{
|
|
object-fit: contain;
|
|
width: 200px;
|
|
/* box-shadow: 0 40px 80px #834b8b; */
|
|
box-shadow: 0 40px 80px #a27cc5;
|
|
background-image: url(/assets/glitter-stars.gif);
|
|
height:200px;
|
|
padding:7px;
|
|
}
|
|
|
|
|
|
|
|
swiper-container{
|
|
text-align: center;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 50%;
|
|
height: 90%;
|
|
top: 5em;
|
|
}
|
|
|
|
|
|
|
|
swiper-slide{
|
|
text-align: center;
|
|
}
|
|
.sliderimage{
|
|
width: 100%;
|
|
display: block;
|
|
max-height: 95vH;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
object-fit: contain;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.meme{
|
|
text-align: center;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
position: absolute;
|
|
object-fit: contain;
|
|
transform: translate(-50%, -50%);
|
|
top: 50%;
|
|
left: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
.memecontainer{
|
|
text-align: center;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 100%;
|
|
height: 90%;
|
|
top: 5em;
|
|
position: relative;
|
|
}
|
|
|
|
.extracontent{
|
|
background: green;
|
|
}
|
|
|
|
.alert {
|
|
background-color: transparent;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
|
|
font-weight: 500;
|
|
height: 4rem;
|
|
text-align: center;
|
|
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
|
|
transition: all .5s;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
color: #a178ee;
|
|
position: relative;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
width: 92%;
|
|
height: 100%;
|
|
justify-content: center;
|
|
display: flex;
|
|
backdrop-filter: blur(10px);
|
|
|
|
}
|
|
.alert:hover {
|
|
transition-duration: .1s;
|
|
z-index:10;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.alert {
|
|
padding: 0 2.6rem;
|
|
z-index:10;
|
|
}
|
|
}
|
|
|
|
#alerttext{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
|
|
:root {
|
|
--swiper-navigation-size: 60;
|
|
--swiper-theme-color: rgb(0, 89, 255);
|
|
--swiper-navigation-color: var(--swiper-theme-color);
|
|
--swiper-pagination-color: var(--swiper-theme-color);
|
|
}
|
|
|
|
|