:root{
    --main-color: #fff12a;
    --main-color-hover:#d1ce25;
    --hover-time: 175ms;
    --max-page-width: 1200px;
    --titel-color: #DB2828;
    --bg-color: #fffcf9a6;
    --text-color: rgb(103, 103, 103);
    --text-color-dark: rgb(61, 61, 61);
    --header-height: 100px;
}

/* width */
::-webkit-scrollbar {
    width: 4px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--titel-color);
    border-radius: 2px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background:var(--main-color);
  }



.hero-img{
    min-width: 100vw;
    box-sizing: border-box;
    object-fit: cover;
    grid-row: 2;
    height: 55vh;
}

h1 {
    color: var(--titel-color);
}

h3 {
    color: var(--text-color-dark);
    margin-block-end: 0;
}

.wrapper{
    display: flex;
    justify-content: center;
    width: 100vw;
    grid-row: 3/3;
}

.content{
    display: flex;
    flex-direction: column;
    max-width: var(--max-page-width);
    width: 100%;   
    padding: 40px 0;
    box-sizing: border-box;
}

.d-none{
    display: none !important;
}

.noscroll{
    max-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
}

.button{
    background-color: var(--main-color);
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    color: black;
    transition: all ease-in-out var(--hover-time);
}

.button:hover{
    cursor: pointer;
    background-color: var(--main-color-hover);
    transition: all ease-in-out var(--hover-time);
}

.pointer:hover{
    cursor: pointer;
}

.cls-1{
    fill: var(--text-color);
    transition: all ease-in-out var(--hover-time);
}

.cls-1:hover{
    cursor: pointer;
    fill: var(--main-color-hover);
    transition: all ease-in-out var(--hover-time);
}

@media(max-width: 1280px){
    .content{
        padding: 40px !important;
    }
}

@media(max-width: 450px){
    .content{
        padding: 10px;
    }
}

@media (max-width: 540px){
    body{
        grid-template-rows: var(--header-height) 60vh auto 400px;
    }
}