body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start; /* Orta üst kısma yerleştir */
background-color: #000000;
font-family: Arial, sans-serif; /* Varsayılan bir font kullan */
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('potos/flasbulb2.png');
background-size: 200px 200px;
animation: moveBackground 20s linear infinite;
}
.container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column; /* İçeriği sütun şeklinde düzenle */
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.warp-image {
width: 600px; /* Asıl logonun boyutunu 800px olarak ayarladık */
animation: warp 2s infinite;
margin-bottom: 100px; /* Logolar arasında boşluk bırak */
}
.youtube-links {
display: flex;
justify-content: center; /* Logoları ortala */
align-items: center;
width: 100%; /* Container genişliğinin tamamı kadar */
margin-top: 30px; /* YouTube logolarını 30px kadar alta al */
}
.youtube-links a {
text-decoration: none; /* Link altı çizgisini kaldır */
transition: transform 0.3s ease-in-out;
margin: 20px; /* Logolar arası boşluk bırak */
display: block; /* A elementlerini blok element yap */
}
.youtube-links img {
width: 350px; /* YouTube logolarını 150px boyutuna küçülttük */
transition: transform 0.3s ease-in-out;
}
.youtube-links a:hover {
transform: translateY(-10px); /* Süzülme efekti */
}
.marquee-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
z-index: 1000; /* Diğer içeriklerin üzerinde olacak */
}
.marquee {
display: inline-block;
color: #00FF00; /* Yeşil renk */
font-size: 10px; /* Yazı boyutunu 2 katına çıkardık */
font-weight: 100; /* İnce font kalınlığı */
white-space: nowrap; /* Satır sonu işaretlerini kaldır */
animation: marquee 20s linear infinite; /* Kayan animasyon */
}
@keyframes marquee {
0% {
transform: translateX(calc(100% + 2000px));
}
100% {
transform: translateX(-100%);
}
}
@keyframes warp {
0% {
transform: scale(1, 1);
}
25% {
transform: scale(1.2, 0.8);
}
50% {
transform: scale(1.1, 0.9);
}
75% {
transform: scale(1.2, 0.8);
}
100% {
transform: scale(1, 1);
}
}
@keyframes moveBackground {
0% {
background-position: 0 0;
}
100% {
background-position: 600px 600px;
}
}
.modal {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 2000;
}
.modal-content {
text-align: center;
color: white;
}
.modal-content p {
margin: 20px 0;
color: #00FF00; /* Yeşil renk */
}
.modal-content .small-text {
font-size: 14px;
color: #00FF00; /* Yeşil renk */
}
.close-modal {
border: none; /* Çerçeveyi kaldırdık */
background: none; /* Arka planı kaldırdık */
cursor: pointer;
}
.close-modal img {
width: 70px; /* Görüntüyü biraz büyüttük */
cursor: pointer;
}