/*
 * Name: sea of glass
 * Author: xo
 * Website: https://xixxii.neocities.org/ 
*/

@import url(https://fonts.upset.dev/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&display=swap);


:root {
    --fakewhite: #E7E6F7;
    --pale: #bda8e1;
    --medium: #46347E;
    --highlight: #5668d8;
    --fakeblack: #201023;
}

* {
    scrollbar-color: var(--fakewhite) var(--pale);
    box-sizing: border-box;
}

::selection {
    background-color: var(--pale);
    color: var(--fakewhite)
}

body {
    margin: 0;
    background: var(--pale);
    background-image: url(images/CG0018smaller.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--fakeblack);
}

.container {
    max-width: 1200px;
}

a,
.column1 a {
    color: var(--medium);
    text-decoration: wavy underline 1px;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: .3s;
    font-family: 'Alegreya Sans';
}

h2 {
    font-family: 'Alegreya Sans';
    color: var(--medium)
}

a:hover {
    color: var(--highlight);
}

input {
    padding: 5px;
    font-family: inherit;
    border-radius: 3px;
    background-color: rgba(256, 256, 256, 0.4);
    border: 1px rgba(256, 256, 256, 0.5) solid;
}

input:hover {
    border: 1px rgba(256, 256, 256, 1) solid;
}

input:active {
    box-shadow: inset rgba(00, 00, 00, 0.4) 0px 0px 10px;
    border: rgba(00, 00, 00, 1)
}

select {
    font-family: inherit;
    padding: 5px;
    background-color: rgba(256, 256, 256, 0.4);
    border-radius: 3px;
    border: 1px rgba(256, 256, 256, 0.9) solid;
}

.header {
    margin: auto;
    margin-bottom: 25px;
    margin-top: 25px;
    border-radius: 25%;
    padding: 10px;
    padding-right: 35px;
    padding-left: 35px;
    border: 1px solid rgba(256, 256, 256, 0.3);
    box-shadow: rgba(256, 256, 256, 0.5) 0px 0px 5px;
    width: fit-content;
    backdrop-filter: blur(13px) saturate(100%);
    background-color: rgba(254, 231, 255, 0.3);
    transform: perspective(1000px) rotateX(-20deg) rotatey(10deg);
    transition: .5s;
}

.header h1 a {
    transition: .9s;
}

.header h1 a:hover {
    color: var(--fakewhite);
    opacity: 0.7;
}

.header:hover {
    animation-play-state: paused;
    transform: unset;
    box-shadow: rgba(256, 256, 256, 0.7) 0px 0px 9px;
}

.column1 {
    overflow: auto;
    max-height: 65vh;
    justify-content: center;
    display: flex;
    transform: perspective(1000px) rotateX(10deg) rotateY(35deg) rotateZ(-1deg);
    transition: 0.7s;
}

.column1:hover {
    transform: unset;
}

.column1 a {
    text-decoration: none;
    text-align: center;
    font-size: 13pt;
    padding: 15px;
    margin-bottom: 15px;
    margin-top: 15px;
    backdrop-filter: blur(13px) saturate(100%);
    background-color: rgba(254, 231, 255, 0.3);
    border-radius: 25%;
    border: 1px solid rgba(256, 256, 256, 0.2);
    box-shadow: rgba(256, 256, 256, 0.3) 0px 0px 5px;
    transition: .5s;
width:150px;
}

.column1 a:hover {
    transform: perspective(1000px) rotateX(-19deg) rotateY(-15deg) rotateZ(-10deg);
    backdrop-filter: blur(13px) saturate(100%);
    background-color: rgba(254, 231, 255, 0.7);
    border: 1px solid rgba(256, 256, 256, 0.9);
    box-shadow: rgba(256, 256, 256, 0.8) 0px 0px 8px,
        rgba(17, 25, 40, 0.5) -8px 13px 17px;
}

.column2 {
    border-radius: 15px;
    backdrop-filter: blur(13px) saturate(100%);
    background-color: rgba(254, 231, 255, 0.3);
    border: 1px solid rgba(256, 256, 256, 0.5);
    box-shadow: rgba(256, 256, 256, 0.3) 0px 0px 5px;
    transition: .8s;
    padding: 20px;
    transform: perspective(1000px) rotateX(5deg) rotateY(-15deg) rotateZ(3deg);
}

.column2:hover {
    background-color: rgba(254, 231, 255, 0.5);
    box-shadow: rgba(256, 256, 256, 0.5) 0px 0px 15px;
    transform: unset;
}

.column2 p,
#footer {
    font-family: 'Alegreya Sans';
    font-weight: 300;
    line-height: 1.02;
}

#footer {
    backdrop-filter: blur(5px) saturate(152%);
    background-color: rgba(17, 25, 40, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: rgba(00, 00, 00, 0.4) 0px 0px 3px;
    color: var(--fakewhite);
    transform: perspective(1000px) rotateX(35deg) rotateY(0deg) rotateZ(-2deg);
    transition: 0.6s;
}

#footer:hover {
    transform: unset;
    box-shadow: rgba(00, 00, 00, 0.5) 0px 0px 5px;
    background-color: rgba(17, 25, 40, 0.5);
}

#footer a {
    color: var(--fakewhite);
}

#footer a:hover {
    color: var(--medium);
    text-decoration: wavy underline 1px;
}

@media screen and (max-width: 600px) {
    .column1 a {
        width: 350px;
    }

}