main.css

:root {

    --font-family: 'Hanken Grotesk';
    --font-size: 24px;
    --bg-col: rgba(233, 233, 233, 1);
    --txt-col: rgba(0,0,0,1);
    --article-col:rgb(129, 255, 196);
    --section-bg:rgb(252, 86, 255);
    --button-activebg:rgb(246, 0, 250);
    --button-innerbg: rgba(207, 189, 219, 0.747); 
    --shadows-article1: rgb(221, 155, 222);
    --shadows-img:rgb(0, 255, 132);
    color:rgb(240, 113, 103)
}

@font-face {
    font-family: eskool;
    src: url(fonts/eskool.regular.ttf);
  }

  @font-face {
    font-family: neutralface;
    src: url(fonts/NeutralFace.otf);
  }

  @font-face {
    font-family: garamond;
    src: url(fonts/EBGaramond12-Regular.ttf);
  }


  @font-face {
    font-family: youngserif;
    src: url(fonts/YoungSerif-Regular.otf);
  }



/*BODY*/

* {
    margin: 0;
    padding: 0;
}

body {
    background-color:var(--bg-col);
    color: var(--txt-col);
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height:2.85em;
    text-align:start;
    -webkit-font-smoothing: antialiased;
}

h1 {
    display:revert;
}

a, a:visited {
    text-decoration: none;
    color: inherit;
    background-image: linear-gradient(var(--txt-col), var(--txt-col));
    background-size: 0% 4px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 1s cubic-bezier(0.095, 0.82, 0.165, 1);
}

a:hover, a:active {
    background-size: 100% 4px;
}

ul {
    list-style-type: none;  
    padding-inline-start: 0px;
}




/*HEADER*/
.header_main {
    width: 100vw;
    max-width:100%;
    min-height: 100vh;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content:center;
}



/* HEADER - BUTTONS */
.button {
    background-color:var(--section-bg); 
    border:none;
    shape-outside: circle();
    clip-path: circle(150px);
    font-size: 1.3em;
    width:300px;
    height:300px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;        
}

.firstInner {
    background-color: var(--button-innerbg); 
    padding:140px;
    clip-path: circle(147px);
}



.btnName {
    text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5), 0px -1px 1px rgba(255, 255, 255, 0.25);
}
  
.righttoLeft {
    display:none;
    min-width: 1000px;
    text-align: left;
    

}

.button:hover .btnName, .button:focus .btnName {
    display:none;
}

.button:hover .righttoLeft, .button:focus .righttoLeft {
    display:block;
    animation-name: righttoLeftAni;
    animation-duration: 14s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  @keyframes righttoLeftAni {
    0% {
    transform: translateX(67%);
    }
    100% {
      transform:translateX(-20%);
    } 
  }


.button:hover, .button:focus {
    background-color: var(--button-activebg); 
    background-size: 0% 4px;
}

.button:active {
    background-color: #81b9ff;
}








/* INDIVIDUAL BUTTONS STYLING */


 
.firstInner.work {
    animation: bounce 4s;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
    animation-direction: alternate;
    
    &:hover {
        animation-play-state:paused;
    }
}

@keyframes bounce {
    from { clip-path: circle(120px);}
    to   { clip-path: circle(150px); }
  } 









/* Access Settings pop up */
.modal {
    padding:1em;
    max-width: 100ch;
    margin:auto;
    background-color:rgba(233, 233, 233, 1);
    color: rgba(0,0,0,1);
    box-shadow: 20px 20px 10px black;
    
}

.modal h2 {
    font-size: 1.4em;
    text-align: center; 
    padding: 0.8em; 
}

.modal h3 {
    font-size: 1em;
    text-align: right;  
}

/* Styling buttons in Access Settings */
.asbtn {
    border: none;
    font-size: 1.3em;
    cursor: pointer;
}

.close-modal {
    border: none;
    font-size: 1em;
    cursor: pointer;
    text-align: center;
}

.close-modal:hover {
    cursor:
    url(img/close.svg),
    auto;
}

.span_title {
    font-weight: 900;
}




/* ID STYLING EACH BUTTON */
#fsb1{
    font-size: 24px;
}

#fsb2{
    font-size: 30px;
}

#fsb3{
    font-size: 38px;
}


#ffb1{
    font-family: 'Hanken Grotesk';
}

#ffb2{
    font-family: 'garamond';
}

#ffb3{
    font-family: 'eskool';
}

#ffb4{
    font-family: 'neutralface';
}

#ffb5{
    font-family: 'Yatra One';
}

#ffb6{
    font-family: 'youngserif';
}


#csb1{
    background-color: rgb(129, 255, 196) ;
    color: rgba(0,0,0,1);
    box-shadow: 0px 10px 0px rgb(252, 86, 255), 0px -10px 0px rgb(221, 155, 222);
}

#csb2{
    background-color: rgb(48, 0, 67);
    color: rgb(232, 232, 232);
    box-shadow: 0px 10px 0px rgb(31, 24, 24), 0px -10px 0px rgba(110, 83, 120, 0.865);
}

#csb3{
    background-color: #fed9b7;
    color: #0f171a;
    box-shadow: 0px 10px 0px #00afb9, 0px -10px 0px #fdfcdc;
}






/* BACK BUTTON */
.backbtn {
    left:25px;
    bottom:25px;
    position: fixed;
    z-index:4;
    opacity:0.5;
}

.backbtn a:hover {
    cursor:url(img/up.svg),
    auto;
}





/* Body Section */
.container {
    /* position: relative; */
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    width: 100vw;
    max-width: 100%;
}

.section {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word; 
    -moz-hyphens: auto;
    hyphens: auto;
    background-color: var(--section-bg);
    overflow-wrap: break-word; 
    font-size: 1.3em;
    display: flex;
    flex-flow: column wrap;
    align-items:center;
    padding: 1em;
 

}

.section h1 {
    font-size: 2.4em;
    padding: 0.5em;
}

.section h2 {
    font-size: 2.2em;
    padding: 0.5em 0 0.5em 0;
}

.article1 {
    background-color: var(--article-col);
    margin:0.5em;
    padding: 0.6em;
    font-size: 2em;
    border-radius: 0.25em;
    box-shadow: 10px 20px 0px var(--shadows-article1);
}

.article1 img {
    max-width: 1000px;
    width:100%;
    box-shadow: 20px 20px 0px var(--shadows-img);
    margin: 20px 0 20px 0;
}

.article1 h2 {
    font-size: 1em;
}

.article1 p {
    padding: 0.5em 0 0.5em 0;
}











/*ID SECTIONS*/

#header {
    opacity:1;
    transition: opacity 0.5s;
}

#about {
    /* min-height: 100vh;
    max-width: 100%;
    padding: 3rem;*/
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 150px 1fr 1fr 1fr;
    /* display: flex;
    flex-flow: column wrap;*/
    align-items:start; 
    text-align: left; 
    opacity:1;
    transition: opacity 0.5s;
}

  
#about h1 {
    grid-column: 1/2;
    grid-row: 1/2;
    justify-self:center;
} 


#about .article1 {
    grid-column: 2/4;
    grid-row: 2/5;
}

#portrait {
    padding: 1em;
    justify-self:center;
    grid-column: 1/2;
    grid-row: 2/3;
}


#work {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 8em 5em repeat(2, auto) 5em repeat(5, auto);
    opacity:1;
    transition: opacity 1s;
}

#work h1 {
    grid-column: 1/2;
    grid-row: 1/2;
    justify-self:center;
} 




#fl {
    grid-column: 2/4;
    grid-row: 2/3;
    justify-self: center;
    align-self: center;
}

#freelance {
    grid-column: 2/4;
    grid-row: 3/4;
    opacity:1;
    transition: opacity 1s;
}

#freelance2 {
    grid-column: 1/3;
    grid-row: 4/5;
    opacity:1;
    transition: opacity 1s;
}


#fc {
    grid-column: 2/4;
    grid-row: 5/6;
    justify-self:center;
} 

#odvar {
    grid-column: 2/4;
    grid-row: 6/7;
    opacity:1;
    transition: opacity 1s;
}

#website {
    grid-column: 1/3;
    grid-row: 7/8;
    opacity:1;
    transition: opacity 1s;
}

#pong {
    grid-column: 2/4;
    grid-row: 8/9;
    opacity:1;
    transition: opacity 1s;
}

#moviedata {
    grid-column: 1/3;
    grid-row: 9/10;
    opacity:1;
    transition: opacity 1s;
}

#memorygame {
    grid-column: 2/4;
    grid-row: 10/11;
    opacity:1;
    transition: opacity 1s;
}






#dev {
    min-height: 100vh;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    /* background-color: rgb(54, 54, 200);  */
    opacity:1;
    transition: opacity 0.5s;
}

#dev h1{
    padding: 2em;
    width: 100%;
    text-align: center;
}

#from {
    /* min-height: 100vh; */
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    opacity:1;
    transition: opacity 0.5s;
}

#contact {
    min-height: 100vh;
    /* background-color: blue; */
    opacity:1;
    transition: opacity 0.5s;
}