@import url("/CssFiles/hide_scrollbar.css   ");

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body{
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;

    background: linear-gradient(180deg, white 25%, whitesmoke 95%, rgba(15,7,22, 0.4) 100%);
    min-height: 100vh;
}

/* Header */
.header{
    width: 100%;
    background-color: black;
}

.header .behind{
    width: 100%;
    filter: blur(15px) brightness(80%);
}

.header .inFront{
    top: 10vw;
    position: absolute;
    width: calc(100%);
    background-image: url("/Data/Projects/RayTracer/Cover_Front.webp");
    background-position: 0% 5%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 33vw;
    overflow: hidden;
    filter: drop-shadow(0 0 0.75rem black);

    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.header #title{
    color: white;
    filter: drop-shadow(0 0 0.75rem black);
    font-size: calc(min(10rem, 15vw));
    font-family: "Space Mono", monospace;
}

.link {
    color: #0645ad; /* Wikipedia link color */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make the link bold */
}

.link:hover {
    text-decoration: underline; /* Add underline on hover */
}

.link::after {
    font-size: 40%; /* Adjust the font size */
    color: #888; /* Label color */
}

.gradient-line {
    position: relative;
    width: 1px;
    height: 80%;
    top: 10%;
    background: linear-gradient(to bottom, transparent, #0F0716, transparent);
}

.download-div{
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    width: 100%;
}

.download-button{
    width: min(30vw, 200px);
    aspect-ratio: 1;

    background-color: #172639;
    margin: 3vw;
    border-radius: 50%;

    transition: all 0.5s;

    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    flex-direction: column; /* Switch to single column layout */

    color: whitesmoke;
}

.download-button img{
    position: relative;
    width: 50%;
    transition: all 0.6s;
}

.download-button img:hover{
    filter: drop-shadow(0 0 1rem #6600ff);
}

.download-button:hover{
    filter: drop-shadow(0 0 1rem #3F5756);
}

.data{
    margin: 5vw;
}

.no-decoration {
    /* Resetting styles */
    list-style: none;
    text-decoration: none;
    color: inherit; /* Inherit text color from the parent */
    background-color: transparent; /* Remove background color */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor to indicate interactivity *//
}

.space{
    height: 250px;
    width: 100%;
}

.smallspace{
    height: 50px;
    width: 100%;
}

#navigation{
    width: 100%;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#navigation a{
    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
   
    color: #0F0716;
    font-size: 24px;

    height: max(75px, 1vw); width: max(200px, 2.5vw);
    padding: 10px; margin: 20px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 10px;

    background: linear-gradient(0deg, #EDE0F5 0%, #F4EEFB 100%);
    border: none;
}

#navigation a::before{
    height: 0%;
    width: 2px;
}

#navigation a:hover{
    box-shadow:  2px 2px 3px 0 rgba(255,255,255,.5),
              -2px -2px 3px 0 rgba(116, 125, 136, .5), 
    inset -1px -1px 2px 0 rgba(255,255,255,.2),
    inset 1px 1px 2px 0 rgba(0, 0, 0, .4);
}

#inspiration{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.data p{
    font-size: 32px;
    text-align: justify;

    padding-left: 5vw;
    padding-right: 5vw;
}

.image-container {
    width: 90%;
    
    margin: auto; padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

    display: grid;
    align-items: center; 
    grid-template-columns: 25vw 1fr;
    column-gap: 5px;
}

.image-container img {
    width: 25vw;
    max-width: calc(50vh * 3/2); /* 50vh is half of the viewport height */
    height: auto;
}

.image-container p{
    text-align: justify;
    font-size: calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320)));
}

.image-container-vertical {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.image-container-vertical img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.simpleImageSpace{
    width: 90%;
    
    margin: auto; padding: 10px;

    display: grid;
    align-items: center; 
    grid-template-columns: 1fr;
    column-gap: 5px;
}

.simpleImageSpace img{
    width: 100%;
    max-width: 100%;
    height: auto;
}

#last_ex{
    display: flex;
    align-items: center;
    flex-direction: row;
    height: calc(max-content + 32px);
}

#last_ex p{
    margin-right: 10px;
}

#last_ex img{
    aspect-ratio: 1;
    flex-shrink: 0;
    height: 128px;
    aspect-ratio: 1;
    max-width: 100%;
    margin-right: 20px;

    filter: drop-shadow(black 5px 5px 10px);
}

@media (max-width: 600px){
    .image-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .image-container img {
        width: 100%;
        height: auto;
    }

    #last_ex{
        flex-direction: column;
    }
}

@media (max-width: 450px) {
    .download-div {
        flex-direction: column; /* Switch to single column layout */
    }
}