LaGriT/docs/assets/css/index_page_style.css

.extended-content-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    top: -70px;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color:#68A5F3;
    padding-bottom: 15px;
    padding-top: 15px;
}

@media only screen and (max-width: 960px) {
  .extended-content-container {
    top: -70px;
  }
}
    
.extended-content {
    width: 100%;
    background-color:#68A5F3;
    text-align:center;
    color: white;
    font-size: 25pt;
}

/*
    Button Styles
    Inspired by 'CSS Button Animations' by Alex Loomer
    
    https://codepen.io/atloomer/pen/JEaRWX
*/

.button {
    display: inline-flex;
    height: 40px;
    width: 165px;
    /*border: 2px solid #BFC0C0;*/
    margin: 20px 20px 20px 20px;
    color: #BFC0C0;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 10pt;
    letter-spacing: 1.5px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
    
/* Third Button */

#button-3 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid white;
    background: #3570B3;
}

#button-3 a {
  position: relative;
  transition: all .45s ease-Out;
  color: white;
  text-decoration: none;
}

#circle {
    width: 0%;
    height: 0%;
    opacity: 0;
    line-height: 40px;
    border-radius: 50%;
    background: #F0D451;
    position: absolute;
    transition: all .5s ease-Out;
    top: 20px;
    left: 70px;
}

#button-3:hover #circle {
    width: 200%;
    height: 500%;
    opacity: 1;
    top: -70px;
    left: -70px;
}

#button-3:hover a {
    color: #2D3142;
    text-decoration: none;
}

/* Fourth Button */

#button-4 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

#button-4 a {
    position: relative;
    transition: all .45s ease-Out;
    color: white;
}

#underline {
    width: 100%;
    height: 2.5px;
    margin-top: 15px;
    align-self: flex-end;
    left: -200px;
    background: #F0D451;
    position: absolute;
    transition: all .3s ease-Out;
    bottom: 0;
}

#button-4:hover #underline {
    left: 0;
}

#button-4:hover a {
    text-decoration: none;
}

.accordion-item input {
  display: none;
}

.accordion-header {
  display: block;
  cursor: pointer;
  padding: 10px;
  #background-color: #f1f1f1;
  border: 1px solid #ddd;
  font-weight: bold;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 10px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.accordion-item input:checked ~ .accordion-content {
  max-height: 800px; /* Set a reasonable max-height */
}