/*
Color THEME from pixel phone
Dark color: 96, 79, 70
Medium color: 205, 162, 140
Light color: 226, 192, 174

Back-drop for images: rgb(233, 225, 222)
*/
* {
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth; /*Creates smooth transitions when doing auto anchor scroll*/
    scroll-padding-top: 47px; /* height of sticky header when shrunk (Experimental to fix anchor bookmarks)*/
}
body {
    background: #fefefe;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.6em;
    color: rgb(0, 0, 0);
    background-color: rgb(248, 239, 236); /*Material you background color*/  /*Another option rgb(250, 243, 237);*/
    /*Important because first we need main-content to display as inline block in order to avoid overlapping 
    with other divs. But then inline block will always float to the right. Put text-align: center; in body fixes this*/
    text-align:center; 
    margin:0; /*Make navbar, body and wide images all reach the very max of the window width */
    overflow-x: hidden;
}

#navbar{  /*Create a sticky/fixed navbar*/
    position: fixed; /*this make it sticky/fixed nav bar*/
    top: 0; /* 0 pixels away from the top (might not be necessary)*/
    width: 100%; /*Make sure navbar take full span of screen*/
    padding: 6px 0px; /* top/bottom padding:6px, left/right:0px;  (give navbar desired thickness)*/ 
    z-index: 99; /* make sure its always on top of everything else: put a big value */
    background-color:white;
    box-shadow: none; /*May not be necessary*/
    /*border: 1px solid orange; /*for testing puposes*/
}
#navbar a {  /*Style the navbar links*/
    font-family: 'Roboto', sans-serif;
    font-weight:500;
    letter-spacing: 0.01em;
    float: left; /*All of the navbar links float on same line (left)*/
    color: #5f6368; /*color of the links in the navbar*/
    text-decoration: none; /*We don't want the default link underline*/
    padding: 10px 17px; /*top and bottom: 10px, right and left: 12px */ /*Padding around each link*/
    line-height: 25px; /*the height of the navbar link button */
}
#navbar #logo {  /*Style the logo*/
    font-size: 18px; /*font size of logo*/
}
#navbar-right {  /*position of the links*/
    float:right;
    font-size: 14px;
}
#navbar a:hover{  /*behaviour of the nav links*/
    color: black;
    transition: 0.3s;
}
#navbar-content{  /*This is for both the logo and navbar links*/
    width:95%;
    margin: auto;
}
#burger-icon{  /*Make burger icon normally invisible*/
    display:none; /*By default burger icon not visible*/
}
#menu-icon{
    font-size:25px;
}



.main-content{
    /*Make the div not overlap with other div*/
    /*But causes entire div to float left, fix with text-align center in body*/
    display:inline-block; 
    text-align: center;  /*Needed to overcome the text-align center of the body*/
    width:1200px;
    margin-top:20px;
    margin-bottom:20px;
    /*border: 1px solid blue;*/
}

.ultra-big-title{
    font-family: 'Roboto', sans-serif;
    text-align: left;
    font-size: 96px;
    font-weight:700; /*for roboto*/
    line-height: 1.04;
    letter-spacing: -0.02em; /*for roboto*/
    margin-top:80px;
    /*border: 1px solid red;*/
}

.smaller-title{
    font-family: 'Roboto', sans-serif;
    text-align: left;
    font-size: 48px;
    font-weight:700; /*for roboto*/
    line-height: 1.04;
    letter-spacing: -0.02em; /*for roboto*/
    margin-top:80px;
    /*border: 1px solid red;*/
}

.section-card{
    position:relative;
    /*border-radius: 2%/6%;*/
    height: 400px;
    width:100%;
    padding:5%;
    /*********The Fab Four Technique********* for dynamic border radius*/
    /*Border radius disapears 400px or less, 24px represents the desired pixel radius */
    border-radius: max(0px, min(24px, (100% - 400px + 1px) * 9999)) / 24px;
    /*border: 1px solid blue;*/
}
.section-title{
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size: 80px;
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color:white;
    padding-top: 20px;
    padding-bottom: 80px;
    /*border: 1px solid aqua;*/
}

.quote{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto; 
    margin-right: auto; 
    width: 50%;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 40px;
    color: rgb(255, 255, 255);
    bottom: 20px;
    /*border: 1px solid aqua;*/
}
/*For quotes animation*/
.reveal{
    /*transform: translateY(150px);*/
    opacity: 0;
    transition: 2.5s all ease;
}
.reveal.active{
    /*transform: translateY(0);*/
    opacity: 1;
 }

.white-section{
    position: relative;
    /*border-radius: 2%/8%;*/
    float:left;  /*keeps the white section div at the very top of its parent div*/
    background-color: rgb(255, 248, 245);
    width: 100%;
    /*********The Fab Four Technique********* for dynamic border radius*/
    /*Border radius disapears 400px or less, 24px represents the desired pixel radius */
    border-radius: max(0px, min(24px, (100% - 400px + 1px) * 9999)) / 24px;
    /*border: 1px solid rgb(128, 0, 0);*/
}


.text{
    display:inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: rgb(104, 96, 95);
    line-height: 40px;
    margin-top: 50px;
    margin-bottom: 30px;
    margin-right: 60px;
    margin-left: 60px;
    /*border: solid 1px red;*/
}

.text-left{
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: rgb(104, 96, 95);
    line-height: 40px;
    margin-top:50px;
    margin-bottom: 30px;
    margin-left: 60px;
    margin-right: 60px;
    /*border: solid 1px green;*/
}

.emphasized-text{
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: rgb(0, 0, 0);
    line-height: 40px;
    /*border: solid 1px red;*/
}


.link-area{
    color:#1f1f1f; 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:20px;
    padding-bottom:40px;
    /*border: 1px solid rgb(128, 0, 0);*/
}
.button{
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    position:relative;
    display:flex;
    border-radius: 25px;
    font-size: 14px;
    padding: 6px 25px;
    padding-top: 8px;
    background-color: rgb(226, 192, 174);
    /*background-color: rgb(241, 177, 127); /*Another option*/
}
.button:hover{
    background-color: rgb(96, 79, 70);
    cursor: pointer;
}
.button:hover .link-text{
    color:white;
}
.button:hover .material-symbols-outlined{
    color:white;
}
.button:hover img{
    filter: invert(1);
}


/*How the blue links will behave*/
.link-area a:link{
    color:black; /*Make sure links are blue by default*/
    text-decoration:none; /*If we dont have this, the link will be underlined by default*/
}
.link-area a:visited{
    color:black; /*Make sure visited links still stay blue*/
}


.link-icon{
    width:20px;
    padding-right:6px;
    padding-top:5px;
    /*border: 1px solid red;*/
}
/*For the icons from google*/
.material-symbols-outlined {
  font-size:17px;
  padding-right:5px;
  padding-top: 4px;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  /*border: 1px solid red;*/
}
.link-text{
    color: rgb(0, 0, 0);
    /*border: 1px solid aqua;*/
}


.categories{
    display:flex;
    flex-wrap: nowrap;
    justify-content:center;
    gap: 14px;
    /*border: 1px solid green;*/
}
.catcard{
    position:relative;
    text-align: center;
    height:auto;   /*previous height: 460px;*/
    width:24%;   /*previous width:289px;*/
    border-radius: 4%/3%;
    overflow:hidden;/*needed so that image zoom doesnt spill out of div*/
    /*border: 1px solid pink;*/
}

/*Use CSS Nesting, so when we hover over the cat card, then we also activate attributes of another css element cat-image*/
.catcard:hover{
    cursor: pointer;

    > .cat-image{
        filter:brightness(35%);
        transform:scale(1.1);
    }
}

.cat-image{
    border-radius: 4%/3%;
    filter:brightness(60%);
    object-fit: cover; /*image shoudld cover the entire container*/
    height:100%; 
    width:100%;
    transition: 0.4s; 
}
.cat-title{
    font-weight:500;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size: 22px;
    color:white;
    user-select: none;
}
.fake-button{
    position: absolute;
    font-size: 13px;
    font-weight:500;
    color: white;
    border: 2px solid rgb(255, 255, 255);
    padding: 4px 25px;
    display:inline; /*keeps the borders from stretching to edges*/
    /*positioning in absolute*/
    top: 85%;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width:100px; /*need width to make this positioning work*/
}



#portfolio-background{
    background-image: url(images/section/pawel-czerwinski-1.jpg);
    background-position: center;
    background-size:cover;
}
#project-background{
    background-image: url(images/section/pawel-czerwinski-2.jpg);
    background-position: center;
    background-size:cover;
}
#education-background{
    background-image: url(images/section/pawel-czerwinski-3.jpg);
    background-position: center;
    background-size:cover;
}
#skills-background{
    background-image: url(images/section/pawel-czerwinski-4.jpg);
    background-position: center;
    background-size:cover;
}
#experience-background{
    background-image: url(images/section/pawel-czerwinski-5.jpg);
    background-position: center;
    background-size:cover;
}
#contact-background{
    background-image: url(images/section/pawel-czerwinski-6.jpg);
    background-position: center;
    background-size:cover;
}



.left-column{
    float: left;
    width:48%;
    /*border: 1px solid red;*/
}
.right-column{
    position: relative;
    float: right;
    width:48%;
    /*border: 1px solid blue;*/
}






.left-column-school-image{
    float: left;
    width:576px;
    height:439px;
}
.right-column-school-image{
    position: relative;
    float: right;
    width:576px;
    height:439px;
}
.image-container{
    height: 100%;
    background-color: rgb(233, 225, 222);
    /*********The Fab Four Technique********* for dynamic border radius*/
    /*Border radius disapears 400px or less, 24px represents the desired pixel radius */
    border-radius: max(0px, min(24px, (100% - 400px + 1px) * 9999)) / 24px;
    overflow: hidden;
}
.image-portion{
    height:75%;
    /*border: solid green 1px;*/
}
.image-footer{
    height:25%;
    /*border: solid purple 1px;*/
}
.school-image{
    height:100%;
    width:100%;
    object-fit: cover;
}
.image-footer{
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: rgb(104, 96, 95);
    line-height: 36px;
    padding-top: 18px;
    padding-bottom: 5px;
    padding-left: 30px;
}




.wide-image{
    width:100%;
    border-radius: 2%/3%;
}

.medium-image-right{
    width:90%; /*previous width:398px;*/ 
    /*border-radius:2%/4%;*/
    /*border: solid red 1px;*/
    /*float:right;*/
}
.medium-image-left{
    width: 90%;
    /*border-radius:2%/4%;*/
}

.medium-image-right-desktop{
    width:99%;
    /*opacity:0;  Caused jittering issue when resizing the page
    transform: translateY(-5%);
    transition: all 2s;*/
}

.medium-image-right-tablet{
    position:absolute;
    width:250px;
    top:80%;
    left:10%;
    transform: rotate(-10deg);
}
.medium-image-right-phone{
    position:absolute;
    width:175px;
    top:102%;
    right:10%;
    transform: rotate(10deg);
}





/*CSS related to the staggering icons*/
.container-three-column-cards{
    width:60%;
    margin: 50px auto;
    /*border: 1px solid red;*/
}
.card-container {   /*Currently not used*/
    width: 100%;
    margin: 50px auto;
    border: 3px solid green;
}

.two-column-cards{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /*4 columns*/
    grid-auto-rows: auto; /*how tall is one row*/
}

.three-column-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*4 columns*/
    grid-auto-rows: auto; /*how tall is one row*/
}

.five-column-cards{
    display: grid;
    grid-template-columns: repeat(5, 1fr); /*4 columns*/
    grid-auto-rows: auto; /*how tall is one row*/
}

.card{
    text-align: center;
    padding: 10px 10px; /*padding inside card*/
    margin-top:10%;
    margin-bottom: 10%; /*margin outside card*/
    width: 200px; /*max width of card*/
    height: 200px; /*max height of card*/
    margin-left: auto;/*make image centered inside block*/
    margin-right: auto;/*make image centered inside block*/
    background: rgb(238, 231, 227); /*Color of card*/
    color: rgb(104, 96, 95);/*Text color*/
    text-decoration: none; /*removes underline from text, since underline appears when make card a link*/
    border-radius: 9%;
    /*border: 1px solid #000000;/*border around card*/
}
.card-image {
    text-align: center;
    width:115px; /*width of image*/
    padding-top: 25px;
    margin-top: 0%;
    margin-left: auto;
    margin-right: auto;
    height:70%; /*image takes 70% of card*/
    /*border: 1px solid green;*/
}
.card-title {
    padding: 5px 5px;
    text-align: center;
    font-size: 16px;
    height:30%; /*text takes 30% of card*/
    /*border: 1px solid rgb(200, 0, 0);*/
}
.card:hover {
    transform: scale(1.05);
    transition: 0.2s;
    box-shadow: 0 0 40px -10px rgba(0, 0, 0, 1),
                0 0.5px 0px 0 rgba(255, 255, 255, 0.3) inset; /*inset creates shadow inside the box, needed to add the light shine on top of box*/
    transition-delay: 0ms; 
}
.hidden{  /*for the staggering icons*/
    opacity:0;
    transform: translateX(-5%);
    transition: all 0.5s;
}
.show{
    opacity:1;
    transform: translateX(0);
    transition-delay: var(--delay);
}