@font-face {
   font-family: 'Segoe Site';
   src: url('fonts/segoeui.ttf');
}

#text {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
}

#text3 {
   text-align: center;
}

#text3 {
   font-size: 28px;
   color: white;
   font-family: 'Segoe Site';
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

#textheading {
   font-size: 22px;
   font-family: 'Segoe Site';
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
   color: white;
}

#text6 {
   font-size: 28px;
   font-family: 'Segoe Site';
}

#text7 {
   font-size: 27px;
   font-family: 'Segoe Site';
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
   color: white;
}

#text8 {
   font-size: 19px;
   font-family: 'Segoe Site';
}

.video-container {
   display: flex;
   align-items: center;
   position: relative;
   max-width: 100%;
   max-height: 320px;
   height: 100%;
   width: 100%;
   padding-bottom: 56.25vh;
}

.video-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   max-width: 520px;
   max-height: 320px;
   height: 100%;
   width: 100%;
}

body {
   background-image: url("/images/backgrounds/background.png");
   background-size: cover;
   background-position: center;
}

.startmenu {
   position: absolute;
   left: 4px;
   top: 4px;
   transform: scale(1);
   transition: transform 0.3s ease;
}  

.glassmorphism {
   width: 550px;
   height: auto;
   background: rgba(255, 255, 255, 0.7);
   border-radius: 10px;
   backdrop-filter: blur(5px);
   padding: 10px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   z-index: 1;
}

@media only screen and (max-width: 857px) {
.welcomeBlock {
   padding-left: 80px;
   padding-right: 5px;
   box-sizing: border-box;
}
}

.welcomeBlock {
   width: 100%;
   height: auto;
   display: flex;
   justify-content: center;
}

.startmenu:hover {
   transform: scale(1.3);
}
.menu {
   height: auto;
   display: none;
   position: absolute;
   background: rgba(255, 255, 255, 0.7);
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(5px);
   padding: 10px;
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
   font-size: 15px;
   font-family: 'Segoe Site';
   z-index: 2;
}

.menu img {
   margin-right: 10px;
}

.menu-item {
   vertical-align: bottom;
}

a {
   color: black;
   text-decoration: none;
}

.Project {
   width: 408px;
   height: 200px;
   background: rgba(255, 255, 255, 0.7);
   border-radius: 10px;
   backdrop-filter: blur(5px);
   padding: 10px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
   display: flex;
   justify-content: center;
   z-index: 1;
}

#button {
   border-radius: 6px;
   font-family: 'Segoe Site';
   font-size: 15px;
   background: rgb(255, 255, 255);
   border: 1px solid rgb(0, 114, 255);
   position: absolute;
   bottom: 20px;
   right: 20px;
}

#heading {
   width: 200px;
   position: absolute;
   left: 20px;
   top: 2px;
   font-family: 'Segoe Site';
   font-size: 20px;
}

#description {
   width: auto;
   position: absolute;
   left: 20px;
   top: 75px;
   font-family: 'Segoe Site';
   font-size: 15px;
}

#img-project {
   position: absolute;
   top: 15px;
   right: 20px;
}

@media only screen and (max-width: 857px) {
.projectBlock {
   box-sizing: border-box;
}
}

.projectBlock {
   width: 100%;
   height: auto;
   display: flex;
   justify-content: center;
}