@font-face {
    font-family: Magical Neverland;
    src: url(../font/magical-neverland.ttf);
    font-size: 1em;
    letter-spacing: 4px;
}

*{
    margin: 0;
    box-sizing: border-box;
}

body{
    /* scroll-behavior: smooth; Optional for smooth scrolling */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #000000;
    opacity: 1;
    /* https://www.magicpattern.design/tools/css-backgrounds */
    background-image:  linear-gradient(#081a25 3.4000000000000004px, transparent 3.4000000000000004px), linear-gradient(90deg, #081a25 3.4000000000000004px, transparent 3.4000000000000004px), linear-gradient(#081a25 1.7000000000000002px, transparent 1.7000000000000002px), linear-gradient(90deg, #081a25 1.7000000000000002px, #000000 1.7000000000000002px);
    background-size: 85px 85px, 85px 85px, 17px 17px, 17px 17px;
    background-position: -3.4000000000000004px -3.4000000000000004px, -3.4000000000000004px -3.4000000000000004px, -1.7000000000000002px -1.7000000000000002px, -1.7000000000000002px -1.7000000000000002px;
}

.siteHeader{
    height: 60px;
    width: 100vw;
    position: fixed;
    background-color: black;
    z-index: 1000;
    padding: 10px;
    transition: height .6s cubic-bezier(0, 0.4, 0, 1.01);
    transition: background-color .6s cubic-bezier(0, 0.4, 0, 1.01);
    z-index: 10000;
}

#logoLink{
    display: flex;
    gap: 10px;
    justify-content: center;
    text-decoration: none;
}

#menuOptions{
    top: -500px;
    margin: 10px;
    margin: auto;
    width: 70%;
    position: relative;
    /* left: 60px; */
    color: white;
    display: flex;
    /* flex-direction: column; */
    justify-content: space-evenly;
    /* gap: 20px; */
    transition: top .6s cubic-bezier(0, 0.4, 0, 1.01);
}

#menuOptions > a{
    padding-top: 5px;
    padding-bottom: 5px;
    color: white;
    text-decoration: none;
}

#logo{
    height: 40px;
}

#headerName{
    font-family: Magical Neverland;
    color: white;
    text-decoration: none;
    width: auto;
    font-size: 1.5em;
}

/* Section1 */
#section1{
    width: 100vw;
}

.introSection{
    width: 100vw;
    height: 80vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    line-height: 40px;
}

#grantPic{
    width: 30%;
    height: auto;
    object-fit: cover;
}

h1{
    color: white;
    width: 40%;
}

.secondSection{
    width: 100vw;
    height: 100vh;
}

#secondTitle{
    font-family: Magical Neverland;
    font-size: 3em;
    text-align: center;
    width: 100%;
    padding: 15px;
}

.secondBody{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.resumeSection{
    display: flex;
    flex-direction: column;
    width: 50%;
    align-items: center;
    margin: auto;
}


iframe{

}

/* Portfolio Button */
/* https://getcssscan.com/css-buttons-examples */
.portfolioButton {
    --b: 3px;   /* border thickness */
    --s: .45em; /* size of the corner */
    --color: #d4af37;
    
    padding: calc(.5em + var(--s)) calc(.9em + var(--s));
    color: var(--color);
    --_p: var(--s);
    background:
      conic-gradient(from 90deg at var(--b) var(--b),#000 90deg,var(--color) 0)
      var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
    transition: .3s linear, color 0s, background-color 0s;
    outline: var(--b) solid #000;
    outline-offset: .6em;
    font-size: 16px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border: 0;
  
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin: auto;
    margin-top: 20px;
}

.portfolioButton > a{
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    text-decoration: none;
}
  
.portfolioButton:hover, .portfolioButton:focus-visible{
    --_p: 0px;
    outline-color: var(--color);
    outline-offset: .05em;
}
  
.portfolioButton:active {
    background: var(--color);
    color: #fff;
}

@media (max-width: 1020px) {

}

@media (max-width: 750px) {

}

@media (max-width: 450px) {
    #section1{
        width: 100vw;
    }
    
    .introSection{
        width: 100vw;
        height: 80vh;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        line-height: 40px;
        top: 30px;
        position: relative;
    }
    
    #grantPic{
        width: 60%;
        height: auto;
        object-fit: cover;
    }
    
    h1{
        color: white;
        width: 80%;
        font-size: 1em;
        line-height: 25px;
    }
    
    .secondSection{
        width: 100vw;
        height: 100vh;
    }
    
    #secondTitle{
        font-family: Magical Neverland;
        font-size: 3em;
        text-align: center;
        width: 100%;
        padding: 15px;
    }
    
    .secondBody{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    .resumeSection{
        display: flex;
        flex-direction: column;
        /* width: 50%; */
        align-items: center;
        margin: auto;
    }
    
    
    iframe{
        width: 90vw;
    }
    
    /* Portfolio Button */
    /* https://getcssscan.com/css-buttons-examples */
    .portfolioButton {
        --b: 3px;   /* border thickness */
        --s: .45em; /* size of the corner */
        --color: #d4af37;
        
        padding: calc(.5em + var(--s)) calc(.9em + var(--s));
        color: var(--color);
        --_p: var(--s);
        background:
          conic-gradient(from 90deg at var(--b) var(--b),#000 90deg,var(--color) 0)
          var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
        transition: .3s linear, color 0s, background-color 0s;
        outline: var(--b) solid #000;
        outline-offset: .6em;
        font-size: 16px;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        border: 0;
      
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        margin: auto;
        margin-top: 20px;
    }
    
    .portfolioButton > a{
        color: white;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 16px;
        text-decoration: none;
    }
      
    .portfolioButton:hover, .portfolioButton:focus-visible{
        --_p: 0px;
        outline-color: var(--color);
        outline-offset: .05em;
    }
      
    .portfolioButton:active {
        background: var(--color);
        color: #fff;
    }
}