@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

:root {
    --semi-transparent-hover: rgba(10, 10, 10, 0.3); 
    --semi-transparent: rgba(0, 0, 0, 0.25);
    --background: #111315;
    --container: #0e1012;
    --accent: #677dff;
}

.grey {color: #777;}
.white {color: white;}

html, body {
    font-family: 'Quicksand', Arial, Helvetica, sans-serif;
    background: var(--background);
    user-select: none;
    color: white;
    padding: 0;
    margin: 0;
}

@keyframes bg-scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100px 100px;
    }
}

.back, .bg, .bg-gradient, .bg-overlay {
    position: absolute;
    height: 100vh;
    width: 100vw;
}

.back {
    background-color: blue;
    z-index: -3;
}

.bg {
    animation: bg-scroll 10s infinite linear;
    background-image: url("img/grid.png");
    background-size: 50px;
    opacity: 0.04;
    z-index: -2;
}

.bg-gradient {
    background-image: radial-gradient(transparent, blue);
    z-index: -1;
}

.bg-overlay {backdrop-filter: saturate(1.3%) brightness(100%) hue-rotate(-30deg);}

.title {
    transform: translateX(-50%);
    color: var(--accent);
    position: relative;
    margin-bottom: 1vh;
    font-size: 2vh;
    left: 50%;
}

.version {
    transform: translateY(-100%);
    top: calc(100% - 1vh);
    position: absolute;
    font-size: 1.5vh;
    left: 1vh;
}

.logo {
    transform: translate(-100%, -100%);
    transition: opacity 0.2 ease-out;
    position: absolute;
    opacity: 30%;
    height: 6vh;
    left: 100vw;
    top: 100vh;
    z-index: 1;
    width: 6vh;
}

.container, 
.bigbutton, 
.bigbutton p, 
.bigbutton i, 
.modal, 
.version,
.modal a,
.modal a i,
.project .text i
{transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.07);}

.container {
    top: 50%;
    gap: 1vh;
    left: 50%;
    width: 50vh;
    padding: 1vh;
    display: flex;
    padding-top: 0;
    max-width: 80vw;
    text-align: center;
    position: absolute;
    border-radius: 2vh;
    flex-direction: column;
    transform: translate(-50%, -50%);
    background: var(--container);
}

.bigbutton {
    padding: 1vh;
    text-align: left;
    padding-left: 2vh;
    border-radius: 1vh;
    background: var(--semi-transparent);
}

.bigbutton:hover {
    background: var(--semi-transparent-hover);
    padding-left: 3vh;
    cursor: pointer;
}

.bigbutton:hover p, .bigbutton:hover i {left: 1vh;}

.bigbutton h3 {font-size: 2vh;}

.bigbutton p, i {
    position: relative;
    font-size: 1.7vh;
    color: #c5c5c5;
    margin-top: 0;
    left: 0;
}

.bigbutton .smalltext {
    margin-top: -1.5vh;
    display: flex;
    gap: 1vh;
}

.bigbutton i {
    position: relative;
    top: 3px;
}

.modal-bg {
    transition: opacity 0.2s ease-out;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    pointer-events: none;
    position: absolute;
    height: 100vh;
    width: 100vw;
    opacity: 0;
}

.modal {
    top: 50%;
    left: 50%;
    opacity: 0;
    width: 70vh;
    padding: 1vh;
    font-size: 2vh;
    max-width: 80vw;
    border-radius: 1vh;
    position: absolute;
    padding-bottom: 3vh;
    pointer-events: none;
    background: #0a0b0c;
    transform-origin: center;
    transform: translate(-50%, -50%) scale(0.7);
}

.modal h3 {
    color: var(--accent);
    margin-top: 1.5vh;
    margin-left: 2vh;
}

.close {
    left: calc(100% - 4.3vh);
    position: absolute;
    cursor: pointer;
    top: 3vh;
}

.modal a {
    color: white;
    padding: 0.3vh;
    cursor: pointer;
    padding-left: 1vh;
    padding-right: 1vh;
    margin-bottom: 1vh;
    align-items: center;
    border-radius: 0.5vh;
    display: inline-flex;
    text-decoration: none;
    border: dashed 0.2vh #2d2d2e;
    background: var(--semi-transparent);
}

.links-container {padding-left: 3vh;}
.modal a:hover {background: var(--semi-transparent-hover);}

.modal p {
    margin-bottom: 0.8vh;
    margin-top: -1vh;
    color: #999;
}

.yt:hover, .yt:hover i {color: rgb(255, 65, 65);}
.github:hover, .github:hover i {color: #6ae1ff;}
.discord:hover, .discord:hover i {color: #5865F2;}
.steam:hover, .steam:hover i {color: #2958af;}
.namemc:hover, .namemc:hover i {color: #60d470;}

.modal a i {
    margin-right: 0.5vh;
    font-size: 2vh;
}

.project, .extra {
    padding: 1vh;
    display: flex;
    padding-top: 1.4vh;
    border-radius: 1vh;
    padding-left: 1.5vh;
    margin-bottom: 1vh;
    background: var(--semi-transparent);
}

#projects-modal, #extras-modal {
    padding-bottom: 0;
}

.project b, .extra b {
    font-size: 2.2vh;
}
.project p, .extra p {
    font-size: 1.7vh;
    margin-top: 0;
}

.project .text, .extra .text {margin-left: 1.5vh;}
.project .text i, .extra .text i {
    position: relative;
    cursor: pointer;
    top: -1px;
}
.project .text i:hover, .extra .text i:hover {
    color: var(--accent);
}

.project img, .extra img {
    border-radius: 0.8vh;
    height: 11vh;
    width: 20vh;
}

.logo:hover {opacity: 1;}