@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html {
  --s: 193px; /* control the size*/
  --c1: #090710;
  --c2: #000000;
  
  background:
    radial-gradient(var(--c2) 15%,
      #0000 17% 20%,var(--c2) 22% 25%,
      #0000 27% 30%,var(--c2) 32% 35%,
      #0000 37% 40%,var(--c2) 42% 45%,
      #0000 47% 50%,var(--c2) 52% 55%, var(--c1) 57%)
     calc(var(--s)/2) 0/var(--s) var(--s),
    repeating-conic-gradient(var(--c2) 0 25%,var(--c1) 0 50%)
     0 0/calc(2*var(--s)) calc(2*var(--s));
}

body{
    color: #ffffff;
    font-family: "Open Sans", Helvetica, sans-serif;   
}

.site-content{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

.site-content > *{
    padding: 10px 0;
}

header .logo{
    width: 80%;
    max-width: 200px;
    margin: 0 auto;
    display: block;
}

.logo .logo-fill {
        fill: #fff;
}

.logo-fill:hover{
    fill: #5751a2;
    transition: 0.5s;
}

.logo:hover{
    transform: scale(110%);
    transition: 0.5s;
}

h1{
    text-align: center;
    font-size: 32px;
}

h2{
    text-align: center;
    font-size: 28px;
}

p{
    font-size: 16px;
}

.streaming-platforms{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
    gap: 10px;
    text-align: center;
}

.streaming-platforms .platform img{
  width: 50px;  
}

.streaming-platforms .platform:hover{
    color: #5751a2;
}

a{
    color: #ffffff;
}

.cta{
    text-decoration: none;
    border-bottom: 2px solid #ffffff;
}

.cta:hover{
    color: #5751a2;
    border-bottom: 2px solid #5751a2;
    transition: 0.2s;
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 1.5rem 0;
}
 
.social-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #ffffff;
  font-size: 14px;
  transition: opacity 0.2s;
}
 
.social-links a:hover {
  color: #5751a2;
  transition: 0.2s;
}
 
.social-links svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
 
.social-links .divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.35);
}


@media screen and (max-width: 600px){

    .site-content > *{
        padding: 5px 0;
    }

    .streaming-platforms{
        flex-direction: column;
        gap:40px;
    }

    .social-links {
    flex-direction: column;
    gap: 16px;
  }

  .social-links .divider {
    width: 20px;
    height: 1px;
  }

}