@font-face {
    font-family: 'OrbitronRegular';
    src: url('../../src/fonts/Orbitron-Regular.ttf') format('truetype');/*safari, android, ios*/
}
@font-face {
    font-family: 'JetBrainsThin';
    src: url('../../src/fonts/JetBrainsMono-Thin.ttf') format('truetype');/*safari, android, ios*/
}


/* the styles for the HTML elements */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    overscroll-behavior: none;
}

body {
    overflow-x: hidden;
    overscroll-behavior: none;
    min-height: 100%;
    background: #222;
    background-image: linear-gradient(to right, #333 1px,
    transparent 1px), linear-gradient(to bottom, #333 1px,
    transparent 1px);
    background-size: 40px 40px;
}

main {
    padding: 5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.headerTxt {
    padding-bottom: 2rem;
    text-align: center;
    font-family: 'OrbitronRegular';
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgb(0, 255, 247);
    text-shadow: 0 0 10px #0698a5,
                 0 0 30px #0698a5,
                 0 0 80px #0698a5,
                 0 0 120px #0698a5,
                 0 0 200px #0698a5;

    h1, h2 {
        color: rgb(208, 133, 4);
        padding: 0.5rem;
    }
}


li a {
    cursor: pointer;
    padding: 1rem 0;
    margin: 1rem 0;
    text-decoration: none;
    font-size: 1rem;
    color: rgb(255, 255, 255);
    font-family: 'JetBrainsThin';
}
li a:hover {
    color: rgb(208, 133, 4);
}

li a i {
    font-size: 1.3rem;
    padding-right: 1rem;
}

li a i:hover {
    color: rgb(175, 23, 23);
    transition: all 0.3s ease-in;
}

br {
    clear: left;
}

ul {
    list-style-type: none;
    margin-bottom: 1em;
    padding-left: 0;
}
li {
    margin: 0.5em;
    text-align: left;
}

form {
    margin-bottom: 1rem;

    span {
        color: white;
        font-size: 1rem;
        font-family: 'JetBrainsThin';
    }
}

.fileButton {
    cursor: pointer;
    padding-left: 2rem;
    color: cyan;
}

#upload_button {
    cursor: pointer;
    color: black;
    z-index: 10;
    font-family: 'JetBrainsThin';
    font-weight: 600;
    letter-spacing: 2px;
    padding: 0.5rem;
    margin: 1rem;
    width: 50%;
    height: min-content;
    border-radius: 0.5rem;
    border: 2px solid rgba(171, 171, 171, 0.057);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
    background-color: rgb(208, 133, 4);
}

#upload_button:hover {
    color:rgb(208, 133, 4);
    background-color: transparent;
    border: 2px solid rgb(208, 133, 4);
}

#upload_form label {
    font-size: 1rem;
    color: white;
    padding-left: 1em;
    padding-bottom: .5em;
    border-radius: 0.5rem;
}
.col {
    display: flex;
    flex-direction: column;
}
.row {
    display: flex;
    flex-direction: row;
}
.container {
    display: flex;
    margin-bottom: 3rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 80%;
    height: max-content;
}
.innerBox {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
}
.innerBoxR {
    display: flex;
    flex-direction: column;
    position: relative;
}
.innerBox, .innerBoxR {
    height: min-content;
    width: 100%;
}
.spacer {
    width: 400px;
    height: 400px;
}
.glass2 {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(to bottom right, #bbbbbb40, rgba(252, 252, 252, 0.001));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 2rem;
    border: 2px solid rgba(171, 171, 171, 0.057);
    transition: all 0.9s;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
}

.glass {
    padding: 1.5rem;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.146);
    border-radius: 20px;
    border: 2px solid rgba(171, 171, 171, 0.057);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.9s;
    box-shadow: 0 0 10px #93f8ff,
                 0 0 30px #93f8ff,
                 0 0 80px #2eacb0,
                 0 0 120px #0698a5,
                 0 0 200px #0698a5;
}

/* -------------- Tool Tip --------------- */
.toolTip {
    display: block;
    z-index: 10;
    justify-content: center;
    align-items: center;
    padding: 0.7rem;
    position: absolute;
    top: 0; 
    left: 0;
    text-align: justify;
    max-width: 350px;
    color: rgb(208, 133, 4);
    font-family: 'OrbitronRegular';
    letter-spacing: 1px;

    i {
        font-size: 1.3rem;
        animation: pulseSubtle 1.5s infinite ease-in-out alternate;
    }
    p {
        display: none;
        transition: all 2s ease;
    }
}
.toolTip:hover, .toolTipShow {
    border-radius: 50%;
    background: #1b1b1b;
    border-radius: 1rem;

    p {
        display: block;
        font-size: 1rem;
        letter-spacing: 1px;
    }
}
/*  */

.imgContainer {
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    padding: 0% 0% 15% 0%;
}
  
.photos {
    display: flex;
    justify-content: space-evenly;
    z-index: 3;
    width: auto;
	flex-wrap: wrap;

    a {
        text-decoration: none;
        color: white;
        margin: 1rem;
        font-family: 'JetBrainsThin';
    }
}
  
.photos img {
    flex-direction: column;
    display: flex;
    align-items: center;
    text-align: center;
    max-height: 15rem;
    width:max-content;
    transition: transform 0.3s;
    border-radius: 4rem;
}


/* Animations */
@keyframes pulseSubtle {
    from { transform: scale(0.8); }
    to { transform: scale(1.5); }
}



/* laptop / M-L screens */

@media screen and (min-width: 951px) and (max-width: 1100px) {
    .container {
        flex-direction: column;
        justify-content: space-evenly;
        width: 100%;
    }
}


/********  tablet / notebook */
@media screen and (min-width: 541px) and (max-width: 950px) {
    .container {
        flex-direction: column;
        justify-content: space-evenly;
        width: 100%;
    }
    
    .headerTxt h1{
        font-size: 3rem !important;
    }
    
}


/* phones */
@media screen and (min-width: 350px) and (max-width: 540px) {
    .container {
        flex-direction: column;
        justify-content: space-evenly;
        width: 100%;
    }
    
    .headerTxt h1{
            font-size: 2.4rem !important;
    }
    
}