:root {
     --main-bg-color: #37474F;
     --white: #F5F5F5;
     --section-color: #039BE5;
     --accent-light: #039BE5;
     --accent-dark: #263238;
}
 *{
     margin: 0;
     padding: 0;
     font-family: 'Raleway', sans-serif;
     font-size: 1rem;
     font-weight: 200;
}
 body{
     display: grid;
     background-color: var(--main-bg-color);
     color: var(--white);
     min-height: 100vh;
     grid-template-columns: 1fr ;
     grid-template-rows: 10vh 1fr 20vh ;
     grid-template-areas: "head" "main" "foot";
}
 #intro{
     grid-area: intro;
}
 #profile{
     grid-area: profile;
     background-color: var(--white);
     color: black;
}
#profile a{
	color: #ff9500;
}
 #photo{
     grid-area: photo;
     background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
     background-size: 300% 300%;
     -webkit-animation: Gradient 17s ease infinite;
     -moz-animation: Gradient 17s ease infinite;
     display: grid;
     grid-template-areas: "img" ".";
     overflow-y: auto;
    /* Allow vertical scroll */
     overflow-x: hidden;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     max-height: 100%;
    /* Prevent overflow outside main layout */
}
 #photo > * {
    /* make all direct children flexibly sized */
     flex-shrink: 1;
     flex-grow: 0;
     flex-basis: auto;
}
/* Text styling */
 #photo .photo-text {
     color: white;
     font-size: clamp(1rem, 1.2vw, 1.5rem);
    /* responsive font size */
     margin-bottom: 1rem;
     line-height: 1.2;
     overflow-wrap: break-word;
     max-height: 20%;
    /* keep text area limited */
     overflow: hidden;
}
/* Images container */
 #photo .photo-images {
     flex-grow: 1;
    /* fill remaining space */
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
     gap: 0.75rem;
     overflow: hidden;
    /* hide overflow */
}
/* Individual images */
 #photo .photo-images img {
     width: 100%;
     height: 100%;
     object-fit: contain;
    /* fit images inside grid cells without cropping */
     max-height: 100%;
     max-width: 100%;
}
 #pimg > img{
     width: 6vh;
     object-fit: scale-down;
     border-radius: 50%;
}
 @-moz-keyframes Gradient {
     0% {
         background-position: 0% 50% 
    }
     50% {
         background-position: 100% 50% 
    }
     100% {
         background-position: 0% 50% 
    }
}
 @keyframes Gradient {
     0% {
         background-position: 0% 50% 
    }
     50% {
         background-position: 100% 50% 
    }
     100% {
         background-position: 0% 50% 
    }
}
 images{
     grid-area: img;
     background-color: var(--white);
     z-index: 1;
     max-height: inherit;
}
 social{
     grid-area: social;
}
 copy{
     grid-area: cop;
}
 .cover{
     min-height: 100%;
     max-width: 100%;
     object-fit: cover;
}
 .align{
     display: flex;
     justify-content: space-around;
     align-items: center;
}
 h1{
     font-weight: 400;
     font-size: 1.3;
}
 h2{
     font-weight: 400;
     padding-left: 1em;
}
 p{
     padding: 1em;
}
 a{
     color: var(--white);
}
 figure{
     padding: 2em;
     display:flex;
     justify-content: center;
     align-items: center;
}
 figure>picture>img{
     max-width: 100%;
     height: auto;
}
 images>picture{
     height: inherit;
}
 social>div:hover{
     opacity:0.5;
     transform: scale(1.01);
}
 header{
     grid-area: head;
     background-color: var(--accent-dark);
     color: white;
     z-index: 2;
     position:relative;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     display: flex;
     justify-content: space-around;
    /* align horizontal */
     align-items: center;
    /* align vertical */
}
 header>a{
     font-weight: 800;
     font-size: 2em;
     margin-left: 2vw;
}
 .button{
     height:2vh;
     width: 15vh;
     display: flex;
     justify-content: center;
     align-items: center;
     text-decoration: none;
     margin-top: 1em;
     padding: 10px 15px;
     position:absolute;
     z-index: 3;
     font-weight: 100;
     font-size: 2vh;
     background-color: #FF7F00;
     color: white;
}
 .button:hover {
     opacity:0.95;
     border: solid 1px #FFF;
     text-decoration: none;
     transform: scale(1.01);
}
 main{
     grid-area: main;
     background-color: var(--main-bg-color);
     position: static;
     z-index: auto;
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 70vh 50rem 90vh;
     grid-template-areas: "intro" "profile" "photo";
}
 footer{
     grid-area: foot;
     background-color: var(--accent-dark);
     position:relative;
     z-index: 2;
     box-shadow: 0 4px 8px 5px rgba(0, 0, 0, 0.2);
     padding: 1em;
     display: grid;
     grid-template-columns: repeat(3,1fr);
     grid-template-areas: "social social cop" 
}
 section{
     background-color: var(--section-color);
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
 article{
     padding: 1em;
}
 @media screen and (min-width: 1080) and (min-height: 1920) and (orientation: portrait){
     *{
         font-size: 2vw;
    }
}
 @media screen and (min-width: 1600px) and (min-height: 850px) and (orientation:landscape){
     *{
         font-size: 1.2rem;
    }
     body{
         display: grid;
         grid-template-columns: repeat(5,1fr);
         grid-template-rows: 5vh 85vh 10vh;
         grid-template-areas: "head . . . ." "main main main main main" ". . . foot foot";
    }
     main{
         display: grid;
         grid-template-columns: 10vw repeat(3,2fr) 10vw ;
         grid-template-rows: 1fr 5fr 1fr;
         grid-column-gap: 2vw;
         grid-template-areas: ". . . . . " ". intro profile photo . " ". . . . . " 
    }
     #intro, #profile, #photo{
         border-radius: 1vh;
         position: relative;
        /* required for z-index to take effect */
         z-index: 10;
        /* higher than header/footer */
         will-change: transform;
         overflow: hidden;
        /* contain the pseudo-element */
         background-color: rgba(255, 255, 255, 0.1);
        /* transparent bg for blur to show */
         transition: transform 0.3s ease;
		 overflow-y: auto;
		 padding-bottom: 1rem; /* optional: avoids scrollbar overlay */
    }
     #intro:hover, #profile:hover, #photo:hover {
         border: solid 2.2px #FFF;
         text-decoration: none;
         transform: scale(1.08);
         z-index: 20;
    }
     #intro:hover::before, #profile:hover::before, #photo:hover::before {
         content: "";
         position: absolute;
         top: -100vh;
         left: -100vw;
         width: 300vw;
         height: 300vh;
         backdrop-filter: blur(6px);
         background: rgba(255, 255, 255, 0.01);
        /* enables backdrop-filter */
         z-index: -1;
         pointer-events: none;
    }
     .blur-overlay {
         position: fixed;
         inset: 0;
         backdrop-filter: blur(6px);
         background: rgba(0, 0, 0, 0.1);
         pointer-events: none;
         opacity: 0;
         transition: opacity 0.3s ease;
         z-index: 5;
        /* below the hovered card (z-index: 10/20) */
    }
    /* This works only if .blur-overlay is a sibling AFTER the hovered card */
     #intro:hover ~ .blur-overlay, #profile:hover ~ .blur-overlay, #photo:hover ~ .blur-overlay {
         opacity: 1;
    }
    /* Preserve original card backgrounds */
     #intro {
         grid-area: intro;
         background-color: var(--section-color);
         color: white;
    }
     #profile{
         grid-area: profile;
         background-color: var(--white);
         color: black;
    }
     header{
         border-radius: 0 0 0.5vh 0vh;
         min-height: 5vh;
         padding: 0.5em 1em;
    }
     footer{
         border-radius: 0.5vh 0 0 0;
    }
     header>a{
         margin-left: 1vw;
    }
     footer>a{
         margin-left: 1vw;
    }
     social{
         grid-area: social;
         font-size: 1.3vmax;
    }
     social>div{
         font-size: 1.2rem;
    }
     social img {
         max-width: 100%;
         max-height: 100%;
         height: auto;
         width: auto;
         object-fit: contain;
         box-sizing: border-box;
    }
}