|
|
|
@ -1,6 +1,5 @@
|
|
|
|
|
/*Fonts CSS */
|
|
|
|
|
|
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
|
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -24,13 +23,14 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
|
|
text-decoration: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a:hover {
|
|
|
|
|
text-decoration: none !important;
|
|
|
|
|
}
|
|
|
|
|
a:hover {
|
|
|
|
|
text-decoration: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:focus, textarea:focus, select:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:focus, textarea:focus, select:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width:1700px) {
|
|
|
|
|
main .buttons {
|
|
|
|
@ -43,7 +43,7 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
|
|
/* Main CSS */
|
|
|
|
|
html{
|
|
|
|
|
scroll-behavior: smooth;
|
|
|
|
|
background-color: black;
|
|
|
|
|
background-color: rgb(15, 15, 15);
|
|
|
|
|
height: 100vh;
|
|
|
|
|
background-position: center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
@ -53,12 +53,21 @@ html{
|
|
|
|
|
|
|
|
|
|
body{
|
|
|
|
|
display: flex;
|
|
|
|
|
font-family: "Orbitron" , sans-serif;
|
|
|
|
|
font-family: "Orbitron", sans-serif;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items: stretch;
|
|
|
|
|
height: 95%;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
|
|
--light: hsl(220, 50%, 90%);
|
|
|
|
|
--primary: hsl(255, 30%, 55%);
|
|
|
|
|
--focus: hsl(210, 90%, 50%);
|
|
|
|
|
--border-color: hsla(0, 0%, 100%, .2);
|
|
|
|
|
--global-background: hsl(220, 25%, 10%);
|
|
|
|
|
--background: linear-gradient(to right, #0e1538, #061663);
|
|
|
|
|
--shadow-1: hsla(236, 50%, 50%, .3);
|
|
|
|
|
--shadow-2: hsla(236, 50%, 50%, .4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.enigme{
|
|
|
|
@ -93,6 +102,7 @@ body{
|
|
|
|
|
margin: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.buttons .btn:before, .buttons .btn:after
|
|
|
|
|
{
|
|
|
|
|
content:'';
|
|
|
|
@ -155,6 +165,14 @@ body{
|
|
|
|
|
transform: skew(25deg)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.buttons .btn .noAnimation {
|
|
|
|
|
animation: none;
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Console CSS*/
|
|
|
|
|
|
|
|
|
|
.compiler_class{
|
|
|
|
@ -164,7 +182,7 @@ body{
|
|
|
|
|
#console{
|
|
|
|
|
font-size: .8rem;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
background-color: #0e1538;
|
|
|
|
|
background-color: #040a29;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border: solid 1px #414141;
|
|
|
|
|
padding: 10px;
|
|
|
|
@ -192,12 +210,12 @@ body{
|
|
|
|
|
font-size: 2rem !important;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.enigme .sign{
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.enigme h2{
|
|
|
|
@ -212,3 +230,105 @@ body{
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Modal CSS */
|
|
|
|
|
|
|
|
|
|
.modal-container {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
/* --m-background is set as inline style */
|
|
|
|
|
background: var(--m-background);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-container:target {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
width: 95%;
|
|
|
|
|
padding: 4rem 2rem;
|
|
|
|
|
border-radius: .8rem;
|
|
|
|
|
|
|
|
|
|
color: aliceblue;
|
|
|
|
|
background: var(--background);
|
|
|
|
|
box-shadow: var(--m-shadow, .4rem .4rem 10.2rem .2rem) var(--shadow-1);
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal__title {
|
|
|
|
|
font-size: 3.2rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal__btn {
|
|
|
|
|
margin-top: 4rem;
|
|
|
|
|
padding: 1rem 1.6rem;
|
|
|
|
|
border: 1px solid var(--border-color);
|
|
|
|
|
border-radius: 100rem;
|
|
|
|
|
|
|
|
|
|
color: inherit;
|
|
|
|
|
background: transparent;
|
|
|
|
|
font-size: 1.4rem;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
letter-spacing: .2rem;
|
|
|
|
|
|
|
|
|
|
transition: .2s;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal__btn:nth-of-type(1) {
|
|
|
|
|
margin-right: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal__btn:hover,
|
|
|
|
|
.modal__btn:focus {
|
|
|
|
|
background: var(--focus);
|
|
|
|
|
border-color: var(--focus);
|
|
|
|
|
transform: translateY(-.2rem);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.link-2 {
|
|
|
|
|
width: 4rem;
|
|
|
|
|
height: 4rem;
|
|
|
|
|
border: 1px solid var(--border-color);
|
|
|
|
|
border-radius: 100rem;
|
|
|
|
|
|
|
|
|
|
color: inherit;
|
|
|
|
|
font-size: 2.2rem;
|
|
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 2rem;
|
|
|
|
|
right: 2rem;
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
transition: .2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.link-2::before {
|
|
|
|
|
content: '×';
|
|
|
|
|
|
|
|
|
|
transform: translateY(-.1rem);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.link-2:hover,
|
|
|
|
|
.link-2:focus {
|
|
|
|
|
background: var(--focus);
|
|
|
|
|
border-color: var(--focus);
|
|
|
|
|
transform: translateY(-.2rem);
|
|
|
|
|
}
|