Untitled

/* Global Styles */  
  
* {  
  box-sizing: border-box;  
  margin: 0;  
  padding: 0;  
}  
  
body {  
  font-family: Roboto, sans-serif;  
  font-size: 16px;  
  line-height: 1.5;  
  color: #333;  
  background-color: #f9f9f9;  
  margin: 0;  
  padding: 0;  
}  
  
/* Navigation */  
  
nav {  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 50px;  
  background-color: #333;  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  padding: 0 20px;  
  z-index: 1000;  
  transition: background-color 0.3s ease-in-out;  
}  
  
nav a {  
  color: #fff;  
  text-decoration: none;  
  transition: color 0.3s ease-in-out;  
}  
  
nav a:hover {  
  color: #ccc;  
}  
  
nav .menu {  
  display: none;  
  font-size: 45px;  
  line-height: 32px;  
  margin-bottom: 6px;  
  width: 100%;  
  text-align: right;  
}  
  
nav .menu:hover {  
  cursor: pointer;  
}  
  
/* Main Content */  
  
main {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  padding: 20px;  
}  
  
.w-80 {  
  width: 80%;  
  display: flex;  
  flex-direction: column;  
  gap: 60px;  
  margin-top: 160px;  
}  
  
.w-60 {  
  width: 60%;  
  display: flex;  
  flex-direction: column;  
  gap: 60px;  
  margin-top: 160px;  
}  
  
.w-40 {  
  width: 40%;  
  display: flex;  
  flex-direction: column;  
  gap: 60px;  
  margin-top: 160px;  
}  
  
/* Sections */  
  
section {  
  display: flex;  
  flex-direction: row;  
  gap: 30px;  
  align-items: start;  
  align-items: stretch;  
}  
  
section img {  
  width: 100%;  
  height: 100%;  
  object-fit: cover;  
  transition: transform 0.3s ease-in-out;  
}  
  
section img:hover {  
  transform: scale(1.1);  
}  
  
/* Animations */  
  
@keyframes fade-in {  
  from {  
   opacity: 0;  
  }  
  to {  
   opacity: 1;  
  }  
}  
  
@keyframes slide-in {  
  from {  
   transform: translateX(-100%);  
  }  
  to {  
   transform: translateX(0);  
  }  
}  
  
/* Responsive Design */  
  
@media only screen and (max-width: 768px) {  
  nav {  
   flex-direction: column;  
   align-items: start;  
   height: unset;  
   gap: 12px;  
   padding: 8px;  
  }  
  .w-80 {  
   width: 95%;  
  }  
  .w-60 {  
   width: 90%;  
  }  
  .w-40 {  
   width: 85%;  
  }  
  section {  
   flex-direction: column;  
  }  
  #streamerzy .col-1, #streamerzy .col-2, #streamerzy section {  
   align-items: center;  
  }  
  nav .menu {  
   display: block;  
  }  
  .text-size-1 {  
   font-size: 15px;  
  }  
  .text-size-2 {  
   font-size: 28px;  
  }  
  .text-size-3 {  
   font-size: 35px;  
  }  
  .text-size-4 {  
   font-size: 45px;  
  }  
  .text-size-5 {  
   font-size: 65px;  
  }  
}