@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

:root{
  
    /* Colors */
    --main: #fff;
    --primary: #07072b;
        --primary-low: #000;
    --secondary: #DB59DE;
        --secondary-low: #c750c9;
    --alternative: #41BBE0;
        --alternative-low: #3daed0;
    --accent: #E0A600;
        --accent-low: #d69d00;
    --grey-one: #ebeaea;
    --grey-two: #d6d4d4;
    --grey-three: #c8c8c8;

    /* Spacing */
    --none: 0px;
    --extra-small:  4px;
    --small: 8px;
    --medium: 16px;
    --large: 32px;
    --extra-large: 64px;
    --extra-extra-large: 128px;
    --buttons:  8px 16px;
  
    /* Borders */
    --button: 4px;
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 12px;
    --radius-extra-large: 16px;
  
    /* default font */
    font-family: Arial, Helvetica, sans-serif;

      /* ====== Transition ====== */
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.3s ease;
    --tran-05: all 0.3s ease;
  
  }
  /* body */
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* main styling of headings */
  h1{
    font-size: 76px;
    font-family: Roboto ;
    font-weight: 700;
  }
  
  h2{
    font-size: 46px;
    font-family: Roboto;
    font-weight: 600;
  }

  h3{
    font-size: 32px;
    font-family: Roboto;
    font-weight: 600;
  }

  h4{
    font-size: 26;
    font-family: Roboto;
    font-weight: 500;
  }
  
  p{
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
  
  }
  & a{
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* link styling */

  

  body{
    width: 100vw;
    background-color: var(--primary-low);
  }
  main{
    background-color: #000;
    width: 100%;
    
  }
  .go-up{
    position: fixed;
    right: 64px;
    bottom: 64px;
    border-radius: 100%;
    border: 5px solid var(--secondary);
    outline: 5px solid var(--accent);
    padding: 12px 12px ;
    transition: ease-out 0.2s;
    &:hover{
      transition: ease-in 0.4s;
      transform: scale(1.1) rotate(-20deg);

      cursor: pointer;
      border: 5px solid var(--accent);
      outline: 5px solid var(--secondary);
      background-color: #000;
      color: #fff;
    }
  }
  /* responsive for go up button */
  @media screen and (min-width: 200px) and (max-width: 600px){
    .go-up{
      position: fixed;
      right: 16px;
      bottom: 16px;
    }
  }
  @media screen and (min-width: 600px) and (max-width: 1000px){
    .go-up{
      position: fixed;
      right: 32px;
      bottom: 32px;
    }
  }
  .section-1--home{
    padding: 64px 0px 16px;
    max-width: 900px;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

      & h1{
        font-weight: 400;
        padding-top: 00px;
        position: relative;
        color: var(--main);
        z-index: 2;

        display: flex;
        flex-direction: column;
        line-height: 1.3em;
        & span{
          font-weight: 400;
          position: relative;
          & #color-1{
            font-weight: 800;
            color: var(--secondary);
            padding: 8px 20px;
            transition: ease-out 0.3s;

            &:hover{ 
              color: var(--alternative) ;
              transition: ease-in 0.2s;
              cursor: pointer; 

            }
           }
        }

      }

      & button{
        transition: ease-out 0.3s;
        position: relative;
        padding: 20px 20px ;
        border-radius: 100%;
        border: 5px solid var(--secondary);
        outline: 5px solid var(--accent);
        margin-top: 50px;

        &:hover{
          margin-top: 200px;
          transition: ease-in 0.4s;
          transform: scale(12) rotate(-20deg);

          cursor: pointer;
          border: 5px solid var(--accent);
          outline: 5px solid var(--secondary);
          background-color: #000;
          color: #fff;
        }
        &:focus{
          margin-top: 200px;
          transition: ease-in 0.4s;
          transform: scale(12) rotate(0deg);
          cursor: pointer;
          border: 5px solid var(--accent);
          outline: 5px solid var(--secondary);
          background-color: #000;
          color: #fff;

        }
      }
  }
  /* responsive for section one laptop > bigger */
  @media screen and (min-width: 1000px) and (max-width: 1500px){
    .section-1--home{
      padding: 64px 0px 16px;
      max-width: 900px;
      height: 100vh;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
        & button{
          margin-top: 50px;
         
          &:hover{
            margin-top: 150px;
            transform: scale(7) rotate(-20deg);
          }
          &:focus{
            margin-top: 150px;
            transform: scale(7) rotate(0deg);
          }
        }
    }
  }
  /* responsive for section one tablet */
  @media screen and (min-width: 600px) and (max-width: 1000px){
    .section-1--home{
      padding: 0px 32px  64px 32px;
      max-width: 100%;
      height: 100vh;
      align-items: flex-start;
      justify-content: center;
        & button{
          margin-top: 50px;
          &:hover{
            margin-top: 150px;
            transform: scale(7) rotate(-20deg);
          }
          &:focus{
            margin-top: 150px;
            transform: scale(7) rotate(0deg);
          }
        }
    }
  }

   /* responsive for section one mobile */
  @media screen and (min-width: 200px) and (max-width: 600px){
    .section-1--home{
      padding: 0px 16px  0px 16px;
      max-width: 100%;
      height: 100vh;
      align-items: flex-start;
      justify-content: center;
        & h1{
          font-size: 46px;
        }
        & button{
          margin-top: 50px;
          &:hover{
            margin-top: 50px;
            transform: scale(3) rotate(-20deg);
          }
          &:focus{
            margin-top: 50px;
            transform: scale(3) rotate(0deg);
          }
        }
    }
  }
  .section-2--home{
    padding: 150px 32px;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    color: white;
    margin: 0 auto;
    align-items: flex-start;
    
    & h2{
      font-size: 76px;
      font-weight: 400;
    }
    & div{
      z-index: 2;
      & ul{
        padding-top: 64px;
        list-style-type: none;
        display: flex;
        flex-direction: row;
        gap: 32px;
        & li{
          border: 4px solid var(--secondary);
          height: 200px;
          width: inherit;
          border-radius: 12px;
          padding: 32px;
          display: flex;
          flex-direction: column;
          gap: 32px;
          & h3{
            color: var(--secondary);
          }
          & a{
            color: var(--main);
            border: 4px solid var(--main);
            text-decoration: none;
            padding: 20px 24px;
            font-size: 18px;
            background-color: var(--primary-low);
            border-radius: 4px;
            transition: ease-out 0.3s;
            &:hover{
              border: 4px solid var(--alternative);
              background-color: var(--primary-low);
              color: var(--alternative);
              transition: ease-in 0.3s;
            transform: scale(1.05) rotate(-10deg);
            cursor: pointer;
            }
          }
        }
      }
    }
    & button{
      transition: ease-out 0.3s;
      position: relative;
      padding: 20px 20px ;
      border-radius: 100%;
      border: 5px solid var(--secondary);
      outline: 5px solid var(--accent);
      margin-top: 20px;

      &:hover{
        margin-top: 50px;
        transition: ease-in 0.4s;
        transform: scale(1.1) rotate(-20deg);

        cursor: pointer;
        border: 5px solid var(--accent);
        outline: 5px solid var(--secondary);
        background-color: #000;
        color: #fff;
      }
      &:focus{
        margin-top: 50px;
        transition: ease-in 0.4s;
        transform: scale(1.1) rotate(0deg);
        cursor: pointer;
        border: 5px solid var(--accent);
        outline: 5px solid var(--secondary);
        background-color: #000;
        color: #fff;

      }
    }
  }
    /* responsive for section one laptop > bigger */
    @media screen and (min-width: 1000px) and (max-width: 1500px){
      .section-2--home{
        padding: 150px 32px;
        max-width: 1200px;
        height: 100vh;
        & h2{
          font-size: 52px;
          font-weight: 400;
        }
        & div{
          z-index: 2;
          & ul{
            padding-top: 32px;
            & li{
              height: max-content;
              width: inherit;
           
                }
              }
            }
          }
        }
    /* responsive for section one tablet */
    @media screen and (min-width: 600px) and (max-width: 1000px){
      .section-2--home{
        padding: 64px 32px 32px 32px;
        height: 80vh;
        margin: 0 auto;
        max-width: 100%;
        & h2{
          font-size: 52px;
          font-weight: 400;
        }
        & div{
          z-index: 2;
          & ul{
            padding-top: 32px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 32px;
            grid-row-gap: 32px;
            width: max-content;

            & li{
              height: max-content;
              width: max-content;
                }
              }
            }
          }
    }
  
     /* responsive for section one mobile */
    @media screen and (min-width: 200px) and (max-width: 600px){
      .section-2--home{
        padding: 64px 16px 32px 16px;
        height: max-content;
        margin: 0 auto;
        max-width: 100%;
        & h2{
          font-size: 42px;
          font-weight: 400;
        }
        & div{
          
          & ul{
            padding-top: 32px;
            display: flex;
            flex-direction: column;

            & li{
              height: max-content;
              width: max-content;
                }
              }
            }
            & button{
              display: none;
            }
          }
    }
  .section-3--home{
    padding: 150px 32px;
    max-width: 1280px;
    color: white;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    & h2{
      font-size: 76px;
      font-weight: 400;
    }
    & div{
     
      & ul{
        padding-top: 64px;
        list-style-type: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 32px;
        grid-row-gap: 32px;
        gap: 32px;
        & li{
          border: 4px solid var(--secondary);
          height: 300px;
          width: inherit;
          border-radius: 12px;
          padding: 32px;
          display: flex;
          flex-direction: column;
          gap: 32px;
          & h3{
            color: var(--secondary);
          }
          & a{
            color: var(--main);
            border: 4px solid var(--main);
            text-decoration: none;
            padding: 20px 24px;
            font-size: 18px;
            background-color: var(--primary-low);
            border-radius: 4px;
            transition: ease-out 0.3s;
            &:hover{
              border: 4px solid var(--alternative);
              background-color: var(--primary-low);
              color: var(--alternative);
              transition: ease-in 0.3s;
            transform: scale(1.05) rotate(-10deg);
            cursor: pointer;
            }
          }
        }
      }
    }
  }
      /* responsive for section one laptop > bigger */
      @media screen and (min-width: 1000px) and (max-width: 1500px){
        .section-3--home{
          padding: 64px 32px;
          max-width: 1200px;
          & h2{
            font-size: 52px;
            font-weight: 400;
          }
          & div{
            z-index: 2;
            & ul{
              padding-top: 32px;
              & li{
                height: max-content;
        
                width: inherit;
             
                  }
                }
              }
            }
          }
      /* responsive for section one tablet */
      @media screen and (min-width: 600px) and (max-width: 1000px){
        .section-3--home{
          padding: 64px 32px 32px 32px;
          height: 80vh;
          margin: 0 auto;
          max-width: 100%;
          & h2{
            font-size: 52px;
            font-weight: 400;
          }
          & div{
            z-index: 2;
            & ul{
              padding-top: 32px;
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              grid-template-rows: repeat(2, 1fr);
              grid-column-gap: 32px;
              grid-row-gap: 32px;
              width: max-content;
  
              & li{
                height: max-content;
                width: max-content;
                  }
                }
              }
            }
      }
    
       /* responsive for section one mobile */
      @media screen and (min-width: 200px) and (max-width: 600px){
        .section-3--home{
          padding: 64px 16px 32px 16px;
          height: max-content;
          margin: 0 auto;
          max-width: 100%;
          & h2{
            font-size: 42px;
            font-weight: 400;
          }
          & div{
            z-index: 2;
            & ul{
              padding-top: 32px;
              display: flex;
              flex-direction: column;
  
              & li{
                height: max-content;
                width: max-content;
                  }
                }
              }
            }
      }

/* We love web pages */

.section-content--detail{
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100vw;
  margin: 0 auto;
  padding: 50px 16px 64px 16px;
  gap: var(--medium);

  & .link{
        transition: ease-out 0.3s;
        position: relative;
        padding: 20px 20px ;
        border-radius: 100%;
        border: 5px solid var(--secondary);
        outline: 5px solid var(--accent);
        background-color: #fff;
        margin-bottom: 32px;
        color: var(--primary-low);

        &:hover{
          transition: ease-in 0.4s;
          transform: scale(1.1) rotate(20deg);
          cursor: pointer;
          border: 5px solid var(--accent);
          outline: 5px solid var(--secondary);
          background-color: #000;
          color: #fff;
        }
        &:focus{
          transition: ease-in 0.4s;
          transform: scale(1.1) rotate(0deg);
          cursor: pointer;
          border: 5px solid var(--accent);
          outline: 5px solid var(--secondary);
          background-color: #000;
          color: #fff;
    }
  }

  & h1{
    color: #fff;
    font-size: 46px;
  }

  & h3{
     color: var(--secondary);
     font-size: 24px;
  }

  & p{
    color: #fff;
  }

  & ul{
    display: flex;
    flex-direction: column;
    gap: var(--medium);
    list-style-type: none;
    & li{
      color: #fff; 

      & strong{
        color: var(--secondary);
        font-size: 20px;
      }
    }
  }
  
}

/* responsive for detail tablet */
@media screen and (min-width: 600px) and (max-width: 1000px){
  .section-content--detail{
    padding: 64px 32px 32px 32px;
  }
}

/* responsive for detail l/xl/xxl */
@media screen and (min-width: 1000px) {
  .section-content--detail{
    padding: 64px 32px 32px 32px;
    width: 900px;
    margin: 0 auto;
  }
}

/* spotify detail */

.spotify{
  background-color: #121212;
  & .link{
    border-radius: 25px;
    
    padding: 10px 120px;
    border: none;
    outline: none;
    background-color: #1ed760;
  
    &:hover{
      transition: ease-in 0.3s;
      transform: scale(102%) ;
      border: none;
    outline: none;
    background-color: var(--main);
    color: #000;
    }
  }
  & h1{
    font-size: 2em;
  }

  &  h3{
    font-size: 1.2em;
    color: #1ed760;
  }

  & ul{
    list-style-type: disc;
    padding-inline-start: 1em;
  }
}