html {
  font-family: sans-serif;
}

a:visited {
  color: #fff;
}

body {
  margin: 0px;
  background: #B55555;
}

ul {
  padding-inline-start: 0px;
}

nav {


  z-index: 1;

}

nav ul {
  float: right;
  background: #33443dcc;
}

nav ul li {
  display: table-cell;
}

nav ul li a {

  padding: 2dvh;
  display: block;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

svg:not(:root) {
  width: 4dvh;
  height: 3dvh;
}

nav ul li a:hover {
  color: #A38A8A;
}

nav ul .active a {
  color: #A38A8A;
  border-bottom: 3px solid #A38A8A;
  padding-bottom: calc(2dvh - 3px);
}

.titleGlow {
  display: inline-block;
  animation-name: glowAnimation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-delay: 2s;


}

@keyframes glowAnimation {
  to {
    opacity: 0.6;
  }
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#home {
  height: 97dvh;
  position: relative;
  margin: 0;
  padding: 0;
  display: block;
  z-index: 0;
}

#sectionContent p {
  font-size: 2.5dvh;
}

h2 {
  padding: 0;
  margin: 0;

  font-size: 10dvw;
  float: right;
  right: 50px;
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  top: 3dvh;
}

#header {

  background: #33443D;
  height: 3dvh;
  width: 100%;
  z-index: 1;
  color: #fff;


}

#header span {

  right: 10px;
  height: 3dvh;
  line-height: 3dvh;
  font-size: 2dvh;
  opacity: 0.5;
}

#header svg {
  font-size: 3dvh;
  width: 3dvh;
  color: white;
  float: left;
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
}

#header svg:hover {
  opacity: 1;
}

#social1 svg {
  background-color: royalblue;

}

#social2 svg {
  background-color: cornflowerblue;
}

#social3 svg {
  background-color: steelblue;
}

#sectionContent {
  font-size: 15pt;
  right: 5dvw;
  top: 20dvh;
  background-color: #33443dcc;
  padding: 20px;
  height: 50dvh;
  padding-top: 20px;
  z-index: 5;
  color: #fff;
  width: 60dvw;
  float: right;
}

#sectionContent a {
  color: #fff;
  font-weight: bold;
}

#sectionContentHeader1 {
  height: 20px;
  width: 20px;
  background-color: #fff;
  opacity: 0.8;
  display: inline-block;

}

#sectionContentHeader2 {
  height: 5px;
  width: 90%;
  background-color: #fff;
  opacity: 0.8;
  display: inline-block;
  margin: 7.5px 0px;
}

#sectionContentText {
  padding-top: 1dvh;
}

#home,
#work,
#projects,
#contact {
  top: 3dvh;
}

#home {}

#work {
  background: #772583;
  color: white;
}

object {
  position: absolute;
  height: 100%;
  left: -1050px;
  opacity: 0.6;
  max-width: 1500px;
}

#projects {
  background: #AAFF8A;
}

#contact {
  background: #4770CC;
}

#syhiba {
  position: relative;
  overflow-y: hidden;
  width: 100%;
  height: 99vh;
  border: 0px;
}

.item1 {
  grid-area: banner;

  background: #33443D;
  height: 3dvh;
  width: 100%;
  z-index: 1;
  color: #fff;
}

.item2 {
  grid-area: header;
}

.item3 {
  grid-area: menu;
}

.item4 {
  grid-area: content;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'banner banner banner banner banner banner'
    'header header header header header .'
    '. . . . menu .'
    '. . . content content .';
  gap: 10px;
  background-color: #B55555;

}

.grid-container>div {}