*{
    margin: 0;
    font-family: "kanit";
}

/*----------HOME PAGE----------*/

#home-about{
    height: 100vh;
    width: 100%;
    color:white;
    background-color: #161418;
}

.menu{
    list-style-type: none;
}

.head{
    font-family:"kanit","sans-seriff";
    position: fixed;
    width: 100%;
    /*background-color: red;TEMP*/
}

.bar{
    display: flex;
    justify-content: space-between;
    padding-block: 24px;
    padding-bottom: 17px;
    padding-inline: 40px;
    margin: 0;
}

.logo{
    height:100%;
    width: 10vw;;
    background-image: url(Images/max-logo.png);
    background-size: 100%;
    border:none;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
}

.logo:hover{
    cursor:pointer;
}

.menu-right{
    display: flex;
}


#expansion-container{
    position: relative;
    display: flex;
}

#menu-selection{
    background-color: #00539c;
    border-radius:  20px;
    color:white;
    padding: 10px;
    padding-inline: 20px;
    border:none;
    z-index: 3;
    transform-origin:right;
}

/*Menu list of items (shown when expanded)*/
.menu-content {
    position: fixed;
    top:100%;
    right:0;
    top: 0;
    width:300px;
    height: 100vh;
    background-color: #00539c;
    border: none;
    transition: all 0.4s ease;
    overflow: hidden;
    z-index:-2;
    display: flex;
    align-items: center;
    justify-content: center;
    right:-300px;
    transition: 0.35s ease;

}

#menu-selection:hover{
    cursor: pointer;
}


.menu-content li{
    text-align: center;
    list-style: none;
}


.menu-content.expanded {
    right:0;
    transition: 0.35s ease;
}

.menu-content.expanded ul {
    opacity: 1;
}

.sidebarText{/*Text within the side bar buttons*/
    margin: 0;
    margin-left: 30px;
    color: white;
    display: inline-block;
    position: relative;

}

.sidebarText::after{/*Underline effect for the text within the side bar*/
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #C2B280;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.sidebarText:hover::after{/*Also part of the underline effect for the side bar*/
    transform: scaleX(1);
    transform-origin: bottom left;
}

.sidebar-container{
    width: 100%;
    padding:0;
}

.sidebar-links{
    width: 100%;
    display: flex;
    justify-content: baseline;
    align-items: center;
    text-decoration: none;
}

.item-icons{
    width: 15%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 1/1;
    height: auto;
}

#home-icon{
    background-image: url(Images/home-btn.png);
}

#portfolio-icon{
    background-image: url(Images/portfolio-btn.png);
}

#contact-icon{
    background-image: url(Images/contact-btn.png);
    background-size: 80%;
}

.sidebarItems{/*Text for contens of side bar*/
    color:white;
    background-color: transparent;
    font-size: 30px;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    border:none;
    text-align: left;
    transition: ease 0.4s;
    display: flex;
    align-items: center;
}

.sidebarItems:hover{/*Hover over side bar button*/
    background-color: #393E3C;
    .sidebarText{
        color:#C2B280;
    }
}

#language-btn{
    position: relative;
    background-color: white;
    color:black;
    padding: 10px;
    border:none;
    border-radius: 20px;
    padding: 10px;
    padding-inline: 20px;
    margin-right: 10px;
    z-index: -3;
}

#first-half{
    height: 100vh;
    width: 100%;
}

#home-container{
    padding-top: 5%;
    height: 85%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "kanit", sans-serif;
}

#home-subcontainer{
    --x: calc(var(--posX, 0) * 1px);
    --y: calc(var(--posY, 0) * 1px);
    background: linear-gradient(115deg, #D6F1FF, #0D3B66), 
  radial-gradient(90% 100% at calc(50% + var(--x)) calc(0% + var(--y)), #A1CFFF, #1E4D91), 
  radial-gradient(100% 100% at calc(80% - var(--x)) calc(0% - var(--y)), #87E6FF, #2B6CB0), 
  radial-gradient(150% 210% at calc(100% + var(--x)) calc(0% + var(--y)), #4AD9D9, #1C3FAA), 
  radial-gradient(100% 100% at calc(100% - var(--x)) calc(30% - var(--y)), #00C6FF, #3A7BD5), 
  linear-gradient(60deg, #4A90E2, #6FB1FC);
    border-radius: 20px;
    height: 100%;
    width: 100%;
    margin: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-blend-mode: overlay, overlay, difference, difference, difference, normal;

}

#examples{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1005%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(22%2c 20%2c 24%2c 1)'%3e%3c/rect%3e%3cpath d='M 0%2c176 C 57.6%2c150 172.8%2c46 288%2c46 C 403.2%2c46 460.8%2c177.4 576%2c176 C 691.2%2c174.6 748.8%2c36 864%2c39 C 979.2%2c42 1036.8%2c197.6 1152%2c191 C 1267.2%2c184.4 1382.4%2c43 1440%2c6L1440 560L0 560z' fill='rgba(34%2c 33%2c 34%2c 1)'%3e%3c/path%3e%3cpath d='M 0%2c485 C 96%2c449.8 288%2c302 480%2c309 C 672%2c316 768%2c522.4 960%2c520 C 1152%2c517.6 1344%2c341.6 1440%2c297L1440 560L0 560z' fill='rgba(49%2c 49%2c 49%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1005'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
}

#info-container{
    width: 100%;
    height: 80%;
    margin: 5%;
    display: flex;
    justify-content: center;
    background-color: none; /*TEMP*/
    gap:20px;
}



#about-me{
    width: 50%;
}

#side-container{
    border-radius: 12px;
    width: 50%;
    display: flex;
    flex-direction: column;
    gap:20px;
}

/*Cards at the bottom of the home page*/
.info-cards{
    background-color:#222330;
    border-radius: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /*overflow:hidden*/
}

.info-cards h3{
    font-size: 2em;
    letter-spacing: 0.05em;
}

#tools{
    height: 50%;
    
}

#carousel-wrapper{
    width: 100%;
    position: relative;
    overflow: hidden;
}


#tools-carousel{
    display: flex;
    width: max-content;
    justify-content: left;
    animation: scroll 10s linear infinite;
    
}

#language-bars{
    width: 100%;
}

@keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

#BR-container{
    display: flex;
    height: 50%;
    gap:20px;

}

#skills{
    width: 50%;
}

#skill-list{
    text-align: left;
    font-size: 20px;
    margin-top: 10px;
}

#languages{
    width: 50%;
}

/*---LANGUAGE BAR MODIFICATIONS---*/



.progress-wrapper {
    width: 100%;
    margin-block: 5px;
    background-color: #f0f0f0c4;
    border-radius: 999px;
    overflow: hidden;
    height: 25px;
    display: flex;

}

.progress-segment {
    flex: 1;
    border-right: 1px solid #f0f0f0;
    transition: background-color 0.3s;
}

.progress-segment:last-child {
    border-right: none;
}

.filled {
    background-color: rgb(88, 211, 252);
}

.language-name {
  min-width: 80px; /* Adjust as needed */
  font-size:20px;
  text-align: left;
}

.language-skill{
    width: max-content;
}

#lb-width{
    width: 80%;
    display: flex;
}

/*---ENDS HERE---*/

.tool-container{
    flex-shrink: 0;
}

.tool{
    height: 170px;
    aspect-ratio: 1/1;
    width: auto;
    /*padding-inline: 20px;THIS CHANGES THE LAYOUT OF THE PAGE SO BE CAREFUL*/
    background-color: none;/*TEMP*/
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#Da-Vinci{
    background-image: url(Images/da-vinci-resolve-logo.png);
    background-size: 80%;
}

#Photshop{
    background-image: url(Images/pohotshop-logo.png);
}

#vs-code{
    background-image: url(Images/vs-code-logo.png);
    background-size: 80%;

}

#blender{
    background-image: url(Images/blender-logo.png);
}

#max-9{
    background-image: url(Images/max-9.png);
}

#cover{/*DIV that pops up when side nav is open to focus on side bar*/
    position: fixed; /*fixed allows bar to follow screen with scrolling*/
    width:100%;
    background-color: black;
    height: 100vh;
    z-index: 5;
    top:0;
    transition: 0.35s ease;
    opacity: 80%;
    display: none;
    z-index: -5;
}

#cover.active{
    display: block;
    transition: 0.35s ease;
}




@media screen and (max-width:768px){
    .logo{
        background-image: url(Images/max-short.png);
        background-size: 85%;
    }
    #info-container{
        flex-direction: column;
        width: 90%;
    }
    #about-text{
        margin: 15px;
    }
    #about-me{
        width: 100%;
        height: fit-content;
    }
    #side-container{
        width: 100%;
    }
    #tools{
        height: fit-content;
    }
    #tools-carousel{
        height: 40%;
    }
    #BR-container{
        flex-direction: column;
    }
    #skills{
        width: 100%;
        padding-block: 20px;
    }
    #languages{
        width: 100%;
    }
    .tool{
        height: 110px;
    }
    .card::before,
    .card::after {
    animation: none; /*Gets rid of animation on mobile sinc eit seems a bit laggy*/
    }
    #lib-width{
        width: 100%
    }
    

}

/*----------END OF HOME PAGE----------*/

/*----------PORTFLIO PAGE----------*/

.portfolio-title{
    color:white;
    font-size: 4rem;
    padding-top: 10%;
}

#portfolio-background{
    background: url(ocean.svg);
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.portfolio-subtitle{
    color:white;
    font-size:2rem;
}

.media-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.media-item{
    width: 200px;
    height: 100%;
    background-color: white;
    border-radius: 12px;
}

.p-backgrounds{
    width: 100%;
    height: 30vh;
    display: flex;
    gap:20px;
}

#video-timeline{
    background-color: #0D3B66;
}

#digital-timeline{
    background-color: #00C6FF;
}

#physical-timeline{
    background-color: red;
}

@media screen and (max-width:768px){
    .portfolio-subtitle{
        text-align: center;
        font-size: 1.8rem;
    }
    .portfolio-title{
        color:white;
        font-size: 3rem;
        padding-top: 20%;
    }
}

/*----------END OF PORTFLIO PAGE----------*/

/*----------CONTACT PAGE----------*/

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --clr-1: #052b2f;
  --clr-2: #073438;
  --clr-3: #0e4b50;
  --clr-4: #2d8f85;
  --clr-5: #637c54;
}

#contact-title{
    color: white; 
    font-size: 50px;
    text-align: center;
    margin-bottom: 10%;
}

#contact-background{
    position: fixed;
    z-index: -999;
    background-color:  #073438;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100vh;
    align-items: center;
}

.card {
  height: 70vh;
  aspect-ratio: 1 / 1.5;
  background: var(--clr-1);
  border-radius: 0.5rem;
  position: relative;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  inset: -0.5rem;
  z-index: -1;
  background: conic-gradient(
    from var(--gradient-angle),
    var(--clr-3),
    var(--clr-4),
    var(--clr-5),
    var(--clr-4),
    var(--clr-3)
  );
  border-radius: inherit;
  animation: rotation 5s linear infinite;
}

.card::after {
  filter: blur(3.5rem);
}

@keyframes rotation {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

.form-content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

form{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.input-text{
    padding:5px;
    padding-inline: 10px;
    border-radius: 5px;
    border:none;
}

.actual-form{
    width: 100%;
    height: 100%;
    margin: 10%;
}

.form-subtitle{
    color:white;
}

.text-area{
    resize: none;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 20px;
}

.submission-wrapper{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.submit-btn{
    border-radius: 20px;
    border: none;
    background-color: #0e4b50;
    color:white;
    font-size: 1rem;
    padding: 0.5rem;
    padding-inline: 1rem;
}

.submit-btn:hover{
    cursor: pointer;
}

@media screen and (max-width:768px){
    #contact-title{
        font-size: 2.3rem;
    }
    .card{
        height: 75vh;
    }
}



/*----------END OF CONTACT PAGE----------*/