@import url("https://fonts.googleapis.com/css?family=Montserrat:100");

@font-face {
    font-family: "coolvetica";
    src: url("../fonts/coolvetica_rg.otf");
}

@font-face {
    font-family: "coolvetica_codensed";
    src: url("../fonts/coolvetica_condensed_rg.otf");
}

html,
body {
    padding: 0;
    margin: 0;
    font-family: 'coolvetica_codensed', sans-serif;
    letter-spacing: 1px;
    background: #111111;
    overflow: hidden;
    touch-action: none; 
}

body {
    color: #a8a8a8;
    font: Montserrat, sans-serif;
    font-weight: 300;
}

/* Disables this annoying hyperlink styling */
a {
    text-decoration: none;
    /* no underline */
}

p {
    padding: 0 10px;
    line-height: 1.8;
}

.canvasParticle {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div#header {
    z-index: 20;
    width: 100%;
    left: 0px;
    padding-left: 0px;
    padding-top: 0px;
    position: absolute;
    top: 0px;
    height: 60px;
}

.caption {
    max-width: 400px;
    width: 40%;
    height: 61px;
    backdrop-filter: blur(4px);
}

div#header h1 {
    text-align: left;
    font-size: 300%;
    font-weight: 900;
    margin-top: 0%;
    margin-left: 15px;
}

.container_left {
    z-index: 20;
    max-width: 400px;
    width: 40%;
    position: absolute;
    top: 60px;
    left: 0px;
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(4px);
}

.scrollableDivLeft {
    width: 100%;
    padding-bottom: 180px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

.informationBox {
    margin-top: 0px;
    font-family: coolvetica_codensed;
    letter-spacing: 3px;
}

.containerSocialMediaButtons {
    font-family: coolvetica_codensed;
    letter-spacing: 3px;
}

.extra_right {
    z-index: 20;
    max-width: 180px;
    width: 25%;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    float: right;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scrollableDivRight {
    background-color: #000000a2;
    backdrop-filter: blur(4px);
    z-index: 20;
    width: 100%;
    max-height: 98%;
    margin-left: 17px;
    padding-bottom: 320px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

.imgSize {
    z-index: 20;
    max-height: 180px;
    max-width: 180px;
    width: 100%;
    filter: blur(8px);
    opacity: 0.4;
    transition: 0.5s all;
}

.imgSize:hover {
    z-index: 20;
    filter: blur(0px);
    opacity: 1;
    transition: 0.5s all;
}

.container_Footer {   
    z-index: 21;
    position: fixed;
    max-height: 20%;
    min-height: 30px;
    bottom: 0px;
    width: 100%;
}

.divSwitchButtons {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
}

.labelSwitchButtons {
    margin-right: 2px; 
}

.divMediaButtonsParent {
    width: 100%;
    display: flex;
    justify-content: center;
}

.divMediaButtons {
    width: fit-content;
    backdrop-filter: blur(4px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.mediaButtons {
    cursor: pointer;
    width: 35px;
    margin-left: 5px;
    margin-right: 5px;
    opacity: 0.5;
}

.mediaButtons:hover {
    opacity: 1;
}

.mediaButtons:active {
    opacity: 1;
}

.footer {
    background-color: #010101a2;
    font-size: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-bottom: 15px;
    padding-top: 0px;
    backdrop-filter: blur(4px);
}

.footerContent {
    margin: 0px;
    height: 25px;
}

div#content {
    margin-top: 80px;
    margin-left: 300px;
    margin-right: 200px;
}




/* Socialmedia buttons. This didn't work in separate file. */
.flexRow_socialMediaButtons {
    margin-left: 10px;
    margin-top: 20px;
    width: fit-content;
    height: 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.socialMediaTextNeon {
    text-align: left;
    color: #72727200;
    text-shadow:  0 0 4px rgb(90, 90, 90);
    font-size: 20px;
    font-weight: 100;
    letter-spacing: 7px;
    cursor: pointer;
    transition: .75s all;
    height: 35px;
    margin: 0px;
}

.socialMediaButton {
    opacity: 0.55;
    filter: blur(2px);
    cursor: pointer;
    width: 25px;
    height: 25px;
    transition: 0.75s all;
}

.flexRow_socialMediaButtons:hover .socialMediaButton {
    margin-top: 2.5px;
    opacity: 1;
    filter: blur(0px);
    width: 35px;
    height: 35px;
    transition: 1.25s all;
}

.flexRow_socialMediaButtons:active .socialMediaButton {
    opacity: 1;
    transition: 2s all;
}

.flexRow_socialMediaButtons:hover .socialMediaTextNeon {
    letter-spacing: 20px;
    color: rgb(226, 226, 226);
    /* text-shadow: 0 0 1px rgb(241, 241, 241),
                 0 0 20px rgb(199, 199, 199),
                 0 0 40px rgb(236, 236, 236); */
    transition: 1.25s all
}