/* ------------ Fonts ------------*/

@font-face {
    font-family: 'OTMiniature-Regular';
    src: url('../fonts/OTMiniature-Regular.otf');  
}
@font-face {
    font-family: 'OTMiniature-Bold';
    src: url('../fonts/OTMiniature-Bold.otf');  
}
@font-face {
    font-family: 'OpenSans-Bold';
    src: url('../fonts/OpenSans-Bold.ttf');  
}
@font-face {
    font-family: 'OpenSans-SemiBold';
    src: url('../fonts/OpenSans-SemiBold.ttf');  
}
@font-face {
    font-family: 'OpenSans-Regular';
    src: url('../fonts/OpenSans-Regular.ttf');  
}

h1, h2, h3, h4, h5, h6, p{
    width: fit-content;
}
h1{
    font-family: 'OTMiniature-Regular';
    font-size:calc(3em + 3vw);
}
h2{
    font-family: 'OpenSans-SemiBold', sans-serif;
    font-size:calc(1.2em + 1vw);
    letter-spacing:-0.02em;
}
h3{
    font-family: 'OTMiniature-Regular';
    font-size:calc(2em + 0.6vw);
}
h4{
    font-family: 'OTMiniature-Regular';
    font-size:calc(1.1em + 0.5vw);
}
h5{
    font-family: 'OpenSans-Regular', sans-serif;
    font-size:calc(1.1em + 0.6vw);
    letter-spacing:-0.02em;
}
h6{
    font-family: 'OTMiniature-Bold';
    font-size:calc(1.4em + 0.6vw);
}
p{
    font-family: 'OpenSans-Regular', sans-serif;
    font-size:calc(0.8em + 0.4vw);
    letter-spacing:-0.02em;
    line-height: 1.4;
}
li{
    font-family: 'OpenSans-Regular', sans-serif;
    font-size:calc(0.6em + 0.6vw);
    letter-spacing:-0.02em;
    line-height: 1.4;
}
ul{
    list-style-type: circle;
    list-style-position: inside;
}
img{
    width:100%;
}
.rounded-corner{
    border-radius: 0.6em;
}
.border{
    border: solid black 0.09em;
}
.arrow{
    width: 1em;
    height: auto;
}
.social-icon{
    width: calc(1.8em + 0.4vw);
}
hr{
    border: none;
    border-top: solid black 0.09em;
    width:100%;
}
body{
    background-color: white;
    cursor: none;
}
.body-container{
    padding: 7em 20vw 6em 20vw;
    gap:3em;
    opacity: 0;
    animation: fadeIn 1.5s forwards;
}
.body-item{
    gap:1em;
}

/* ------------ Custom Cursor ------------*/

.cursor {
    position: fixed;
    height: 40px;
    width: 40px;
    transform: translate(-50%, -50%) scale(0.8);
    
    background-image: url('../imgs/icons/StarWhite.svg');
    mix-blend-mode: exclusion;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    /* starts off of the page */
    left:-5em; 
    top:-5em;

    z-index: 5;

    transition: transform 350ms ease;
    transform: translate(-50%, -50%) scale(0.8);
}
  
.custom-cursor--link {
    transform: translate(-50%, -50%) scale(1.5);
}

/* touch screen no cursor */
@media (hover: none) and (pointer: coarse){
    .cursor {
      display: 'none';
      background-image: none;
    }
}
a:active{
    cursor:none;
}
a:hover{
    cursor:none;
}

/* ------------ Interactive Elements ------------*/
button{
    color:#000000;
}
button:hover{
    cursor:none;
}
.button{
    padding:0.5em 1em 0.5em 1em;
    border:solid black 0.09em;
    border-radius: 0.6em;
    width:fit-content;
    gap:0.5em;
    align-items: center;
}
a {
    text-decoration: none;
    color:black;
    width:fit-content;
}

.button:hover{
    cursor:none;
    color:white;
    background-color: black;
}
.button:hover path{
    fill:white;
}
/* back to top button */
#myBtn {
    display: none;
    position: fixed;
    right:8vw;
    bottom:8vw;
    z-index: 1;
    background-color: white;
    color: black;
    padding:0.5em 1em 0.5em 1em;
    border:solid black 0.085em;
    border-radius: 0.6em;
    font-size:calc(0.8em + 0.3vw);
}
  
#myBtn:hover {
    background-color: black;
    color:white;
}

/* ------------ Flexbox ------------*/

.flex{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.row{
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.column{
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.wrap{
    -webkit-flex-wrap: wrap;   /* Safari 6.1+ */
    -ms-flex-wrap: wrap;       /* IE 10 */
    flex-wrap: wrap;
}

/* ------------ Nav bar ------------*/
nav{
	position:fixed;
	width:100%;
    height:fit-content;
	top:0;
    padding: 0.8vw 0em 0.8vw 0em;
    color:black;
    background: rgba(255, 255, 255, 0.5);
    z-index:3;
    justify-content: space-between;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 0.09em solid black;
    opacity: 0;
    animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.nav-left{
	margin:0em 0em 0em 2em;
}
.nav-right{
	margin:0em 2em 0em 0em;
    align-items: center;
}
.condensed { 
	display: none;
}
.underline{
    text-decoration: underline;
    font-family: 'OpenSans-SemiBold', sans-serif;
}
#menu-close{
    display:none;
}

nav ul, .menu-content ul{
    list-style-type: none;
}
nav li{
    float: left;
    font-size:calc(1em + 0.3vw);
    letter-spacing:-0.02em;
    font-family: 'OpenSans-Regular', sans-serif;
}
nav li:not(:last-child) { margin-right: calc(2vw + 1em);  }

nav li:hover{
    text-decoration: underline;
}
nav a h1 { 
    color:black; 
    font-size:calc(2.6em + 0.3vw);
}
  
nav a {
    color:black;
    text-decoration-style: solid;
}

nav button{
    color:white;
    background-color: black;
    border:none;
    margin:0;
    padding:auto;
    font-size:calc(1em + 0.3vw);
    font-weight:700;
}

.menu-content{
  position:fixed;
  z-index: 2;
  top:0;
  left:0;
  background-color: white;
  width: 100%;
  height:100%;
  padding-top:5em;
  padding-left:2em;
  padding-right:2em;
  line-height:2.6em;
  display:none;
}

.menu-content li{
  font-size:calc(1.2em + 0.3vw);
}

/* ------------ Footer ------------*/
footer{
    align-items: center;
    gap:calc(1em + 2vw);
    border-top: solid black 0.09em;
    padding: 3em 0em 4em 0em;
}
.footer-social-container{
    gap:calc(0.2em + 4vw);
}
.footer-social{
    gap:0.5em;
    align-items: center;
}
.designed-by p{
    font-size:calc(0.6em + 0.6vw);
}
footer h5{
    font-size:calc(0.8em + 0.6vw);
}
/* ------------ Index page ------------*/
.index-header{
    justify-content: space-between;
    align-items: flex-end;
}
#about-me-mobile{
    display:none;
    height:fit-content;
    margin-left: 0;
}
#about-me{
    margin-top:0.5em;
}
.index-left{
    max-width: calc(15em + 20vw);
    gap:0.5em;
}
.index-right{
    justify-content: flex-end;
    align-items: flex-end;
}
.say-hello{
    width:fit-content;
    height:fit-content;
    gap:0.5em;
}
.social-icons{
    justify-content: space-between;
}
.card{
    padding:1.5em;
    border:solid black 0.09em;
    border-radius: 0.6em;
    gap:1em;
}
.card-tags{
    justify-content: space-between;
    gap:0.5em
}
.card-tags p{
    background-color:#EEEEEE;
    padding:0.4em 0.8em;
    border-radius:3em;
}
.card-title{
    gap:0.4em;
}
/* ------------ Project pages ------------*/

.overview-container{
    padding:2em 0em 2em 0em;
    border-top: solid black 0.09em;
    border-bottom: solid black 0.09em;
    gap:2em;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.overview-item{
    gap:1em;
    flex:1;
}
.drop-shadow{
    filter: drop-shadow(0 0 0.75rem rgb(0,0,0,25%));
    margin:2em 0em;
}
.two-img-container{
    gap:1em;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.arcanamini-video{
    width:100%;
    height:auto;
}
.two-column-item{
    flex:1;
    justify-content: center;
}

/* ------------ About page ------------*/
.about-title{
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.star-icon {
    transition: transform 0.3s ease;
}
.star-icon.rotated {
    transform: rotate(45deg);
}
.about-content-box {
    border: solid black 0.09em;
    
}
.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border: solid #000000 0.09em;
    border-top:none;
    border-radius: 0.6em;
    gap:1em;
}
.content p:first-child {
  margin-top: 1em; 
}
.content p:last-child {
  margin-bottom: 1em;
}

.about-divider{
    border-top: solid #000000 0.09em;
    width:100%;
}

.collapsible {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.collapsible h5{
    color: #000000;
}
/* ------------ Responsivity ------------*/
@media(max-width:30em){
    .nav-right .expanded{
		display: none;
	}
	.nav-right .condensed{
		display: inline-block;
	}
    .index-header{
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        align-items: flex-start;
        gap:1em;
    }
    #about-me{
        display:none;
    }
    #about-me-mobile{
        display:flex;
    }
    .index-right{
        width:100%;
        justify-content: space-between;
    }
    h1{
        font-family: 'OTMiniature-Regular';
        font-size:calc(2em + 6vw);
    }
    .index-left{
        max-width: 100%;
    }
    
}

@media(max-width:60em){
    .body-container{
        padding: 6em calc(0.5em + 4vw) 6em calc(0.5em + 4vw);
    }
	.footer-social-container{
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .overview-container{
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.collapsible-section {
    width: 100%;
}