@font-face{
    font-family: "Exodus";
    src: url("fonts/Exodus/ExodusDemo-Stencil.otf") 
}

@keyframes transitionIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*{
    border: 1px solid #090909;
}*/

::selection {
  color: #F0F0F0;
  background: #F00000;
}

*{
    scrollbar-width: none;
}

title{
    font-family: "Lexend Zetta", sans-serif;
}

body{
    color: #0F0F0F;
    background-color: #F0F0F0;
    margin: 0;
    text-transform: uppercase;
    font-family: "Lexend Zetta", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    animation: transitionIn 1s;
}

nav{
    display: flex;
    flex-direction: row;
}

.intern-nav,
.extern-nav{
    font-size: 0.5625rem;
    height: 1.23rem;
}

.intern-nav > ul,
.extern-nav > ul{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.intern-nav > ul > a,
.extern-nav > ul > a,
.work-list > li > a{
    width: clamp(100px, 13vw, 200px);
    text-align: center;
    line-height: 1.23rem;

    background: linear-gradient(#0F0F0F, #0F0F0F);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: 0.4s;
}

.intern-nav > ul > a:hover,
.extern-nav > ul > a:hover,
.work-list > li > a:hover{
    color: #F0F0F0;
    background-size: 100% 100%;
    transition: 0.4s;
}

.main-nav-a > li{
    font-size: 0.7rem;
    font-weight: 900;
    color: #F0F0F0;
    margin-top: 3px;
    padding: 2px 7px 2px 0;
    text-align: end;
    border: #0F0F0F 1px solid;

    background: linear-gradient(#0F0F0F, #0F0F0F);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: 0.4s;
}

.main-nav-a > li:hover{
    color: #0F0F0F;
    background-size: 0% 100%;
    border: #0F0F0F 1px solid;
    transition: 0.4s;
}

.intern-nav{
    display: flex;
    justify-content: flex-end;
    border-bottom: 0.1vh solid #0F0F0F;
}

.intern-nav > ul > a{
    border-left: 0.1vw solid #0F0F0F;
}

.extern-nav > ul > a{
    border-right: 0.1vw solid #0F0F0F;
}

.extern-nav{
    display: grid;
    grid-template-columns: 1fr auto;
    border-top: 0.1vh solid #0F0F0F;
}

.work-title{
    margin-bottom: 8.5vh;
}

.work-list{
    margin: 0 0 0 3.9vw;
    font-weight: 200;
    font-size: clamp(20px, 2vw, 40px);
    text-decoration: underline 0.8px #0F0F0F;
    text-underline-offset: 4%;
}

main{
    flex-grow: 1;
    margin: 8.5vh 3vw 8.5vh 3vw;
}

main > nav{
    margin-top: 8.5vh;
}

.main-content-nav{
    display: flex;
    justify-content: end;
}

.main-content-nav > ul{
    width: 288px;
}

h1{
    font-size: clamp(50px, 13.7vw, 400px);
    margin: 0;
    font-family: "Exodus", sans-serif;
    font-weight: normal;
    line-height: 75%;
}

p{
    font-size: 0.7rem;
    margin: 4.2rem 0;
    line-height: 150%;
}

.main-p{
    width: clamp(200px, 64.8vw, 996px);
}

.main-p > a,
.main-about-p > a{
    font-weight: bolder;
    text-decoration: underline;

    background: linear-gradient(#0F0F0F, #0F0F0F);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: 0.4s;
}

.main-p > a:hover,
.main-about-p > a:hover{
    color: #F0F0F0;
    background-size: 100% 100%;
    transition: 0.4s;
}

.main-about-p{
    width: clamp(200px, 65vw, 1024px);
}

.about-pic{
    width: 24rem;
    height: 31.388rem;
    object-fit: cover;
}

.main-about{
    display: flex;
    justify-content: space-between;
}

.main-about > img{
    align-self: center;
}

iframe{
    margin-left: 96px;
    width: 62.5vw;
    height: 76.8vh; 
}

a{
    text-decoration: none;
    color: #0F0F0F;
}

ul{
    padding: 0;
    margin: 0;
}

li{
    list-style: none;
}