/* 
==========================
STYLESHEET FOR ALL PAGES 
==========================
*/

/*  FONT STYLING IMPORTS FROM GOOGLE FONTS */

@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/* ----------------------CSS ROOT PROPERTIES -----------------------------------*/
/* Root properties allows me to have a central place for basic styles like fonts and colors so that its easier to update my code and reduce repetitive code  */

:root {
    --color-bg: #e2fefe;
    --color-bg-linear: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);

    --color-surface: #defcfc;
    --color-surface-alt: #79d1e2;
    --color-border: #22455f;
    --color-text: #16293D;
    --color-text-light: #9a9590;
    --color-accent: #4eb6af;
    --color-accent-dark: #23646d;
    --color-white: #f5f2eb;
    --color-alt: #ddbe7d;
    --color-error: #d9534f;
    --color-box-shadow: #010100;

    --glass-bg: rgb(255,255,255,0.25);
    --glass-bg-hover: rgba(36, 34, 32, 0.6);
    --glass-border: rgba(201, 168, 76, 0.15);
    --glass-border-hover: rgba(201,168, 76, 0.35);
    --glass-blur: blur(12px);
    --glass-shadow: 0 6px 6px rgb(0 0 0 / 20%), 0 0 20px rgb(0 0 0 / 10%);
    --glass-text-shadow: 0 2px 4px rgb(0 0 0 / 10%);


    --font-heading: "Exo", sans-serif;
    --font-body: "Inter", sans-serif;
    --font-mono: monospace;

}

/* CSS RESET & BASE STYLING */
/* Used to reset the styling to default so that it may be the same on all browsers */

*, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Scroll-Behaviour added for smooth anchor link navigation currently only on form submit  */
html{
    scroll-behavior: smooth;
    font-size: 16px;
}




body{
    background-image: var(--color-bg-linear);
    color: var(--color-text);
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 300px;
}
/* Using a container with position fixed so that the orbs can move across the entire screen width and height and also overflow: hidden is used to prevent the orbs going off the screen and making the page extend further than what is intended. */
.orb-container{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -5000;
    overflow: hidden;
}

.orb {
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    background: radial-gradient(circle, #00c9ff 0%, #00c9ff 60%, transparent 90%);
    box-shadow: 
            0 0 20px 20px #00c9ff, 
            0 0 60px 40px  #00c9ff,
            0 0 100px 60px  #55a6bd;

    filter: blur(10px);
    animation: orb-mover-1 35s alternate-reverse linear infinite  ;
}


.orb:nth-of-type(1) {
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    z-index: -5000;
    background: radial-gradient(circle, #e5b421 0%, #e5b421 60%, transparent 90%);
    box-shadow: 
            0 0 20px 20px #e5b421, 
            0 0 60px 40px  #e5b421,
            0 0 100px 60px  #ffc109;

    filter: blur(6px);
    animation: orb-mover-2 60s alternate-reverse linear infinite  ;
}

.orb:nth-of-type(2) {
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    z-index: -5000;
    background: radial-gradient(circle, #e5b421 0%, #e5b421 60%, transparent 90%);
    box-shadow: 
            0 0 20px 20px #e5b421, 
            0 0 60px 40px  #e5b421,
            0 0 100px 60px  #ffc109;

    filter: blur(6px);
    animation: orb-mover-3 30s alternate-reverse linear infinite  ;
}

@keyframes orb-mover-1 {
    0% { translate: 10vw 5vh;}
    15% { translate: 40vw 20vh;}
    30% { translate: 15vw 10vh;}
    45% { translate: 20vw 45vh;}
    60% { translate: 30vw 60vh;}
    75% { translate: 35vw 70vh;}
    90% { translate: 45vw 85vh;}
    100% { translate: 50vw 95vh;}
}

@keyframes orb-mover-2 {
    0% { translate: 80vw 15vh;}
    15% { translate: 50vw 5vh;}
    30% { translate: 20vw 30vh;}
    45% { translate: 65vw 55vh;}
    60% { translate: 10vw 75vh;}
    75% { translate: 45vw 60vh;}
    90% { translate: 75vw 85vh;}
    100% { translate: 15vw 95vh;}
}

@keyframes orb-mover-3 {
    0% { translate: 50vw 50vh;}
    15% { translate: 15vw 15vh;}
    30% { translate: 85vw 35vh;}
    45% { translate: 30vw 70vh;}
    60% { translate: 75vw 20vh;}
    75% { translate: 5vw 45vh;}
    90% { translate: 60vw 65vh;}
    100% { translate: 90vw 10vh;}
}


/* Using flex:1 so that <main> always fills out the entire space left over and footer is pushed to end */
main{
    flex: 1;
}

a{
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-body);
}

h1 {
    font-family: var(--font-heading);
}

p {
    font-family: var(--font-body);
}




/* Defining glass look of containers so that I can just add the class where I need in the HTML */

.glass{
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px rgba(201, 168 , 76, 0.15);
    box-shadow: 0 6px 6px rgb(0, 0 ,0 , 0.2), 0 0 20px rgba(0,0,0,0.1);
    text-shadow: var(--glass-text-shadow);
}

.glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255,0.5), inset -1px -1px 1px 1px rgb(255, 255, 255, 0.5);
    pointer-events: none;
  }

  /* pointer-events:none is used to allow click to propagate through the pseudo-element or else items in the overlay created by the pseudo-element wont be accessible */



/* ------------------------- HEADER & NAVIGATION ---------------------------------*/

 /* Small devices (Phones, 300px and up) - media query - for good responsiveness */
@media (min-width: 300px) {


 nav{
    position: sticky; 
    top: 0;
    z-index: 100;
    height: 8.5vh;
    backdrop-filter: var(--glass-blur);
    display: flex;
    justify-content: center;

 }

/* position: sticky is used to keep the nav bar at the top and a blur effect is used to blur content behind the nav bar */

 nav ul{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    min-width: 40vw;
    max-width: 80vw;
    list-style: none;
    font-size: 3.5vw;
    
 }

 nav ul a{
    display: inline-block;
    color: var(--color-accent-dark);
    border-radius: 15px;
    transition: all 250ms ease-in-out;
    padding: 10px 15px;
    letter-spacing: 0.04em;
    font-family: var(--font-mono);
 }



 nav ul a:hover{
    color: var(--color-white);
    background-color: var(--color-surface-alt);
 }

 nav ul a:active{
    box-shadow: inset -3px -3px 4px rgba(26, 35, 50, 0.181), 
                inset 2px 3px 4px rgba(26, 35, 50, 0.508);
    transform: translate(1px, 1.5px) scale(0.95);
    transition: transform 20ms ease-out, box-shadow 20ms ease-out;
 }




 .active{
    color: var(--color-accent);

 }



 h1{
    text-align: center;
    font-size: 7Vh;
 }
 
}

/* Medium devices (tablets, 768px and up) - media query - for good responsiveness  */
@media (min-width: 768px) {

 nav{
    justify-content: flex-end;
    }
 nav ul{
    max-width: 50vw;
    font-size: 1.5rem;
    margin-right: 8vw;
    
 }
}

/* Large devices (desktops, 992px and up) - media query - for good responsiveness  */
@media (min-width: 992px) {

 nav ul{
    margin-right: 0;
    
 }
}



  



/* ----------------------------------- INDEX HTML -------------------------------------------- */

 /* Small devices (Phones, 300px and up) - media query - for good responsiveness */
@media (min-width: 300px) {
 .hero{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    width: 75%;
    margin: 30px auto;
    height: auto;
    border-radius: 30px;
    gap: 20px;
 }


 .hero h2{
    grid-row: 1/2;
    padding-top: 20px;
    font-size: 2rem;
    text-align: center;
    width: 60%;
    align-self: center;
    justify-self: center;
 }

 .hero p {
    grid-row: 3/4;
    text-align: center;
    padding-bottom: 20px;
    width: 50%;
    align-self: center;
    justify-self: center;
    
 }

 .hero img {
    grid-row: 2/3;
    width: 64%;
    border-radius: 30px;
    box-shadow: var(--glass-shadow);
    transition: all 200ms ease-in-out;
    align-self: center;
    justify-self: center;
 }

 .hero img:hover{
    transform: rotate(10deg) translateY(-25px);
    cursor: pointer;
    z-index: -5;
 }


 .intro{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 18vh;
    margin: 10px auto;
    border-radius: 30px;

 }

 .intro h2{
    font-size: 2rem;
    text-align: center;
    margin: 20px 0;
 }

 .intro p{
    width: 85%;
    margin-bottom: 25px;
    text-align:center;
 }
 
}

/* Medium devices (tablets, 768px and up) - media query - for good responsiveness  */
@media (min-width: 768px) {
 .hero{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    width: 65%;
    height: 65vh;
 }


 .hero h2{
    grid-column: 1/1;
    grid-row: 2/3;
    text-align: center;
    width: 60%;
 }

 .hero p {
    grid-column: 1/1;
    grid-row: 3/4;
    text-align: center;
    padding: 5px 0 20px 0;
    width: 75%;
 }

 .hero img {
    grid-column: 2/3;
    grid-row: 1/5;
    min-width: 220px;
    max-width: 90%;
 }
}

/* Large devices (laptops, 992px and up) - media query - for good responsiveness  */
@media (min-width: 992px) {
 .hero{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    width: 65%;
    height: 55vh;
 }

}
  


/* --------------------------------------ABOUT.HTML ------------------------------------------------------- */

 /* Small devices (Phones, 300px and up) - media query - for good responsiveness */
@media (min-width: 300px) {
    
 .about-main{
    width: 75%;
    height: auto;
    margin: 30px auto;
    border-radius: 30px;
    padding-bottom: 30px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    align-content: center;
    gap: 10px;
 }

 .about-main h2{
    text-align: center;
    font-size:2.2rem;
    margin: 1vh;
    grid-row: 1/2;
 }

 .about-main img{
    grid-row: 2/3;
    width: 60%;
    object-fit: cover;
    border-radius: 20px;
    justify-self: center;
    align-self: center;
 }

 .about-main p{
    text-align: center;
    width: 70%;
    font-size:1rem;
    padding-top: 0.5vh;
    grid-row: 3/4;
    justify-self:  center;
 }

 .about-skills{
    width: 85%;
    margin: 30px auto;
    padding: 20px;
    border-radius: 30px;
    padding-bottom: 30px;
 }

 .about-skills h2{
    text-align: center;
    font-size:2.2rem;
    margin: 1vh;
 }

 /* Get the table to display and behave like a block elements so that flex properties can be used */

 #table{
    display: block;
    
 }       

 #table{
    margin: 50px auto;
    table-layout: fixed;
    width: 80%;
    text-align: center;
    border-collapse: separate;
    border-spacing: 10px;
    border-radius: 30px;
 }

 tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
 }

 th{
    padding: 30px 0 10px 0;
    font-size: 1.8rem;
 }

 td{
    flex: 1 1 auto;
    min-width: 120px;
    padding: 10px 30px;
 }


 .table-card{
    position: relative;
    height: 140px;
    border-radius: 20px;
    box-shadow: inset 4px 4px 8px rgba(26, 35, 50, 0.06), 
                inset -4px -4px 8px rgba(255, 255, 255, 0.9);
    padding: 10px;
    transition: all ease-in-out 250ms;
 }

 .table-card:hover{
    cursor: pointer;
    fill:#12fff7;
    box-shadow: inset -4px -4px 12px rgba(26, 35, 50, 0.06),
                inset 1px 1px 8px rgba(122, 244, 255, 0.9),
                inset 4px 4px 12px rgba(255, 255, 255, 0.9),
                inset -4px -4px 8px rgba(122, 244, 255, 0.9);
 } 

 /* Used a div here as my positioning context as using position:relative on the td elements are not providing reliable results in getting my images to change on the same position */

 .inner-table-card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
 }

 #table img{
    height: 80px;
    display: block;
    margin: 0 auto ;
 }

 #table .table-card .icon-hovered{
    height: 60px;
 }

 .table-card .icon-static{
    opacity: 1;
    visibility: visible;
    transition: all 50ms ease-in-out;
 }

 .table-card .icon-hovered{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: all 50ms ease-in-out;
 }
 /* Position absolute used so that the .hovered element can occupy the same space in the document flow as .static for the transition effect */




 .table-card:hover .icon-hovered{
    opacity: 1;
    visibility: visible;
 }

 .table-card:hover .icon-static{
    opacity: 0;
    visibility: hidden;
 }
}

/* Medium devices (tablets, 768px and up) - media query - for good responsiveness  */
@media (min-width: 768px) {
 .about-main{
    max-height: 65vh;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);

 }

 .about-main h2{
    grid-column: 1/2;
    grid-row: 2/3;
    align-self: flex-end;
 }

 .about-main p{
    padding-top: 0.5vh;
    grid-column: 1/2;
    grid-row: 3/4;
    justify-self:  center;
  }

 .about-main img{
    grid-column: 2/3;
    grid-row: 1/7;
    width: 75%;
    max-height: 90%;
    justify-self: center;
    align-self: center;
 }

}
  


/* -------------------------------------PROJECTS HTML ----------------------------------------------------- */
/* Flex wrap and min-width handle the responsiveness of my project cards, so no media queries needed */
.projects{
    display: flex;
    width: 80%;
    min-height: 60vh;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px auto;
    justify-content: center;
    align-items: stretch;
}

.project-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 20px;
    min-width: 300px;
    min-height: 400px;
    max-width: 30%;
    transition: all 250ms ease-in-out;
}

.project-card:hover{
    cursor: pointer;
    scale: 1.05;
}

.project-card:hover h2{
    color: var(--color-accent);
}

.project-card h2{
    font-size: 1.8rem;
    padding-bottom: 20px;
    transition: all 250ms ease-in-out;
}


.project-card .hovered{
    position: absolute;
    left: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 450ms ease-in-out;

}
/* Position absolute used so that the .hovered element can occupy the same space in the document flow as .static for the transition effect */


.project-card:hover .static{

    opacity: 1;
    visibility: visible;
    transition: all 250ms ease-in-out;
}
.project-card:hover .hovered{
    opacity: 1;
    visibility: visible;
}

.project-card:hover .static{
    opacity: 0;
    visibility: hidden;
}


.project-card img{
    width: 105%;
    height: 50%;
    object-fit: fill;
    align-self: center;
    border-radius: 5px;
    box-shadow: var(--glass-shadow);
}

.project-card p{
    text-align: center;
    margin-top: 40px;
    text-wrap: wrap;
}


/* ----------------------------------- CONTACT HTML -------------------------------------------- */

 /* Small devices (Phones, 300px and up) - media query - for good responsiveness */
@media (min-width:300px) {


 
.contact{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    width: 80%;
    margin: 0  auto 2vh;
    height: auto;
    border-radius: 30px;
    margin-top: 25px;
}

.contact h2{
    grid-column: 1/2;
    grid-row: 1/2;
    font-size: 2rem;
    text-align: center;
    width: 60%;
    margin: 10px auto;
}

.contact h2:last-of-type{
    grid-column: 1/2;
    grid-row: 3/4;
    font-size: 2rem;
    text-align: center;
    width: 70%;
    margin: 10px auto;
}

form{
    display: flex;
    flex-direction: column;
    width: 70%;
    align-self: center;
    justify-self: center;
    grid-column: 1/2;
    grid-row: 2/2;

}

.contact img{
    grid-column: 1/2;
    grid-row: 3/4;
    min-width: 40%;
    max-width: 90%;
    height: 95%;
    border-radius: 30px;
    box-shadow: var(--glass-shadow);
    align-self: center;
    justify-self: center;
    display: none;
}

label{
    font-size: 1rem;
    margin-top: 3px;
}

input, select{
  background: #e0ddee;
  padding: 10px;
  padding-left: 20px;
  height: 40px;
  font-size: 14px;
  border-radius: 50px;
  border: none;
  box-shadow: inset 4px 4px 8px rgba(26, 35, 50, 0.06), 
              inset -4px -4px 8px rgba(255, 255, 255, 0.9);
  margin: 5px 0;

}

select {
    cursor: pointer;
    padding: 0 15px;
    padding-right: 20px;
    color: var(--color-text);

}

textarea {
  background: #e0ddee;
  padding: 15px 10px 15px 20px;
  height: auto;
  min-height: 70px;
  resize: vertical;
  font-size: 14px;
  font-family: var(--font-body);
  border-radius: 20px;
  border: none;
  box-shadow: inset 4px 4px 8px rgba(26, 35, 50, 0.06), 
              inset -4px -4px 8px rgba(255, 255, 255, 0.9);
  margin: 5px 0;
}

input:focus, textarea:focus, select:focus{
  border:none;
  outline: none;
  box-shadow: inset 4px 4px 6px rgba(26, 35, 50, 0.06), 
              inset -4px -4px 6px rgba(255, 255, 255, 0.9),
              0 0 0 4px rgba(2, 239, 243, 0.2);
}

.contact button{
  margin: 20px 0;
  background: linear-gradient(145deg, var(--color-accent-dark), var(--color-accent) , var(--color-accent-dark));
  background-position: right;
  background-size: 200% 200%;
  color: var(--color-bg);
  padding: 14px 32px;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 6px 6px 12px rgba(26, 35, 50, 0.15), 
              -6px -6px 12px rgba(255, 255, 255, 0.7);
  width: 100%;
  letter-spacing: 0.5px;
  transition: all 250ms ease-in-out;
}

.contact button:hover{
    background-position: left;
    transform: scaleY(1.1);
}

.contact button:active{
    box-shadow: inset -4px -4px 8px rgba(26, 35, 50, 0.06), 
                inset 4px 4px 8px rgba(26, 35, 50, 0.595);
    transform: translate(1px, 1.5px) scale(0.98);
    transition: all 20ms ease-out;
    background-position: left;
}

.required-mark{
    color: var(--color-error);
}

address {
    width: 70%;
    align-self: center;
    justify-self: center;
}

address li {
    padding: 0;
    list-style: none;
    border-radius: 50px;
    box-shadow: inset 4px 4px 8px rgba(26, 35, 50, 0.06), 
                inset -4px -4px 8px rgba(255, 255, 255, 0.9);
    margin: 22px 0;
    background: linear-gradient(145deg, #e2d1c3b4, #fdfcfb9e , #e2d1c3b4);
    background-position: right;
    background-size: 150% 150%;
    transition: all 200ms ease-in-out;
}

address li span {
    padding-right: 5px;
}

address li svg {
    width: 30px;
    vertical-align: middle;
    transition: all 200ms ease-in-out;

}

address li:not(:first-of-type){
    margin-top: 30px;
}

address li:hover{
    background-position: left;
    box-shadow: inset -4px -4px 8px rgba(26, 35, 50, 0.06), 
                inset 4px 4px 8px rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

address li:hover svg{
    fill: var(--color-accent);
}

address li:active{
    
    fill: var(--color-accent-dark);
    box-shadow: inset -4px -4px 8px rgba(26, 35, 50, 0.068), 
                inset 4px 4px 8px rgba(26, 35, 50, 0.259);
    transform: translate(1px, 1.5px) scale(0.98);
    transition: all 10ms ease-out;
    background-position: left;
}

address li a {
    display: block;
    font-size: 0.9rem;
    width: 100%;
    height: 100%;
    padding: 15px 10px;
    text-align: center;
}

address li a[href*="raphael.davids"] {
    font-size: 0.8rem;
    word-break: break-all;
}
/* Added word-break: break-all so that the email can wrap inside the <li> element as the screen resizes */



}

/* Medium devices (tablets, 768px and up) - media query - for good responsiveness  */
@media (min-width: 768px) {

 .contact{
    grid-template-columns: 1fr 1.25fr 1fr;
    grid-template-rows: auto 1fr auto;
    width: 85%;
    min-height: 60vh;
 }

 .contact h2{
    margin-top: 20px;
    grid-column: 1/1;
    grid-row: 1/2;
 }

  .contact h2:last-of-type{
    margin-top: 20px;
    width: 80%;
    grid-column: 3/4;
    grid-row: 1/2;
 }

 form{
    grid-column: 1/1;
    grid-row: 2/3;
    margin-top: 10px;
 }

 .contact img{
    grid-column: 2/2;
    grid-row: 1/4;
    display: block;
 }

 address{
    grid-column: 3/4;
    grid-row: 2/3;
    align-self: flex-start;
 }

}

/* Large devices (desktops, 992px and up) - media query - for good responsiveness  */
@media (min-width: 992px) {

 .contact{
    width: 85%;
 }

}


/* FOOTER STYLING ALL PAGES */
/* Display flex is used with flex wrap so no need for media queries to handle responsiveness*/
footer{
    width: 100%;
    margin-top: 40px;
    height: 15vh;
    background-color: #79d0e275;
    border-top: 1px solid var(--color-bg) ;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 20px;
}

footer p, footer a{
    width: 20%;
    font-weight: 600;
    text-align: center;
    vertical-align:middle;
    border-right: 1px solid var(--color-border);
    height: 30px;
    flex: 1;
    min-width: 200px;
}

 footer a:hover{
    color: var(--color-accent-dark);
    text-decoration: underline;
 }

footer img{
    flex: 1;
    max-width: 100px;
    margin: 0 14% 0 14%;
}