mirror of
https://github.com/michivonah/website-v2.git
synced 2025-12-22 20:46:29 +01:00
1177 lines
22 KiB
CSS
1177 lines
22 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
|
|
|
|
html{scroll-behavior: smooth;}
|
|
|
|
body{
|
|
margin: 0;
|
|
padding: 0;
|
|
color: var(--color);
|
|
background: var(--background);
|
|
text-align: left;
|
|
font-family: "open sans", sans-serif;
|
|
scroll-behavior: smooth;
|
|
overflow-x: hidden;
|
|
--theme1: #3498db;
|
|
--theme2: #2980b9;
|
|
--red: #e74c3c;
|
|
--background: #181818;
|
|
--color: #fff;
|
|
--margin: 15px;
|
|
--padding: 15px;
|
|
--borderRadius: 12px;
|
|
--font: "open sans", sans-serif;
|
|
--transition: all 300ms linear;
|
|
--buttonRadius: 4px;
|
|
/*cursor: url(assets/blob1.svg), auto;*/
|
|
}
|
|
|
|
#content{
|
|
margin: 0;
|
|
}
|
|
|
|
.inner-width{
|
|
width: 100%;
|
|
max-width: clamp(1100px, 90%, 1250px);
|
|
margin: auto;
|
|
}
|
|
|
|
/* Loading screen & effects*/
|
|
#loadingScreen{
|
|
display: flex;
|
|
background: var(--theme1);
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
z-index: 1001;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
#loader{
|
|
width: 60px;
|
|
height: 60px;
|
|
background: none;
|
|
border: 8px solid #fff;
|
|
border-radius: 50%;
|
|
border-top-color: transparent;
|
|
border-style: dotted;
|
|
animation: loading 1000ms infinite;
|
|
}
|
|
|
|
@keyframes loading{
|
|
from{
|
|
transform: rotate(0deg);
|
|
}
|
|
to{
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.loadEffect{
|
|
background: #eee;
|
|
background-image: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 33%, rgba(238,238,238,1) 62%, rgba(221,221,221,1) 100%);;
|
|
background-size: 400%;
|
|
animation: loadEffect 1500ms infinite;
|
|
color: transparent;
|
|
}
|
|
|
|
@keyframes loadEffect{
|
|
from{
|
|
background-position: 100%;
|
|
}
|
|
to{
|
|
background-position: 0;
|
|
}
|
|
}
|
|
|
|
/* Navbar */
|
|
#navbar{
|
|
width: 100%;
|
|
height: 56px;
|
|
background: transparent;
|
|
color: #fff;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
transition: all 300ms linear;
|
|
user-select: none;
|
|
}
|
|
|
|
#navbar img{
|
|
width: auto;
|
|
height: 36px;
|
|
margin: 10px 15px 15px 15px;
|
|
float: left;
|
|
}
|
|
|
|
#navbar-links{
|
|
float: right;
|
|
padding: 15px;
|
|
}
|
|
|
|
#navbar-links a{
|
|
margin: 0 5px;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.navLink{
|
|
position: relative;
|
|
}
|
|
|
|
.navLink::after{
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: #fff;
|
|
transition: all 250ms;
|
|
transform: scaleX(0);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.navLink:hover{
|
|
text-decoration: none;
|
|
}
|
|
|
|
.navLink:hover::after{
|
|
transform: scaleX(0.5);
|
|
}
|
|
|
|
#toggleNav{
|
|
text-align: right;
|
|
color: #fff;
|
|
margin: 10px 15px;
|
|
display: none;
|
|
float: right;
|
|
font-size: 26px;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
#toggleNav:hover{
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
#closeNavbarPlaceholder{
|
|
display: none;
|
|
}
|
|
|
|
/* Home */
|
|
#home{
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-image: url("assets/bg_grey.svg");
|
|
background-size: cover;
|
|
background-repeat: repeat-x;
|
|
background-position: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
#home h1{
|
|
font-weight: 700;
|
|
background: linear-gradient(90deg, rgba(150,237,32,1) 0%, rgba(0,212,255,1) 75%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
#home h1:hover{
|
|
background: linear-gradient(90deg, rgba(150,237,32,1) 0%, rgba(0,212,255,1) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
#home img{
|
|
width: 100%;
|
|
height: auto;
|
|
/*background-image: url("blob1.svg");
|
|
background-position: right;
|
|
background-repeat: no-repeat;*/
|
|
}
|
|
|
|
#home button{
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 40px;
|
|
margin: var(--margin) 0;
|
|
padding: var(--padding);
|
|
background: transparent;
|
|
color: #fff;
|
|
border: 2px solid #fff;
|
|
border-radius: var(--buttonRadius);
|
|
font-size: 1rem;
|
|
transition: all 200ms linear;
|
|
}
|
|
|
|
#home button:hover{
|
|
background: var(--theme2);
|
|
border: 2px solid var(--theme2);
|
|
}
|
|
|
|
/* About Section */
|
|
#aboutContent{
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-around;
|
|
align-content: space-around;
|
|
}
|
|
|
|
#aboutText, #aboutImg{
|
|
width: 100%;
|
|
height: auto;
|
|
text-align: justify;
|
|
}
|
|
|
|
#aboutImg img{
|
|
width: 80%;
|
|
height: auto;
|
|
user-select: none;
|
|
text-align: center;
|
|
margin: 0 10%;
|
|
}
|
|
|
|
#aboutSocial a{
|
|
color: #fff;
|
|
margin: 10px;
|
|
font-size: 26px;
|
|
transition: var(--transition);
|
|
outline: none;
|
|
}
|
|
|
|
#aboutSocial a:hover{
|
|
color: var(--theme1);
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
#aboutSocial a:hover:nth-child(1){ color: #e4405f; }
|
|
|
|
#aboutSocial a:hover:nth-child(2){ color: #1DA1F2; }
|
|
|
|
#aboutSocial a:hover:nth-child(3){ color: #4267B2; }
|
|
|
|
#aboutSocial a:hover:nth-child(4){ color: #f1c40f; }
|
|
|
|
#aboutSocial a:hover:nth-child(5){ color: #1DB954; }
|
|
|
|
#aboutSocial a:hover:nth-child(6){ color: #0072b1; }
|
|
|
|
/* Socialmedia Section */
|
|
#socialmedia{
|
|
margin: auto;
|
|
}
|
|
|
|
#socialSelection{
|
|
margin: 10px auto 0 auto;
|
|
}
|
|
|
|
#socialSelection input[type=radio]{
|
|
display: none;
|
|
}
|
|
|
|
#socialSelection label{
|
|
font-size: 1.1rem;
|
|
border: none;
|
|
border-bottom: 2px solid var(--theme1);
|
|
user-select: none;
|
|
transition: all 250ms linear;
|
|
padding: 5px 10px;
|
|
margin: 10px 0 10px -5px;
|
|
}
|
|
|
|
#socialSelection label:hover, .smRadioInput:checked + .smRadioLabel{
|
|
background: var(--theme1);
|
|
transition: all 200ms linear;
|
|
border-top-right-radius: var(--borderRadius);
|
|
border-top-left-radius: var(--borderRadius);
|
|
}
|
|
|
|
.socialTab{
|
|
display: none;
|
|
background: var(--theme1);
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 200px;
|
|
margin: 0 0 0 -5px;
|
|
padding: var(--padding);
|
|
border-bottom-right-radius: var(--borderRadius);
|
|
border-bottom-left-radius: var(--borderRadius);
|
|
}
|
|
|
|
.socialTab img{
|
|
max-width: 80%;
|
|
}
|
|
|
|
.socialTab button{
|
|
width: 80%;
|
|
height: auto;
|
|
min-height: 40px;
|
|
margin: var(--margin);
|
|
background: var(--theme2);
|
|
color: #fff;
|
|
border: 2px solid transparent;
|
|
border-radius: var(--buttonRadius);
|
|
font-size: 1rem;
|
|
transition: all 200ms linear;
|
|
}
|
|
|
|
.socialTab button:hover{
|
|
background: var(--theme2);
|
|
border: 2px solid #fff;
|
|
}
|
|
|
|
#insta1Container{
|
|
width: 100%;
|
|
height: auto;
|
|
margin: auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
flex-grow: 1;
|
|
justify-content: space-around;
|
|
align-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#insta1Container div{
|
|
width: 50%;
|
|
}
|
|
|
|
#insta1Container img{
|
|
border-radius: var(--borderRadius);
|
|
}
|
|
|
|
#insta2Container{
|
|
width: 100%;
|
|
height: auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
flex-grow: 1;
|
|
justify-content: space-around;
|
|
align-content: stretch;
|
|
align-items: stretch;
|
|
}
|
|
|
|
#insta2Container div{
|
|
width: 100%;
|
|
align-self: center;
|
|
}
|
|
|
|
#insta2Container div:nth-child(1){
|
|
padding: 0 10%;
|
|
}
|
|
|
|
#insta2Container img{
|
|
width: 100%;
|
|
border-radius: var(--borderRadius);
|
|
transition: all 300ms linear;
|
|
user-select: none;
|
|
}
|
|
|
|
.insta2FirstImg{
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.insta2FirstImg img{
|
|
border-radius: var(--borderRadius);
|
|
transition: all 300ms linear;
|
|
user-select: none;
|
|
margin: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.insta2FirstImg::after{
|
|
content: "";
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
top: 0;
|
|
left: 0;
|
|
width: calc(80%);
|
|
height: calc(100% - 4px);
|
|
border-radius: var(--borderRadius);
|
|
color: #fff;
|
|
background: rgba(0, 0, 0, 0);
|
|
transition: all 300ms linear;
|
|
font-family: var(--font);
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.insta2FirstImg:hover .insta2Img1{
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
.insta2FirstImg:hover::after{
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
content: attr(data-location);
|
|
display: flex;
|
|
transition: all 300ms linear;
|
|
}
|
|
|
|
#insta2ImgContainer{
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
flex-grow: 1;
|
|
justify-content: space-around;
|
|
align-content: center;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.insta2ImgDiv img{
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: var(--borderRadius);
|
|
transition: all 300ms linear;
|
|
user-select: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.insta2ImgDiv{
|
|
position: relative;
|
|
width: 30%;
|
|
height: auto;
|
|
margin: var(--margin) auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.insta2ImgDiv::after{
|
|
content: ""; /* Location Icon: \f1da */
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: calc(100% - 5px);
|
|
border-radius: var(--borderRadius);
|
|
color: #fff;
|
|
background: rgba(0, 0, 0, 0);
|
|
transition: all 300ms linear;
|
|
/*font-family: akar-icons;*/
|
|
font-family: var(--font);
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.insta2ImgDiv:hover > .insta2Img{
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.insta2ImgDiv:hover::after{
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
content: attr(data-location);
|
|
display: flex;
|
|
transition: all 300ms linear;
|
|
}
|
|
|
|
#githubContainer{
|
|
width: 100%;
|
|
height: auto;
|
|
margin: auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
flex-grow: 1;
|
|
justify-content: space-around;
|
|
align-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#githubContainer div{
|
|
width: 50%;
|
|
align-self: center;
|
|
align-content: center;
|
|
}
|
|
|
|
#githubContainer div:nth-child(2){
|
|
text-align: center;
|
|
}
|
|
|
|
#githubContainer img{
|
|
width: 100%;
|
|
height: auto;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Project Section */
|
|
#projects{
|
|
margin: auto;
|
|
}
|
|
|
|
#projectContainer{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.project{
|
|
width: 80%;
|
|
max-width: 450px;
|
|
height: auto;
|
|
background: var(--theme1);
|
|
border-radius: var(--borderRadius);
|
|
margin: var(--margin) var(--margin) 40px var(--margin);
|
|
padding: 0 var(--padding) var(--padding) 0;
|
|
}
|
|
|
|
#projectRow2{
|
|
padding-top: 100px;
|
|
}
|
|
|
|
.project img{
|
|
width: 30%;
|
|
height: auto;
|
|
border-top-left-radius: var(--borderRadius);
|
|
}
|
|
|
|
.project h3{
|
|
width: calc(70% - (2 * var(--margin)));
|
|
height: auto;
|
|
float: right;
|
|
margin: var(--margin);
|
|
}
|
|
|
|
.project p{
|
|
margin: var(--padding);
|
|
}
|
|
|
|
.project button{
|
|
width: 90%;
|
|
height: auto;
|
|
margin: 5%;
|
|
padding: 10px;
|
|
font-size: 1rem;
|
|
background: var(--theme2);
|
|
color: #fff;
|
|
border: 2px solid transparent;
|
|
border-radius: var(--buttonRadius);
|
|
transition: all 200ms linear;
|
|
}
|
|
|
|
.project button:hover{
|
|
background: var(--theme2);
|
|
border: 2px solid #fff;
|
|
}
|
|
|
|
/* FAQ Section */
|
|
#faq{
|
|
margin: 0;
|
|
}
|
|
|
|
.faqObject{
|
|
width: calc(100% - 30px);
|
|
height: auto;
|
|
background: var(--theme1);
|
|
color: #fff;
|
|
margin: 15px;
|
|
/*padding: 5px 15px;*/
|
|
padding: 0 0 5px 0;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
text-align: justify;
|
|
user-select: none;
|
|
}
|
|
|
|
.faqObject i{
|
|
font-size: 24px;
|
|
margin: 15px;
|
|
display: inline-flex;
|
|
transform: rotate(0deg);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.faqObject h3{
|
|
display: inline-flex;
|
|
width: 80%;
|
|
margin: 0 15px;
|
|
}
|
|
|
|
.faqObject p{
|
|
margin: 15px;
|
|
user-select: text;
|
|
}
|
|
|
|
.faqAnswer{
|
|
display: none;
|
|
padding: 0 15px 15px 5px;
|
|
}
|
|
|
|
/* Contact Section */
|
|
#contact{
|
|
display: none;
|
|
}
|
|
|
|
#contact input{
|
|
width: calc(100% - 20px);
|
|
height: auto;
|
|
font-size: 1em;
|
|
font-family: var(--font);
|
|
outline: none;
|
|
background: var(--theme1);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
margin: 10px 0;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
#contactNames{
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-content: stretch;
|
|
}
|
|
|
|
#contactNames input{
|
|
width: calc(95% - 20px);
|
|
}
|
|
|
|
#contactNames input:nth-child(1){
|
|
margin: 10px 10px 10px 0;
|
|
}
|
|
|
|
#contactNames input:nth-child(2){
|
|
margin: 10px 0 10px 10px;
|
|
}
|
|
|
|
#contact textarea{
|
|
width: calc(100% - 20px);
|
|
height: auto;
|
|
min-height: 200px;
|
|
font-size: 1em;
|
|
font-family: var(--font);
|
|
outline: none;
|
|
background: var(--theme1);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
margin: 10px 0;
|
|
padding: 5px 10px;
|
|
resize: vertical;
|
|
}
|
|
|
|
#termsLabel p{
|
|
max-width: calc(90% - 45px);
|
|
user-select: none;
|
|
text-align: justify;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
#contact input[type="checkbox"]{
|
|
height: 0;
|
|
width: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
#contact input[type="checkbox"]+label::before{
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 4px;
|
|
border: 2px solid var(--theme1);
|
|
background: var(--background);
|
|
display: block;
|
|
content: "";
|
|
margin: 10px 0;
|
|
float: left;
|
|
}
|
|
|
|
#contact input[type="checkbox"]:checked+label::before{
|
|
box-shadow: inset 0px var(--background);
|
|
background: var(--theme1);
|
|
}
|
|
|
|
#contact label p{
|
|
margin: 0 30px;
|
|
width: calc(100% - 30px);
|
|
float: left;
|
|
}
|
|
|
|
#contact button{
|
|
width: calc(100% - 20px);
|
|
height: auto;
|
|
font-size: 1em;
|
|
font-family: var(--font);
|
|
outline: none;
|
|
background: var(--theme1);
|
|
color: #fff;
|
|
border: 2px solid transparent;
|
|
border-radius: 8px;
|
|
margin: 20px 0;
|
|
padding: 10px 10px;
|
|
}
|
|
|
|
#contact button:hover{
|
|
background: var(--theme2);
|
|
border: 2px solid;
|
|
}
|
|
|
|
@keyframes shake{
|
|
0%{
|
|
transform: translate(0, 0);
|
|
}
|
|
15%{
|
|
transform: translate(1rem, 0);
|
|
}
|
|
35%{
|
|
transform: translate(-1rem, 0);
|
|
}
|
|
55%{
|
|
transform: translate(1rem, 0);
|
|
}
|
|
80%{
|
|
transform: translate(-1rem, 0);
|
|
}
|
|
10%{
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
|
|
/* Footer & imprint */
|
|
#footer{
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #fff;
|
|
width: auto;
|
|
height: auto;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
#footerExpanded{
|
|
display: none; /* FLEX */
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
align-items: stretch;
|
|
background: var(--theme1);
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
#imprint{
|
|
display: none;
|
|
}
|
|
|
|
#footerContent{
|
|
width: calc(100% - 30px);
|
|
height: auto;
|
|
min-height: 60px;
|
|
background: var(--theme1);
|
|
margin: 0;
|
|
margin-top: -21px;
|
|
padding: 15px;
|
|
}
|
|
|
|
#footerContent a{
|
|
padding: 10px;
|
|
text-decoration: none;
|
|
background: none;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
#footerContent a:hover{
|
|
background: var(--theme2);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.socialLink{
|
|
margin: 0 5px;
|
|
padding: 10px;
|
|
text-decoration: none !important;
|
|
font-size: 1.4rem;
|
|
color: inherit;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.socialLink:hover{
|
|
text-decoration: none !important;
|
|
background: var(--theme2);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Scroll to the top button */
|
|
#scroll-top{
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--theme1);
|
|
border-radius: 12px;
|
|
margin: 15px;
|
|
bottom: 0;
|
|
right: 0;
|
|
position: fixed;
|
|
justify-content: center;
|
|
display: flex;
|
|
font-size: 28px;
|
|
color: #fff;
|
|
transition: .1s linear;
|
|
}
|
|
|
|
#scroll-top i{
|
|
margin-top: 0px;
|
|
transition: .1s linear;
|
|
stroke-width: 3px;
|
|
}
|
|
|
|
#scroll-top i:hover{
|
|
margin-top: -5px;
|
|
}
|
|
|
|
/* Section defaults */
|
|
.section{
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.sectionTitle{
|
|
color: var(--color);
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.sectionTitle::before{
|
|
content: "#";
|
|
color: var(--theme2);
|
|
margin: 0 10px 0 0;
|
|
user-select: none;
|
|
}
|
|
|
|
@media screen and (max-width:640px){
|
|
.sectionTitle::before{
|
|
margin: 0 10px 0 10px;
|
|
}
|
|
}
|
|
|
|
/* General stylings */
|
|
.link{
|
|
position: relative;
|
|
text-decoration: none !important;
|
|
background-image: linear-gradient(25deg, var(--theme2) 0%, var(--theme2) 100%);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 40%;
|
|
background-position: 0 110%;
|
|
transition: all 300ms;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.link:hover{
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.animate{
|
|
transition: var(--transition);
|
|
}
|
|
|
|
a{
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover{
|
|
color: inherit;
|
|
/*text-decoration: underline;*/
|
|
}
|
|
|
|
i{
|
|
text-decoration: none !important;
|
|
outline: none;
|
|
font-style: normal;
|
|
}
|
|
|
|
i:hover{
|
|
text-decoration: none !important;
|
|
outline: none;
|
|
}
|
|
|
|
var{
|
|
font-style: normal;
|
|
}
|
|
|
|
input, textarea, button{
|
|
outline: none;
|
|
}
|
|
|
|
input::placeholder, textarea::placeholder{
|
|
color: inherit;
|
|
}
|
|
|
|
@media screen and (max-width:640px){
|
|
/* General */
|
|
.inner-width p{
|
|
margin: auto 10px;
|
|
}
|
|
|
|
/* Navbar */
|
|
#navbar-links{
|
|
display: none;
|
|
width: 80%;
|
|
height: 100vh;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
background: var(--theme1);
|
|
color: #fff;
|
|
font-size: 2rem;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-content: stretch;
|
|
align-items: baseline;
|
|
}
|
|
|
|
#navbar-links a{
|
|
margin: 0;
|
|
text-decoration: none;
|
|
padding: 5px;
|
|
transition: all 250ms linear;
|
|
}
|
|
|
|
#navbar-links a:hover{
|
|
text-decoration: none;
|
|
background: var(--theme2);
|
|
border-radius: 12px;
|
|
transition: all 250ms linear;
|
|
}
|
|
|
|
#closeNavbarPlaceholder{
|
|
display: none;
|
|
width: 20%;
|
|
height: 100vh;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
padding: calc(10% - 2rem);
|
|
background: var(--theme2);
|
|
font-size: 2rem;
|
|
}
|
|
|
|
#toggleNav{
|
|
display: block;
|
|
}
|
|
|
|
/* About Section*/
|
|
#aboutContent{
|
|
flex-wrap: wrap;
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
#aboutImg img{
|
|
width: 90%;
|
|
margin: 0 5%;
|
|
}
|
|
|
|
/* Socialmedia Section */
|
|
#socialSelection{
|
|
padding-left: calc(5% + 5px);
|
|
}
|
|
|
|
#socialSelection label{
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.socialTab{
|
|
width: calc(90% - (2 * var(--padding)));
|
|
margin: 5%;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
#insta2Container{
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#insta2Container img, .insta2ImgDiv{
|
|
width: 100%;
|
|
margin: var(--margin) 10%;
|
|
}
|
|
|
|
.insta2FirstImg::after{
|
|
margin: var(--margin) 10%;
|
|
height: calc(100% - (2 * var(--margin)) - 4px);
|
|
}
|
|
|
|
#insta1Container div, .insta2ImgDiv, #githubContainer div{
|
|
width: 100%;
|
|
}
|
|
|
|
/* Projects Section */
|
|
#projectRow2{
|
|
padding-top: 0;
|
|
}
|
|
|
|
/* FAQ Section */
|
|
.faqObject{
|
|
padding: 0 0 15px 0;
|
|
}
|
|
|
|
.faqObject h3{
|
|
width: 70%;
|
|
margin: auto 5px auto 10px;
|
|
}
|
|
|
|
/* Contact Section */
|
|
#contact input, #contact textarea, #contactNames input, #contactNames input:nth-child(1){
|
|
margin: 10px;
|
|
width: calc(95% - 20px);
|
|
}
|
|
|
|
#contactNames{
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#contact input[type="checkbox"]+label::before{
|
|
margin: 10px;
|
|
}
|
|
|
|
#contact label p{
|
|
margin: 10px;
|
|
width: calc(80% - 30px);
|
|
}
|
|
|
|
#contact button{
|
|
margin: 20px 10px;
|
|
}
|
|
|
|
/* Footer */
|
|
#footerContent{
|
|
min-height: 100px;
|
|
}
|
|
|
|
#footerContent a, .socialLink{
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Privacy hint */
|
|
#cookieBanner{
|
|
flex-wrap: wrap;
|
|
padding: 0 auto;
|
|
}
|
|
|
|
#cookieBanner div{
|
|
width: 90%;
|
|
max-width: none;
|
|
margin: 0 5% 10px 5%;
|
|
}
|
|
|
|
#cookieBanner button{
|
|
width: 90%;
|
|
min-width: 80px;
|
|
margin: 10px 5%;
|
|
}
|
|
|
|
#cookieIcon{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Selection */
|
|
::selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}
|
|
::-moz-selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}
|
|
|
|
|
|
/* Countdown */
|
|
#countdown{
|
|
display: flex;
|
|
flex-direction: row;
|
|
user-select: none;
|
|
font-family: var(--font);
|
|
}
|
|
|
|
.countdownObject{
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: var(--margin);
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.countdownObject:nth-child(4) .countdownNum{
|
|
background: var(--red);
|
|
border-color: var(--red);
|
|
transition: var(--transition);
|
|
animation: countdown 2000ms infinite;
|
|
}
|
|
|
|
@keyframes countdown{
|
|
0%{
|
|
border-color: var(--red);
|
|
background: var(--red);
|
|
}
|
|
50%{
|
|
border-color: var(--theme1);
|
|
background: var(--theme1);
|
|
}
|
|
100%{
|
|
border-color: var(--red);
|
|
background: var(--red);
|
|
}
|
|
}
|
|
|
|
.countdownNum{
|
|
width: 60px;
|
|
height: 60px;
|
|
background: transparent;
|
|
border: 4px solid var(--theme1);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
padding: 0;
|
|
font-size: 18px;
|
|
}
|
|
|
|
@media screen and (max-width:700px){
|
|
#countdown{
|
|
flex-direction: row;
|
|
}
|
|
|
|
.countdownObject{
|
|
margin: 10px;
|
|
}
|
|
|
|
.countdownNum{
|
|
width: 30px;
|
|
height: 30px;
|
|
padding: 0;
|
|
font-size: 14px;
|
|
border: 2px solid var(--theme1);
|
|
}
|
|
|
|
#countdownImg{
|
|
display: none;
|
|
}
|
|
}
|