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

:root{
  
  font-family: 'Nova Square', sans-serif;

  --color1: #ff8274; /* title */
  --color2: #d53c6a; /* fc4445 */
  --color3: #7c183c; /**/
  --color4: #460e2b;
  --color5: #31051e;
  --color6: #1f0510;
  --color7: #130208; /*background*/
}

html,
main,
body{
  background-color: var(--color6);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

p{
  font-family: 'Play', sans-serif;
  color: var(--color2);

}

main{
  margin-top: 13vh;
}

h1{
  color: var(--color2);
  text-decoration: underline;
}
h4{
  color: var(--color2);
  font-size: 4em;
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar{
  width: 8px;
}

::-webkit-scrollbar-track{
  background: var(--color2);
}
::-webkit-scrollbar-thumb{
  background: var(--color5);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{
  transition: 500ms ease;
  background: var(--color1);
}

@media (max-width: 2560px){
  .gone1{
    display: none;
  }

  .header{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;

    height: 13vh;

    background-color: var(--color2);
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    flex-direction: row;

    align-content: stretch;

    flex-wrap: wrap;

    z-index: 100;

    border-bottom: solid 5px var(--color3);
  }

  .header-item,
  .header-item2{
    color: var(--color4);

    padding: 1rem;
    border-radius: 1rem;

    text-decoration: none;
    transition: all 500ms;

    font-size: 20px;
  }
  
  .header-item:hover{
    color: var(--color1);
    background-color: var(--color4);
    transform: scale(1.7);
  }

  .header-item2:hover{
    color: var(--color1);
    background-color: var(--color4);
    transform: scale(1.7);
  }

  .main-header-image,
  .main-header-image2{
    background-color: var(--color2);

    border-radius: 2rem;

    transition: all 300ms ease-in-out;
  }

  .main-header-image:hover{
    transform: translateY(65px)scale(1.5);

    border-bottom: solid 5px var(--color3);
  }

  .common-text{
    text-align: center;
    font-size: 2.5em;
    padding: 1em;
    padding-left: 4em;
    padding-right: 4em;
    transition: 3000ms ease;
  }

  .common-text:hover,
  .grid-text:hover{
    transition: 3000ms ease;
    color: var(--color1);
  }

  .footer-container{
    background-color: var(--color2);
    height: 15vh;

    border-top: solid 5px var(--color3);
  }

  .footer-contact{
    text-align: center;
    font-size: 3em;
    color: var(--color6);

  }

  .container2{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    column-gap: 5rem;

    margin-top: 1em;

    font-size: 1.5em;
  }

  .option1{
    text-decoration: none;
    color: var(--color7);
    transition: 500ms ease;
  }

  .option1:hover{
    color: var(--color1);
  }

  /* artifacts page */

  .artifact-title{
    text-align: center;
    font-size: 6em;
    transition: 500ms ease;
  }

  .artifact-title:hover{
    color: var(--color1);
    transition: 500ms ease;
  }

  .art-grid-container,
  .art-grid-container-M,
  .art-grid-container-j{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 250em;
    align-items: center;
    padding: 0;
    margin: 0;
  }

  .art-grid-container p{
    justify-content: center;
  }

  .grid-images,
  .gi2{
    width: 50vw;
  }

  

  .gi2:hover{
    width: 60vw;
    transform: translateX(-32px);
  }

  .art{
    align-items: center;
  }

  .choice-container{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .first-section{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  h4:hover{
    color: var(--color1);
    transition: 500ms ease-in-out;
  }

  .grid-text{
    font-size: 2em;
    text-align: center;
    transition: 3000ms ease;
    padding: 1.5em;
  }

  .grid-buttons{
    font-size: 2em;
    column-gap: 1.5em;
  }

  .grid-buttons a{
    color: var(--color1);
    text-decoration: none;
  }

  .buttons{
    padding: .5em;
    border-radius: 50%;
    transition: 500ms ease;
  }

  .buttons:hover{
    background-color: var(--color2);
    color: var(--color1);

    transition: 500ms ease;
  }


  /* Contact me */

  .iframe-container{
    background-color: var(--color1);
  }

  iframe{
    margin-left: auto;
    height: 100vh;
    width: 99vw;
    align-items: center;
    text-align: center;
    color: var(--color1);
  }

  /* more on */

  .art-grid-container-M{
    height: 150em;
  }
  .more-on-img-c{
    display: flex;
  }
  .more-on-img{
    width: 25vw;
  }

  .art-grid-container,.ano-grid{
    height: 30em;
  }

  .art-grid-container-j{
    height: 80em;
  }

  /* Resume */


  .resume-container1{
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
  }

  .resume-container2{
    height: auto;
    width: 70vw;

    border: solid 0px var(--color5);
    border-radius: 20px;

    background-color: var(--color3);
  }
  .resume-name{
    font-size: 5em;
    text-align: center;
    
    color: var(--color7);

    margin: 0;
    transition: 500ms ease-in;
  }

  .resume-name:hover{
    color: var(--color1);
  }

  .resume-text,
  .resume-text2{
    color: var(--color1);
    font-size: 2em;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-bottom: .5em;
  }

  .resume-links{
    text-decoration: none;
    color: var(--color1);
    transition: 500ms ease-in-out;
  }
  .resume-links:hover{
    color: var(--color6)
  }

  .skills-section{

  }

  .resume-text2{
    text-align: left;
    padding-left: 5em;
    padding-top: 1em;
    text-decoration: underline;
    text-decoration-color: var(--color7);
  }

  

  .resume-list{
    margin-left: 10em;
    color: var(--color1);
    font-size: 1.3em;
    padding-right: 10em;

  }

  .resume-list li{
    margin-top: .5em;
  }

  .resume-text3{
    text-align: left;
    padding-left: 6em;
    font-size: 2em;
    color: var(--color6);
    transition: 300ms ease-in-out;
  }
  .resume-text3:hover{
    color: var(--color1);
    
  }

}
@media (max-width: 1920px){
 
}
@media (max-width: 1536px){
 
}
@media (max-width: 1440px){
  
}
@media (max-width: 1366px){
  
}
@media (max-width: 1280px){

  .footer-container{
    height: auto;
  }

  .footer-contact{
    font-size: 2em;
  }

  .container2{

  }

  .container11,
  .container12,
  .container13{
    font-size: 1em;
  }

  .option1{
    font-size: 20px;
  }

  .resume-container2{
    height: auto;
    width: 70vw;

    border: solid 0px var(--color5);
    border-radius: 20px;

    background-color: var(--color3);
  }

  .grid-text{
    font-size: 1.5em;
  }

  h4{
    font-size: 2.5em;
  }


}
@media (max-width: 1280px) and (max-height: 800px){
 
}
@media (max-width: 1280px) and (max-height: 720px){
 
}
@media (max-width: 1024px){
  
}
@media (max-width: 820px){
  
}
@media (max-width: 810px){
  
}
@media (max-width: 800px){
 
}
@media (max-width: 768px){
 .header-item,
 .header-item2{
  font-size: 1em;
 }
}
@media (max-width: 601px){
 
}
@media (max-width: 500px){
  main{
    margin-top: 0;
  }

  /* CHANGES */
  .artifact-title{
    font-size: 4em;
  }

  .common-text{
    font-size: 1.2em;
    padding: .5;
  }

  .footer-container{
    flex-direction: column;
    height: 20%;
  }

  .footer-contact{
    font-size: 2em;
  }

  .container2{
    flex-direction: column;
  }

  .container11,
  .container12,
  .container13{
    font-size: 1em;
  }

  .option1{
    font-size: 20px;
  }



  .resume-container2{
    height: auto;
    width: 70vw;

    border: solid 0px var(--color5);
    border-radius: 20px;

    background-color: var(--color3);
  }

  .resume-name{
    font-size: 3em;
    text-align: center;
    
    color: var(--color7);

    margin: 0;
    transition: 500ms ease-in;
  }

  .resume-text,
  .resume-text2{
    color: var(--color1);
    font-size: 1em;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-bottom: .5em;
  }

  .resume-text3{
    font-size: 20px;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .skills-section{
    margin-bottom: 1.5em;
  }

  .resume-list{
    margin: 0;
    display: flex;
    flex-direction: row;
    column-gap: 1em;
  }

  .resume-list li{
    font-size: 12px;
    padding: 0;
    margin: 0;
    display: block;
  }

  .art-grid-container-M,
  .art-grid-container-j{
    height: auto;
  }

  h4{
    font-size: 1em;
  }

  .grid-text{
    font-size: 1em;
  }

  .grid-buttons{
    font-size: 1em;
  }
  /* CHANGES */

  .gone1{
    display: block;
  }

  .gone2{
    display: none;
  }

 .first-sector{
  display:none;
 }
 .second-sector{
  display: block;
 }

 .header{
  position: fixed;
  top: 0;
  left: 0;

  height: 100vh;
  width: 45vw;

  background-color: var(--color2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;


  row-gap: 12%;


  transition: all 1000ms;

  border-top-right-radius: 25%;
  border-bottom-right-radius: 25%;
  border-right:solid 4px var(--color1);
}

.header-item,
.header-item2{
  color: var(--color4);

  padding: 1rem;
  border-radius: 1rem;

  text-decoration: none;
  transition: all 500ms;

  font-size: 20px;
}

.header-item:hover{
  color: var(--color1);
  background-color: var(--color4);
  transform: scale(1.7);
}

.header-item2:hover{
  color: var(--color1);
  background-color: var(--color4);
  transform: scale(1.7);
}

.main-header-image,
.main-header-image2{
  background-color: var(--color2);

  border-radius: 2rem;

  transition: all 500ms;  
}

.main-header-image:hover{
  transform: translateY(60px)scale(1.5);
}

.button{
  position: fixed;

  top: 1;
  left: 0;

  width: 40px;
  height: 40px;

  font-size: 24px;

  border-color: var(--color1);
  background-color: var(--color3);
  color: var(--color1);

  border-left: none;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;

  z-index: 99;
}

.button2{
  width: 40px;
  height: 40px;

  font-size: 24px;

  border-color: var(--color1);
  background-color: var(--color3);
  color: var(--color1);

  border-radius: 20%;
}

.offdisplay{
  transform: translateX(-45vw);
}

.ondisplay{
  transform: translateX(0);
  display: inline-flex;
  width: 45vw;
}

}
@media (max-width: 428px){
  
}
@media (max-width: 414px){
 
}
@media (max-width: 390px){
 
}
@media (max-width: 376px){
 
}
@media (max-width: 375px){
  
}

.hidden{
  opacity: 0;
}

.seen{
  transition: 1500ms;
  opacity: 1;
}

.notslided{
  transform: translateX(-100%);
}
.slided{
  transition: 1000ms;
  transform: translateX(0);
}

@keyframes opacity10 {
  100%{
    opacity: 1;
  }
}