@import url("https://use.typekit.net/cvk4chi.css");
@import url("https://use.typekit.net/cvk4chi.css");


body{
    background-color: black;
    
}

.namecontainer{
    width:100px;
    height:550px;
    position:absolute;
}

.vertical-text h1{
    writing-mode: vertical-rl; 
    transform: rotate(180deg); 
    color: aliceblue;
    font-size: 145px;
    font-family: "fractul-variable", sans-serif;
    font-variation-settings: "wght" 400;
    margin:10px;
    position: flex;
   
  }
  @media only screen and (max-height:1020px ) {
    .vertical-text h1 {
        font-size:140px;
    }
}

@media only screen and (max-height:986px ) {
    .vertical-text h1 {
        font-size:135px;
    }
}

@media only screen and (max-height:951px ) {
    .vertical-text h1 {
        font-size:130px;
    }
}

@media only screen and (max-height:917px ) {
    .vertical-text h1 {
        font-size:125px;
    }
}

@media only screen and (max-height:882px ) {
    .vertical-text h1 {
        font-size:123px;
    }
}
@media only screen and (max-height:868px ) {
    .vertical-text h1 {
        font-size:120px;
    }
}

@media only screen and (max-height:848px ) {
    .vertical-text h1 {
        font-size:117px;
    }
}

@media only screen and (max-height:828px ) {
    .vertical-text h1 {
        font-size:114px;
    }
}

@media only screen and (max-height:806px ) {
    .vertical-text h1 {
        font-size:110px;
    }
}

@media only screen and (max-height:779px ) {
    .vertical-text h1 {
        font-size:109px;
    }
}

@media only screen and (max-height:773px ) {
    .vertical-text h1 {
        font-size:107px;
    }
}

@media only screen and (max-height:759px ) {
    .vertical-text h1 {
        font-size:106px;
    }
}

@media only screen and (max-height:752px ) {
    .vertical-text h1 {
        font-size:104px;
    }
}

@media only screen and (max-height:738px ) {
    .vertical-text h1 {
        font-size:103px;
    }
}

@media only screen and (max-height:731px ) {
    .vertical-text h1 {
        font-size:103px;
    }
}

@media only screen and (max-height:730px ) {
    .vertical-text h1 {
        font-size:100px;
    }
}

@media only screen and (max-height:716px ) {
    .vertical-text h1 {
        font-size:99px;
    }
}

@media only screen and (max-height:703px ) {
    .vertical-text h1 {
        font-size:96px;
    }
}

@media only screen and (max-height:683px ) {
    .vertical-text h1 {
        font-size:94px;
    }
}

@media only screen and (max-height:669px ) {
    .vertical-text h1 {
        font-size:93px;
    }
}

@media only screen and (max-height:662px ) {
    .vertical-text h1 {
        font-size:92px;
    }
}

@media only screen and (max-height:655px ) {
    .vertical-text h1 {
        font-size:91px;
    }
}

@media only screen and (max-height:648px ) {
    .vertical-text h1 {
        font-size:90px;
    }
}

@media only screen and (max-height:641px ) {
    .vertical-text h1 {
        font-size:89px;
    }
}

@media only screen and (max-height:635px ) {
    .vertical-text h1 {
        font-size:88px;
    }
}

@media only screen and (max-height:626px ) {
    .vertical-text h1 {
        font-size:87px;
    }
}

@media only screen and (max-height:621px ) {
    .vertical-text h1 {
        font-size:86px;
    }
}

@media only screen and (max-height:614px ) {
    .vertical-text h1 {
        font-size:85px;
    }
}

@media only screen and (max-height:607px ) {
    .vertical-text h1 {
        font-size:84px;
    }
}

@media only screen and (max-height:600px ) {
    .vertical-text h1 {
        font-size:83px;
    }
}

@media only screen and (max-height:593px ) {
    .vertical-text h1 {
        font-size:82px;
    }
}

@media only screen and (max-height:586px ) {
    .vertical-text h1 {
        font-size:81px;
    }
}

@media only screen and (max-height:579px ) {
    .vertical-text h1 {
        font-size:80px;
    }
}

@media only screen and (max-height:573px ) {
    .vertical-text h1 {
        font-size:79px;
    }
}

@media only screen and (max-height:565px ) {
    .vertical-text h1 {
        font-size:78px;
    }
}

@media only screen and (max-height:559px ) {
    .vertical-text h1 {
        font-size:77px;
    }
}

@media only screen and (max-height:552px ) {
    .vertical-text h1 {
        font-size:76px;
    }
}

@media only screen and (max-height:545px ) {
    .vertical-text h1 {
        font-size:75px;
    }
}

@media only screen and (max-height:538px ) {
    .vertical-text h1 {
        font-size:74px;
    }
}

@media only screen and (max-height:531px ) {
    .vertical-text h1 {
        font-size:73px;
    }
}

@media only screen and (max-height:524px ) {
    .vertical-text h1 {
        font-size:72px;
    }
}

@media only screen and (max-height:517px ) {
    .vertical-text h1 {
        font-size:71px;
    }
}

@media only screen and (max-height:509px) {
    .vertical-text h1 {
        font-size: 65px;
    }
}

@media only screen and (max-height:468px) {
    .vertical-text h1 {
        font-size: 63px;
    }
}

@media only screen and (max-height:455px) {
    .vertical-text h1 {
        font-size: 60px;
    }
}

@media only screen and (max-height:435px) {
    .vertical-text h1 {
        font-size: 58px;
    }
}

@media only screen and (max-height:421px) {
    .vertical-text h1 {
        font-size: 55px;
    }
}

@media only screen and (max-height:401px) {
    .vertical-text h1 {
        font-size: 53px;
    }
}

@media only screen and (max-height:386px) {
    .vertical-text h1 {
        font-size: 50px;
    }
}

.menucontainer {
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    position: fixed; 
    top: 20px;
    right: 20px; 
}

.menucontainer li {
    list-style-type: none; 
}

.menucontainer li a button {
    background-color: transparent;  
    border: none;   
    font-family: "fractul-variable", sans-serif;
    font-variation-settings: "wght" 400;                   
    color: white;                       
    padding: 8px 16px;             
    font-size: 20px;             
    cursor: pointer;              
    text-decoration: none; 
    transition: background-color 0.3s ease;
}

li {
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}

li input[type="button"] {
    background-color: transparent; 
    color:white;                 
    padding: 10px 20px; 
    font-family: "fractul-variable", sans-serif;
    font-variation-settings: "wght" 400;           
    font-size: 30px;              
    border: none;                  
    cursor: pointer;     
             
}

li input[type="button"]:hover {
    color: #EADDCA; 
}

li a button {
    background-color: transparent;  
    border: none;   
    font-family: "fractul-variable", sans-serif;
    font-variation-settings: "wght" 400;                  
    color: white;                       
    padding: 10px 20px;             
    font-size: 30px;              
    cursor: pointer;              
    text-decoration: none;  
         
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: -1; 
}

.video-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: -1; 
}